JavaScript - Animated Collapsible Div V2.4

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

Hi!

I installed the Animated Information Bar found on http://www.javascriptkit.com/script/.../infobar.shtml

Now there is a option to display the bar once per session but this isn't working...

Code:

infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!

Anyone has installed this bar and knows why this isn't working?
I use IE8

greetings
Jardin
Holland

Hi there,
I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code:

Code:

<script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
	headerImage();
});

var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
	$('.headerImage').animate({height: '436px'},speed);
	$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
	$('.headerImage').stop().animate({'height': origHeight},speed);
	$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
	origMT = $('.headerImage img').css('margin-top');
	origHeight = $('.headerImage').css('height');
  $('.headerImage img').css('margin-top','0');
	$('.headerImage').css('height','436px');
	setTimeout(shrinkHeader,speed*2);
	$('.headerImage').hover(expandHeader, shrinkHeader);
}

/* ]]> */
</script>

If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere.

Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this.

I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help.

Thanks,
Brandon

I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code:

<img src="img/door_admin_static.gif" width="229" height=401"
alt="admindoor" usemap="#admin" name="animate">
<map name="admin">
<area shape ="rect" coords ="65,165,236,501"
onClick="document.images.animate.src='img/door_admin.gif';
return true"
href ="admin.html" rel="nofollow" target="_self" alt="admin" />
</map>


What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete.

Any help would be greatly appreciated!!

Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ?

thanks

Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look
http://www.palousehillscomputing.com...rop/index.html
The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks

Hi I am trying to include an animated banner on my website but it wont work is there anyone out there who can look at my code and tell me where I am going wrong?

Code:

<head>

	<title>Online movie store</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link href="style.css" rel="stylesheet" type="text/css" />





<script type="text/javascript" language="JavaScript" src="mylibrary.js">


</script>



<script type="text/javascript" language="JavaScript">






<!--









var myproducts = new Array("sherlockholmes","anchorman","weweresoldiers","starshiproopers","homealone","gamer","residentevil");









var itemqty = 0;









function showCookies(){



    





for (i=0;i<myproducts.length;i++){



		 





var qtyWanted = GetCookie(myproducts[i]);



        





itemqty = qtyWanted ? qtyWanted : "0";



        





document.dvdform[myproducts[i]+"qty"].value = itemqty;



    





}









}









function addToCart(dvd){



    





itemqty = document.dvdform[dvd + "qty"].value;



    





itemqty = parseInt(itemqty);



    





SetCookie(dvd,itemqty);



    





var feedback = "An order for " + itemqty + " dvd(s) of ";



    





feedback += dvd.toUpperCase();



    





feedback += " has been added to your shopping cart.";



    





feedback += " Please click 'Check Out' when finished."



    





alert(feedback);









}









function checkOut(){



    





window.location.href = "return.html";









}




var myAds = new Array();


myAds[1] = new Image();


myAds[2] = new Image();


myAds[3] = new Image();


myAds[4] = new Image();





myAds[1].src = "images/sh.jpg";


myAds[2].src = "images/am.jpg";




myAds[3].src = "images/sold.jpg";



myAds[4].src = "images/star.jpg";







/* Callout: The timings represent the number of milliseconds delay between the images.*/


var myTimings = new Array();


myTimings[1] = 3000;


myTimings[2] = 1500;


myTimings[3] = 1500;


myTimings[4] = 1500;





var mySites = new Array();


mySites[1] = "sh.html";


mySites[2] = "am.html";


mySites[3] = "sold.html";


mySites[4] = "star.html";





var adnumber = 0;


var totalads = myAds.length - 1;


var timerID = "";





function startBanner(){


    adnumber = 0;


    showAd();


}


function showAd(){


    if (document.images){


        /*Callout: This condition ensures that each image loads 


            completely before the next image appears in the sequence. */


        if (document.myBanner.complete){


            adnumber++;


            (adnumber > totalads) ? adnumber=1 : adnumber=adnumber;


            document.myBanner.src = myAds[adnumber].src;


        }


        timerID = setTimeout("showAd()",myTimings[adnumber]);


    }


}


function goSite(){


    clearTimeout(timerID);


    window.location.href = mySites[adnumber];


}







//-->









</script>





</head>

<body onload="showCookies(); startBanner();">

