Slidedown not working on display:none DIVs with FF but fine with IE
Hello,
I'm very new to Javascript.
I have some DIVs which I managed to hide using style="display:none;" then display with JQuery's SlideToggle.
It is working fine in IE. When I open the page, all the DIV's are hidden and I can toggle them visible or hidden using a link like this one:
<a href="javascript:doSlide(wgwo_div)">view</a>
where the div is called 'wgwo_div'.
In FF, it looks the same when the page is loaded, but the links to called doSlide do not work.
The references in the <head> section look like this:
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
function doSlide(id){
timeToSlide = 50; // in milliseconds
obj = id
if(obj.style.display == "none"){ // if it's allready hidden we slide it down
obj.style.visibility = "hidden";
obj.style.display = "block";
height = obj.offsetHeight;
obj.style.height="0px";
obj.style.visibility = "visible";
slideDown(obj,0,height,Math.ceil(height/timeToSlide));
} else {
slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);
}
}
</script>
<script language="javascript">
function slideDown(obj,offset,full,px){
if(offset < full){
obj.style.height = offset+"px";
offset=offset+px;
setTimeout((function(){slideDown(obj,offset,full,px);}),1);
} else {
obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead...
}
}
</script>
<script language="javascript">
function slideUp(obj,px,full){
if((obj.offsetHeight-px) > 0){
obj.style.height = obj.offsetHeight-px+"px";
setTimeout((function(){slideUp(obj,px,full);}),1);
} else {
obj.style.height=full+"px"; // we reset the height if we were to slide it back down
obj.style.display = 'none';
}
}
</script>
</head>
And here's a sample DIV from the <body>
........
<tr>
<td width="620" class="blue_text">
<ul style="line-height:180%";>
<li>A user-friendly application to manage an events company
..<a href="javascript:doSlide(wgwo_div)">view</a>
</li>
<div id="wgwo_div" style="display:none;">
<h2 class="orange" style="padding-top:20px;">
Lesley Long (Director of Women Go Wild Outdoors)</h2>
<p class="grey_text">
<a href="http://www.womengowildoutdoors.com" title="Click to visit the Women Go Wild Outdoors site.">
<img src="images/wgwo_rgb_300_353x146.jpg" border="0" width="205" height="84" align="right"
hspace="10";>
</a>
<a href="http://www.womengowildoutdoors.com">
Women Go Wild Outdoors</a> offers women a way to have outdoor
adventures on their own terms and to become part of a
community of likeminded women. Our challenge was to find
business software that would not only meet our marketing and
event planning needs but would also enable us to gather
data about women's social and business groups across
the country in order to create an active community.
</p>
<p class="grey_text">
It became clear that there was no suitable off the shelf
solution so we asked Working Data to build Custom
Business Software that we could develop in stages; a process
which has proved enormously helpful. We have been able to
spread the cost of development and have had time to
consolidate each phase before moving to the next. We
especially like the fact that we can work remotely
with Working Data using Skype and PC remote access
software to develop and maintain the database.
It feels like we are working in partnership even
though we are over 120 miles apart. We are delighted
to recommend Working Data to other businesses
looking for creative solutions to their data
management needs.
</p>
<a href="javascript:doSlide(wgwo_div)" class="link">close</a>
<img src="images/pale_blue_dot.gif" width="580" height="1">
</div>
.........
Can anyone help?
Thanks in advance,
Franc.