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/dynamici...edcollapse.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/dynamici...edcollapse.htm

Below is my code...

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 ?

Code:

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:

Code:

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 ?

**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:

Code:

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

Thread: Help with Animated Collapsible DIV v2.4 / Safari Bug

Thread Tools

Search Thread

Help with Animated Collapsible DIV v2.4 / Safari Bug

Bookmarks

Bookmarks

Posting Permissions