<form name="dvdform">


  <div id="wrapper">

      <div id="inner">

          <div id="header">

              <h1><img src="images/logo.png" width="519" height="63" alt="Online Movie Store" /></h1>

              <div id="nav">

                  <a href="account.html">your account</a> | <a href="cart.html">view cart</a> 

              </div><!-- end nav -->

              <img src="images/movie.png" width="744" height="198" alt="Banner" /></a>

              

          </div><!-- end header -->
		<dl id="browse">

		<dt>We Have All Your Favourite Movies</dt>

          <div align="CENTER">




		<a href="sh.html" onclick=


		"goSite();return false;"><img src = "images/sh.jpg"


		name="myBanner" width="180" height="400" border="0" alt="Sherlock Holmes"></a></div>



              

              

              

          </dl>

          

          <div id="body">

              <div class="inner">

                  

                  <div class="leftbox">

                      <h3>Sherlock Holmes (2009)</h3>

                      <img src="images/sh.jpg" width="80" height="100" alt="sherlock holmes" class="left" />

                      <p>Detective Sherlock Holmes and his stalwart partner Watson engage in a battle of wits and brawn with a nemesis whose plot is a threat 

			to all of England.</p>





			<input type="TEXT" name="sherlockholmesqty" size="5" value="0"><br>


                      <p><b>Price:</b> �3.00 per night</p>

                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('sherlockholmes');">
</p>

                      <div class="clear"></div>

                  </div><!-- end .leftbox -->

                  



			<div class="rightbox">

                      <h3>Anchorman: The legend of Ron Burgundy (2004)</h3>

                      <img src="images/am.jpg" width="80" height="100" alt="Anchorman" class="left" />

                      <p>Ron Burgundy is San Diego's top rated newsman in the male dominated broadcasting of the 1970's, but that's all about to change when a new 

			female employee with ambition to burn arrives in his office.</p>

			<input type="TEXT" name="anchormanqty" size="5" value="0"><br>


                      <p><b>Price:</b> �3.00 per night</p>

                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('anchorman');"></p>

                      <div class="clear"></div>

                  </div><!-- end .rightbox -->

                  

                  <div class="clear br"></div>



                  <div class="leftbox">

                      <h3>We Were Soldiers (2002)</h3>

                      <img src="images/sold.jpg" width="80" height="100" alt="we were soldiers" class="left" />

                      <p>The story of the first major battle of the American phase of the Vietnam War and the soldiers on both sides that fought it.</p>

                      <p><b>Price:</b> �3.00 per night</p>

			<input type="TEXT" name="weweresoldiersqty" size="5" value="0"><br>


                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('weweresoldiers');">
</p>

                      <div class="clear"></div>

                  </div><!-- end .leftbox -->

                  



			<div class="rightbox">

                      <h3>Starship Troopers (1997)</h3>

                      <img src="images/star.jpg" width="80" height="100" alt="Starship troopers" class="left" />

                      <p>Humans of a fascistic, militaristic future do battle with giant alien bugs in a fight for survival.</p>

                      <p><b>Price:</b> �3.00 per night</p>

			<input type="TEXT" name="starshiptroopersqty" size="5" value="0"><br>


                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('starshiptroopers');"></p>

                      <div class="clear"></div>

                  </div><!-- end .rightbox -->



                  <div class="clear br"></div>



                  <div class="leftbox">

                      <h3>Home Alone (1990)</h3>

                      <img src="images/homealone.jpg" width="80" height="100" alt="Home Alone" class="left" />

                      <p>An 8-year-old boy, who is accidentally left behind while his family flies to France for Christmas, has to defend his home against idiotic burglars.</p>

                      <p><b>Price:</b> �3.00 per night</p>

			<input type="TEXT" name="homealoneqty" size="5" value="0"><br>


                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('homealone');">
</p>

                      <div class="clear"></div>

                  </div><!-- end .leftbox -->

                  



			<div class="rightbox">

                      <h3>Gamer (2009)</h3>

                      <img src="images/gamer.jpg" width="80" height="100" alt="Gamer" class="left" />

                      <p>In a future mind-controlling game, death row convicts are forced to battle in a 'doom'-type environment. Convict Kable, controlled by Simon, 

			a skilled teenage gamer, must survive 30 sessions in order to be set free. Or won't he?</p>

                      <p><b>Price:</b> �3.00 per night</p>

			<input type="TEXT" name="gamerqty" size="5" value="0"><br>


                      <p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('gamer');">
