I have written JavaScript code to show and hide the div. But I got stuck when it is not working in Internet Explorer 8. It is working smoothly in other browsers, like Opera, Firefox etc.
Here is my code:
<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
}
else
{
document.getElementById("div1").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
<object width="300" height="300">
<param name="movie" value="">
</param>
<embed src=""
type="application/x-shockwave-flash"
width="300"
height="300">
</embed>
</object>
</div>
<center>
<div onclick="showHideDiv()">Click Me For show hide <div>
</center>
</body>
</html>
I have written JavaScript code to show and hide the div. But I got stuck when it is not working in Internet Explorer 8. It is working smoothly in other browsers, like Opera, Firefox etc.
Here is my code:
<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
}
else
{
document.getElementById("div1").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
<object width="300" height="300">
<param name="movie" value="http://www.youtube./v/7_6B6vwE83U">
</param>
<embed src="http://www.youtube./v/7_6B6vwE83U"
type="application/x-shockwave-flash"
width="300"
height="300">
</embed>
</object>
</div>
<center>
<div onclick="showHideDiv()">Click Me For show hide <div>
</center>
</body>
</html>
- 1 You could just $("#div1").toggle() with jQuery – Flash Commented Jun 7, 2011 at 9:24
- 2 Or not... jQuery is not needed in this case – mplungjan Commented Jun 7, 2011 at 9:29
- 1 Your code looks fine. I tried your code, it's working in IE 8. Clear IE8 Browser cache and try again. – Muthu Kumaran Commented Jun 7, 2011 at 9:32
- Don't forget to declare a doctype - IE8 is a bit sensitive... w3/QA/2002/04/valid-dtd-list.html – WSkid Commented Jun 7, 2011 at 9:34
- @mplungjan jQuery is never needed but it makes things like this easier especially when you're worried about browser inconsistencies :) – Flash Commented Jun 7, 2011 at 9:38
6 Answers
Reset to default 1try:
var div1 = document.getElementById("div1");
if(div1.style.display=="none" || div1.style.display == ""){
document.getElementById("div1").style.diplay = "block";
}
else{
div1.style.display = "none";
}
Try using display:
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.display;
if(divstyle.toLowerCase()=="block" || divstyle == "")
{
document.getElementById("div1").style.display= "none";
}
else
{
document.getElementById("div1").style.display= "block";
}
}
jQuery is your best friend when working with DOM.
<style type="text/css">
.hidden {
visibility: hidden;
}
</style>
<script type="text/javascript">
$(function(){
$('.trigger').click(function(){
$('#div1').toggleClass('hidden');
});
});
</script>
<div id="div1" class="divStyle">
<object width="300" height="300">
<param name="movie" value="http://www.youtube./v/7_6B6vwE83U"></param>
<embed src="http://www.youtube./v/7_6B6vwE83U" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</div>
<center>
<div class="trigger">Click Me For show hide</div>
</center>
Your page works just fine in Firefox 4 and Internet Explorer 8 on Windows XP.
Yours: http://jsfiddle/mplungjan/2KZ47/
Mine: http://jsfiddle/mplungjan/7bxrB/
<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
<style type="text/css">
.center {text-align:center}
#div1 {visibility:visible}
</style>
<script language="javascript" type="text/javascript">
function showHideDiv() {
var div = document.getElementById("div1");
div.style.visibility=(div.style.visibility==="visible"||div.style.visibility==="")?"hidden":"visible";
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
...
</div>
<div class="center" onclick="showHideDiv()">Click Me For show hide <div>
</body>
</html>
The respondents that have tested it all report that it works fine in their IE8. That would leave three options open:
- No Doctype declaration (I'm assuming the testers put that over it manually).
- It concerned an intranet site, temporarily or permanently. IE8+ has a Compatibility Mode/View (= IE7), which it defaults to in case an intranet site is requested. Exceptions are made for sites of which the URL starts with 'localhost' of '127.0.0.1', the address of the on-puter server(-simulator), if installed.
- The OP had his IE8 set to 'View all sites in Compatibility Mode/View'.
There is a filter property (style.filter) that IE8 sets it to alpha(opacity=0). Just set it to undefined and the element pops up again.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745133616a4613094.html
评论列表（0条）