queue function in scriptaculous

Hello Guys,
Can someone please let me know If I have to call the second function only after showing all the slide1 images


http://x/vanillasite/test4.htm

Basically, I want to put these two functions in the queue

createEffect('imageSlider1');
 createEffect('imageSlider2');

Your help is much appreciated..
thanks
sam
niidmoreAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
OK. Well, that detail would have helped earlies. See code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><base href="http://x/vanillasite/"/>
    <title>Untitled Page</title>
    <script type="text/javascript" src="admin/include/scriptaculous/prototype.js"></script>
     <script type="text/javascript" src="admin/include/scriptaculous/scriptaculous.js?load=effects"></script>
  <style>
  .divInOneLine {   
    display: inline;
    float: left;}
  </style>
</head>
<body>
 
<table><tr><td>
<div id="imageSlider1" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
<tr>
<td>
<p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p>
</td>
</tr>
<tr><td>
<div id="imageSlider2" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
</table>
 
 
 
<script language="javascript">
<!--
  
function createEffect(node) {
	var container = document.getElementById(node);
	var size = container.childNodes.length;
  
  for(var i = 0; i < size; i++)
  {
	container.childNodes[i].id = node+"_"+i;
    new Effect.Appear (container.childNodes[i].id,{ duration:0.2,queue: {position:'end', scope: 'imageAppear'}});
    new Effect.Move (container.childNodes[i].id,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
 
  } 
}
 
function init(){
  createEffect('imageSlider1');
  createEffect('imageSlider2'); 
 }
init();
-->
</script>
</body>
</html>

Open in new window

0
 
hieloCommented:
>>Basically, I want to put these two functions in the queue
For what purponse? What effect are you trying to achieve?
Currently those two functions are executed immediately upon load because the last thing you do on that file is to call init(), and in turn, init() calls:
 createEffect('imageSlider1');
  createEffect('imageSlider2');

0
 
niidmoreAuthor Commented:
hello hielo,
yes it is now in init function which calls the other two funtion at once,
i want the first layer should finish displaying images first and then i want to display second list of images..

to get something like this

please have a look
http://x/vanillasite/test3.htm

can you please let me know if i can put these two functions in the queue?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hieloCommented:
OK. Here you go. Make sure that the div ids are unique for the entire page, not just for the row. On your original HTML you had
<div id="image1"></div><div id="image2"></div>...<div id="image5"></div>
within imageSlider1, and then you had the same markup within imageSlider2. Duplicating IDs is not valid and your effect will not work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><base href="http://213.253.134.6/vanillasite/"/>
    <title>Untitled Page</title>
    <script type="text/javascript" src="admin/include/scriptaculous/prototype.js"></script>
     <script type="text/javascript" src="admin/include/scriptaculous/scriptaculous.js?load=effects"></script>
  <style>
  .divInOneLine {   
    display: inline;
    float: left;}
  </style>
</head>
<body>
 
<table><tr><td>
<div id="imageSlider1" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
<tr>
<td>
<p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p>
</td>
</tr>
<tr><td>
<div id="imageSlider2" style="padding:0px 0px 0px 60px;"><div id="image6" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image7"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image8" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image9" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image10" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
</table>
 
 
 
<script language="javascript">
<!--
  
function createEffect(node) {
	var container = document.getElementById(node);
	var size = container.childNodes.length;
  
  for(var i = 0; i < size; i++)
  {
    new Effect.Appear (container.childNodes[i].id,{ duration:0.2,queue: {position:'end', scope: 'imageAppear'}});
    new Effect.Move (container.childNodes[i].id,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
 
  } 
}
 
function init(){
  createEffect('imageSlider1');
  createEffect('imageSlider2'); 
 }
init();
-->
</script>
</body>
</html>

Open in new window

0
 
niidmoreAuthor Commented:
Hello Heilo,
Thanks for getting back to me on this, the problem is that I cannot adhere to your suggestion to keep the div ids unique through out !
just to make the point clear, i have got two xml files having 5 images each which are generated by the CMS system which will have the order I have in my test4 file.
It is working fine with duplicate <div id="image1></div> and  so on, however, it is all happening in one go, you may notice that in test3.htm i am having 1 to 15 unique image ids... but i cannot have this markup in my dynamic page.
That is where I am stuck now, please advice .
regards
sam
0
 
niidmoreAuthor Commented:
excellent thanks .... it worked exactly as desired !!

much appreciated !

0
 
niidmoreAuthor Commented:
hello hielo,
i will be very glad if you could also assist me in the following unresolved open question, please follow the link
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23118716.html
regards
sam
0
 
niidmoreAuthor Commented:
hello there,
if you are still here, please see that the script does not works in firefox.
may i please know we can fix this ?
regards
sam
0
All Courses

From novice to tech pro — start learning today.