</p>

                      <div class="clear"></div>

                  </div><!-- end .rightbox -->



                  <div class="clear"></div>

                  

              </div><!-- end .inner -->

          </div><!-- end body -->

          

          <div class="clear"></div>

          <div id="footer">

              

              

              &nbsp;

              <div id="footnav">

                  <a href="account.html">Your Account</a> | <a href="cart.html">View Cart</a>

              </div><!-- end footnav -->

              

          </div><!-- end footer -->

      </div><!-- end inner -->

  </div><!-- end wrapper -->

</form>

</body>

</html>

I think the problem is that I have 2 onload functions in the body tag *<body onload="showCookies(); startBanner();">* does anyone know how I can fix this? Also when I put the Javascript into external files they won't work! but when I included the show cookies file in the html it works does anyone know where I am going wrong?

Hi, I searched the web for a button that can be animated, as well as dynamic. but I couldn't find one, so I decided to try my hand at creating one.

My method is similar to a post made by Bram2: http://codingforums.com/showthread.php?t=153326, however, I have found my code to be unreliable and it doesn't apply only to the area where the table is, instead of spreading across the screen.

The reason for trying to create a button this way is because I'm lazy, I don't want to create a new button in a graphics editor, spending hours trying to make it uniform with the rest of the buttons on the page, every time I want a new button. Doing it this way will also enable to have buttons with mulitple lines of text.

I am fairly new to javascript, so I am wondering if anyone can give me a hand making it more reliable or pointing me to a script that has already been created.

I put the button Here instead of filling the post with code.

Please look at it before telling me it can be done with the <button> tag, because I tried before posting here.

thanks,
grayatrox

Edit:I have managed to get the code to do what I wanted it to do, and more efficently too. Old code is commented out in the orginal webpage.

This is a working example on how to impliment the buttons.

javascript:

Code:

/*
Notes: 
	- Each button MUST have a unique name.
	- You may need to create a secondary function that the button can activate like I did with the go(url) function below.
	- Email me (grayatrox) at 238atrox@gmail.com for bugs, or to suggest improvements.
	- Yes I know tables within tables is bad, if you read through my code carefully you will see where I am talking about.
*/
function loadButton() { //preload the buttons. 
	image1 = new Image();
	image1.src = "images/button_up_L.png"; //button up left
	image2 = new Image();
	image2.src = "images/button_up_C.png"; //button up centre
	image3 = new Image();
	image3.src = "images/button_up_R.png"; //button up right
	image4 = new Image();
	image4.src = "images/button_down_L.png"; //button down left
	image5 = new Image();
	image5.src = "images/button_down_C.png"; //button down centre
	image6 = new Image();
	image6.src = "images/button_down_R.png"; //button down right
}

		
function createButton(buttonName, buttonText, buttonAction, id) { // create the code for a button
	output= "<table border='0' cellpadding='0' cellspacing='0' id="+buttonName+">";
	output=output+"<tr name="+buttonName+" onclick=\""+buttonAction+"\" onmouseover=\"changeButton('down', '"+buttonName+"')\" onmouseout=\"changeButton('up', '"+buttonName+"')\">";
	output=output+"<td align='right'><img id='"+buttonName+"_leftImage' src='images/button_up_L.png'/></td>";
	output=output+"<td id='"+buttonName+"_middleImage' align='middle' background='images/button_up_C.png'/>"+buttonText+"</td>";
	output=output+"<td align='left'><img id='"+buttonName+"_rightImage' src='images/button_up_R.png'/></td>";
	output=output+"</tr>";
	output=output+"</table>";
	return output;
}
		
function writeButton(buttonName, buttonText, buttonAction) { // write button immediatly below where function has been called
	document.write(createButton(buttonName, buttonText, buttonAction));
}	

function writeButtonInId(buttonName, buttonText, buttonAction, id) { // write the button in an id
	document.getElementById(id).innerHTML=createButton(buttonName, buttonText, buttonAction);
}
	
function changeButton(action, name) { // button animation
	if (action== "up") {
		document.getElementById(name+'_leftImage').src="images/button_up_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_up_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_up_R.png";
	} else if (action== "down") {
		document.getElementById(name+'_leftImage').src="images/button_down_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_down_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_down_R.png";
	}
}

