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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.