JavaScript; calling a function on pageload

Question

All I want to do is to call this function while page is loading or after loading automaticly, I mean without hover or click or etc. If I manage that I am going to put it in a for loop with a delay function in order to call bg1, bg2 bg3 and bg4 respectively

I have read so many questions all seem similar but somehow they don't work for me. Could you please help me about it?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function slide() 
{
 $('#accordion > li.bg1')(
 function () {
 var $this = $(this);
 $this.stop().animate({'width':'350px'},500);
 $('.heading',$this).stop(true,true).fadeOut();
 $('.bgDescription',$this).stop(true,true).slideDown(500);
 $('.description',$this).stop(true,true).fadeIn();
 }
 ),
 function () {
 var $this = $(this);
 $this.stop().animate({'width':'115px'},1000);
 $('.heading',$this).stop(true,true).fadeIn();
 $('.description',$this).stop(true,true).fadeOut(500);
 $('.bgDescription',$this).stop(true,true).slideUp(700);
 }
});
</script>
<div id="content">
<ul class="accordion" id="accordion">
 <li class="bg1">
 <div class="heading">Heading</div>
 <div class="bgDescription"></div>
 <div class="description">
 <h2>Heading</h2>
 <p>Some descriptive text</p>
 <a href="#">more ?</a>
 </div>
 </li>
 <li class="bg2">
 <div class="heading">Heading</div>
 <div class="bgDescription"></div>
 <div class="description">
 <h2>Heading</h2>
 <p>Some descriptive text</p>
 <a href="#">more ?</a>
 </div>
 </li>
 <li class="bg3">
 <div class="heading">Heading</div>
 <div class="bgDescription"></div>
 <div class="description">
 <h2>Heading</h2>
 <p>Some descriptive text</p>
 <a href="#">more ?</a>
 </div>
 </li>
 <li class="bg4">
 <div class="heading">Heading</div>
 <div class="bgDescription"></div>
 <div class="description">
 <h2>Heading</h2>
 <p>Some descriptive text</p>
 <a href="#">more ?</a>
 </div>
 </li>
</ul>
</div>

Answer 1

First, try replacing the line $(function slide() with the usual wrapper $(document).ready(function() { and make sure that all your parentheses and braces are balanced correctly.

Second, your selector needs a method call, which you don't have. It's unclear what you want to happen -- do some of the HTML elements need to be hidden, then show up slowly? Or vice versa? Do you want it to toggle back and forth continuously? We can help you, but only if you're more specific about what problem you're trying to solve.

UPDATE

If you want to animate the list items in sequence, you need a few things. First, a setTimeout that calls your function from within itself after a delay. Second, use $('#accordion > li').eq(i) to pick out the ith list element, with i being incremented each time your function is called. And finally (and aesthetically), replace those fadeIn/fadeOuts with slideDown/slideUps so that the whole thing doesn't jerk and shift as it animates.

http://jsfiddle.net/mblase75/EJXRD/

function slide(i) {
 var $this = $('#accordion > li').eq(i);
// $this.stop().animate({'width': '350px'}, 500); // not sure what this is meant to do
 $('.heading', $this).stop(true, true).slideUp(500);
 $('.bgDescription', $this).stop(true, true).slideDown(500);
 $('.description', $this).stop(true, true).slideDown(500);
 var $that = $this.siblings();
// $that.stop().animate({'width': '115px'}, 500);
 $('.heading', $that).stop(true, true).slideDown(500);
 $('.description', $that).stop(true, true).slideUp(500);
 $('.bgDescription', $that).stop(true, true).slideUp(500);
 var items = $('#accordion > li').length;
 setTimeout(slide, 2000, (i+1) % items); // modulo
}
$(document).ready(function() { // start the loop at the top
 slide(0);
});

• mctuna: I am actually trying to build an accordion menu which is originally here on this link gethifi.com/blog/… I couldn't understand what do you mean by selector needs a method call Do you mean something like that? <div id="content" (onload???)>
• zequinha-bsb: user1046055, what mblase75 means, in case you haven't understood, is that you cannot have $('#accordion > li.bg1')( ... what you want to perform here? $('#accordion > li.bg1').slideDown( ???
• mctuna: It was orginally $('#accordion > li.bg1').hover but I wanna add another event which is doing the same thing automatically without hovering or clicking. I don't know maybe this is nonsense or impossible. All I want to do make that function automatically expand the image and then via a for loop I am going to expand each image respectivly.
• Blazemonger: So, you want each list item to animate in sequence? Reveal the description for the first one, then hide it and reveal the next description, and on down the line?
• mctuna: So briefly I wanna add to that accordion menu a timeloop. There will be 4 images and 3 of them width=65px and image1 is width=350px and what I want to do make a loop that makes image1's width 65px and image2's width 350px, then image2 65px and image3 350, it goes so on

Answer 2

$(function slide() is not valid syntax, you were probably looking for

$(function() {

as your first line

• Mike Christensen: I think it's technically valid syntax, it just ignores the name.

Answer 3

You can follow this order:

<html>
<head>
 <script src="toLoadBefore.js"></script>
</head>
<body>
 <div class="yourHTMLHere">
 ...
 </div>
 <script>
 //the DOM is loaded you can start your JS code here
 </script>
</body>
</html>