function go(url) { // written becuase there were too many ' and ". You can do this for any javascript function (I hope)
	document.location=url;
}

I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list.

All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too.

Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding!

The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out


http://www.sketchtravel.com/
http://www.foofighters.com/us/discography

thanks for your help

-rob

Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me.

I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.)

Is it true?

I realise tables are not best used for this purpose, but did this also happen in the good old tables days?

Hi there.

I'm relatively new to coding in javascript, so I'm hoping that some kind souls could help me out! I'm trying to make an animated image height changer (example: changing an image's height from 50px to 500px). I'm working on a new web site using HTML5 and want to add some Flash-like animation to my page using javascript and <canvas>.

The animation would only need to "play" one time once the web page has loaded. No looping is required and no user interaction (ie mouseovers, etc) is needed. Any help would be greatly appreciated. If anyone knows of similar examples online please send me a link. If you're interested in helping, please let me know if more information is needed.

Thanks.

I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to.

How would I remove the last active div function or get it to close again when toggling other animated divs..

Thanks so much if you can help

Here is the site: www.gjoob.terryarchonship.com

here is where the last active div java is

Code:

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
}

here is the entire javascript:

Code:

var animatedcollapse={
divholders: {}, //structu  {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu  {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu  {lastactivediv.id}
preloadimages: [],

show:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "show")
	}
	else
		this.showhide(divids, "show")
},

hide:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "hide")
	}
	else
		this.showhide(divids, "hide")
},

toggle:function(divid){ //public method
	if (typeof divid=="object")
		divid=divid[0]
	this.showhide(divid, "toggle")
},

addDiv:function(divid, attrstring){ //public function
	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
	}
	this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
	return this
},

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
},

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	var $togglerimage=this.divholders[divid].$togglerimage
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			if ($togglerimage){
				$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			if (animatedcollapse.ontoggle){
				try{
					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
				}
				catch(e){
					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
				}
			}
		})
		return false
	}
},

generatemap:function(){
	var map={}
	for (var i=0; i<arguments.length; i++){
		if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
			map[arguments[i][0]]=arguments[i][1]
		}
	}
	return map
},

init:function(){
	var ac=this
	jQuery(document).ready(function($){
		animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
		var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
			this.$divref=$('#'+this.id)
			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
			}
			else{
				var cssdisplay=this.getAttr('hide')? 'none' : null
			}
			if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
				cssdisplay='block' //set div to "block", overriding any other setting
			}
			else if (urlparamopenids[0]=="none"){
				cssdisplay='none' //set div to "none", overriding any other setting
			}
			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
				if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
					targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
				}
		
			}
		}) //end divholders.each
		jQuery.each(ac.divgroups, function(){ //loop through each group
			if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
				ac.divholders[this.lastactivedivid].$divref.show()
		})
		if (animatedcollapse.ontoggle){
			jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
				animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
			})
		}
 		//Parse page for links containing rel attribute
		var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
		$allcontrols.each(function(){ //loop though each control link
			this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
			if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
				animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
				$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
				ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
				ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			$(this).click(function(){ //assign click behavior to each control link
				var relattr=this.getAttribute('rel')
				var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
				if (divids.length>0){
					animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
					return false
				}
					
			}) //end control.click
		})// end control.each

		$(window).bind('unload', function(){
			ac.uninit()
		})
	}) //end doc.ready()
},

uninit:function(){
	var opendivids='', groupswithpersist=''
	jQuery.each(this.divholders, function(){
		if (this.$divref.css('display')!='none'){
			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
		}
		if (this.getAttr('group') && this.getAttr('persist'))
			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
	})
	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
	this.setCookie('acopendivids', opendivids)
	this.setCookie('acgroupswithpersist', groupswithpersist)
},

getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},

setCookie:function(name, value, days){
	if (typeof days!="undefined"){ //if set persistent cookie
		var expireDate = new Date()
		expireDate.setDate(expireDate.getDate()+days)
		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
	}
	else //else if this is a session only cookie
		document.cookie = name+"="+value+"; path=/"
},

urlparamselect:function(){
	window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
	return (RegExp.$1!="")? RegExp.$1.split(",") : []
},

preloadimage:function(){
	var preloadimages=this.preloadimages
	for (var i=0; i<arguments.length; i++){
		if (arguments[i] && arguments[i].length>0){
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=arguments[i]
		}
	}
}

}

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now