PDA

View Full Version : Help with Animated Collapsible DIV v2.4 / Safari Bug



datoupee
05-19-2011, 07:51 PM
1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

I am trying to find a way to get the script to auto-expand (showing animation) when the page loads. The only way I see available is to have the <div> be already expanded when the page loads. This does not show the animation. It just shows expanded when the page loads.

My way to try and resolve this was to add an "autoclick" script when the page loads that clicks the toggle URL.

This worked in all browsers except Safari. Safari will load the page and continue loading the page and never stop. The expand works but the page never finishes loading and this is my problem. Please help.

Here is the link to test what is happening...
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Below is my code...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Page</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/java/expand/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">
animatedcollapse.addDiv('expand','fade=0,height=325px,speed=800')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

<script type="text/javascript">

/***********************************************
* Added In On Load Click Toggle Button
***********************************************/

window.onload = function(){
location.href = document.getElementById("autoclick");
}
</script>

</head>

<body>

<table cellspacing="0 cellpadding="0" align="center">
<tr>
<td>

<div id="expand" style="width: 1000px; background: #fec215; display:none; center">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<STYLE TYPE="text/css">
.tournament_header { font-family: arial; font-size: 11pt; color: #ffffff; }
.tournament_header a { font-family: arial; font-size: 9pt; color: #ffffff; text-decoration: none; }
.tournament_header a:hover { font-family: arial; font-size: 9pt; color: #fec215; text-decoration: underline; }
.expand_link a { font-family: arial; font-size: 9pt; color: #000000; text-decoration: none; }
.expand_link a:hover { font-family: arial; font-size: 9pt; color: #ffffff; text-decoration: underline; }
</STYLE>

<table width="1000" height="112" cellspacing="0" cellpadding="0" align="center"

background="/tournaments/_headers/images/2011_french_open.png">
<tr>
<td style="border-bottom: 17px solid #ffffff">

<table cellspacing="0" cellpadding="0">
<tr>
<td width="700" height="112" class="tournament_header">

<table cellspacing="0" cellpadding="0">
<tr>
<td width="700" height="87"><a href="/tournaments/australianopen/australian-open.aspx"><img src="/images/main/1x1.gif" width="697"

height="87" border="0"></a></td>
</tr>
<tr>
<td width="700" height="25" style="padding-left: 8px; padding-bottom: 4px" valign="bottom">
<a href="/tournaments/frenchopen/draws/2011_draws_men.aspx">Draws</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/tournaments/frenchopen/australian-open.aspx">Tournament Page</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/livescores/index.aspx">Live Scores</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/articles/templates/ontv.aspx?articleid=787&zoneid=7">On TV</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/galleries/index.aspx">Photos</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/podcast/index.aspx">Podcast</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/articles/templates/?a=12031&z=9">Editors' Picks</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
</table>

</td>
<td width="300" height="112" align="right" valign="top" class="expand_link" style="padding-top: 5px; padding-right: 5px"><a

href="javascript:animatedcollapse.toggle('expand')" id="autoclick" class="text">Open / Close [x]</a>
</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>


</body>

</html>

ddadmin
05-21-2011, 06:44 PM
Instead of doing it the way you're currently doing (simulating a click), try the below modified .js file instead, which slides down the expanded DIVs by default automatically when the page loads. Testing in Safari Windows it seems to work without incident.

datoupee
05-23-2011, 04:35 PM
Thanks for the updated file. However, it still is not auto expanding by default. I'm assuming I need to add something to the following line of code to have it expand by default ?



animatedcollapse.addDiv('expand','fade=0,height=325px,speed=800')

ddadmin
05-25-2011, 07:34 AM
Hmm it works for me- the expanded divs slide down automatically when the page first loads. Please post a link to the page on your site that contains the problematic script so we can check it out.

datoupee
05-25-2011, 04:27 PM
Here is the link...

http://72.3.178.92/test/test.html

ddadmin
05-25-2011, 05:57 PM
Right now your DIV is set to always be collapsed when the page loads, so there's no opportunity for the script to work. Try enabling persistence:


animatedcollapse.addDiv('expand','fade=0,height=325px,speed=800,persist=1')

then expand the DIV, then reload the page again.

datoupee
05-25-2011, 11:45 PM
It worked... however, if I collapse the unit then refresh, the unit is still collapsed.

I'm trying to get it to always auto expand when the page loads, regardless of what a user has done in the past.

ddadmin
05-26-2011, 08:24 AM
In that case, remove the persist=1 string from your initialization code, and also, display:none from within the DIV tag itself.

datoupee
05-26-2011, 04:04 PM
I made the changes you suggested but still no luck ? :mad:

ddadmin
05-27-2011, 06:10 AM
Ok, try telling the script to explicitly expand the DIV in question when the page loads, by adding the option in red below to your init code:


animatedcollapse.addDiv('expand','fade=0,height=325px,speed=800,hide=0')

datoupee
05-27-2011, 03:56 PM
Still not working.

ddadmin
05-30-2011, 08:39 PM
Ok, I may have found the issue causing the hiccup. Inside the .js file, find the below line:


var cssdisplay=this.getAttr('hide')? 'none' : null

and change null to 'block' instead:


var cssdisplay=this.getAttr('hide')? 'none' : 'block'

This should now work assuming you have "hide=0" defined inside your initialization code:


animatedcollapse.addDiv('expand','fade=0,height=325px,speed=800,hide=0')

datoupee
05-31-2011, 07:06 PM
It worked ! Thank you VERY MUCH for your troubles in answering my questions.