Solved

cycle forward and backward through javascript array

Posted on 2007-04-02
14
302 Views
Last Modified: 2008-01-09
greetings,

i need help cycling through a javascript array.  i want to be able to go forwards and backwards onclick.

heres what i'm currently using:


---

             // loads global functions
                  loadGlobalFunctions_retail=function(){
                   // rotates contents every x seconds
                   rotateContent_retail=function(){
                    i_retail++;
                    if(i_retail==message_retail.length){i_retail=0}
                    container_retail.innerHTML=message_retail[i_retail];
                    setTimeout('rotateContent_retail()', 5*1000);
                   }
                   // defines messages array
                   var message_retail=new Array();
                         message_retail[0]='dfngdfngdfngdfngsngsdngsngsdn';
                         message_retail[1]='sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
                         message_retail[2]='gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsdfvogqwfouvgasd fgqowu gfowfgvsjdvg iwgc vlxkchgv lsd gv';
                         message_retail[3]='<img src="images/thumb.gif" width="85" height="81" alt="Thumb" class="thumb"><h2>Artist Name 4</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>';
                         message_retail[4]='<img src="images/thumb.gif" width="85" height="81" alt="Thumb" class="thumb"><h2>Artist Name 5</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationo laboris nisi ut aliquip ex ea commodo.</p>';
                         message_retail[5]='<img src="images/thumb.gif" width="85" height="81" alt="Thumb" class="thumb"><h2>Artist Name 6</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>';
                         message_retail[6]='<img src="images/thumb.gif" width="85" height="81" alt="Thumb" class="thumb"><h2>Artist Name 7</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labora. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ip ex ea commodo.</p>';
                   var i_retail=0;
                   var container_retail=document.getElementById('retail_div');
                   // execute rotateContent function
                   rotateContent_retail();
                  }
                  // execute code once page is loaded
                window.onload=loadGlobalFunctions_retail;


---


i also need it to still autorotate.  is there anyway i can replace this block:

message_retail[4]='<img src="images/thumb.gif" width="85" height="81" alt="Thumb" class="thumb"><h2>Artist Name 5</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationo laboris nisi ut aliquip ex ea commodo.</p>';

w/ an asp variable?  i plan to cycle through db records and list these out.

thanks,
0
Comment
Question by:dirklance
  • 7
  • 7
14 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 330 total points
ID: 18841457
You can use the code below to do this.  It will at least get you started but if you need help using it in your page then I may need some more details.  The current script (below) will stop the rotation once you move forward or back and doesn't start the rotation again.  Also I did modify the contents of most of the array items for testing but you should be able to correct that easily.

<!--
// defines messages array
var message_retail=new Array();
message_retail[0]='0 dfngdfngdfngdfngsngsdngsngsdn';
message_retail[1]='1 sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
message_retail[2]='2 gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsdfvogqwfouvgasd fgqowu gfowfgvsjdvg iwgc vlxkchgv lsd gv';
message_retail[3]='3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.';
message_retail[4]='4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationo laboris nisi ut aliquip ex ea commodo.';
message_retail[5]='5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.';
message_retail[6]='6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labora. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ip ex ea commodo.';

var i_retail=0;

// rotates contents every x seconds
rotateContent_retail=function(){
      var container_retail=document.getElementById('container1');
      i_retail++;
      if(i_retail==message_retail.length){i_retail=0}
      container_retail.innerHTML=message_retail[i_retail];
      this.timeout = setTimeout('rotateContent_retail()', 5*1000);
}

// loads global functions
loadGlobalFunctions_retail=function(){
      // execute rotateContent function
      rotateContent_retail();
}
// execute code once page is loaded
window.onload=loadGlobalFunctions_retail;

function nextItem() {
      var container_retail=document.getElementById('container1');
      clearTimeout(rotateContent_retail());
      i_retail++;
      if(i_retail==message_retail.length){i_retail=0}
      container_retail.innerHTML=message_retail[i_retail];
}

function prevItem() {
      var container_retail=document.getElementById('container1');
      clearTimeout(rotateContent_retail());
      i_retail--;
      if(i_retail < 0){i_retail=message_retail.length - 1}
      container_retail.innerHTML=message_retail[i_retail];
}
//-->

Let me know how that script works or if you have a question.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18841468
I also modified the id the script got.  I used container1 and you should change it back to retail_div.

Let me know if you need help making these changes back to your page's stuff.

bol
0
 

Author Comment

by:dirklance
ID: 18847844
forgive me but how do i call the functions?

i tried:

<div id="retail_div"></div><br />
<a href="javascript:void(0);" onclick="nextItem();">next item</a>

i know i'm missing something there.  and how do i set the initial HTML to [0] in the array?

thanks again,
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18847923
The code should already be set to start with the [0] item in that array.  There was a line to do it on the onload event for the window.

// execute code once page is loaded
window.onload=loadGlobalFunctions_retail;

The onclick event in the anchor tag looks good but add a return false to the end.

<a href="javascript:void(0);" onclick="nextItem(); return false;">next item</a>

I usually use # for the href (e.g. href="#") but your value should be fine.  If there is still a problem look to see if there is a javascript error but the return false will probably fix it.

Let me know if you have a question or need more info.

bol
0
 

Author Comment

by:dirklance
ID: 18851740
i still can't seem to get it here.  i'm getting a 'object expected' error on the line that loads the global.

___


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

<script type="javascript">
 // defines messages array
    var message_retail=new Array();
    message_retail[0]='0 dfngdfngdfngdfngsngsdngsngsdn';
    message_retail[1]='1 sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
    message_retail[2]='2 gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsdfvogqwfouvgasd fgqowu gfowfgvsjdvg iwgc vlxkchgv lsd gv';
    message_retail[3]='3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.';
    message_retail[4]='4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationo laboris nisi ut aliquip ex ea commodo.';
    message_retail[5]='5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.';
    message_retail[6]='6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labora. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ip ex ea commodo.';

    var i_retail=0;

    // rotates contents every x seconds
    rotateContent_retail=function(){
          var container_retail=document.getElementById('retail_div');
          i_retail++;
          if(i_retail==message_retail.length){i_retail=0}
          container_retail.innerHTML=message_retail[i_retail];
          this.timeout = setTimeout('rotateContent_retail()', 5*1000);
    }

    // loads global functions
    loadGlobalFunctions_retail=function(){
          // execute rotateContent function
          rotateContent_retail();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions_retail;

    function nextItem() {
          var container_retail=document.getElementById('retail_div');
          clearTimeout(rotateContent_retail());
          i_retail++;
          if(i_retail==message_retail.length){i_retail=0}
          container_retail.innerHTML=message_retail[i_retail];
    }

    function prevItem() {
          var container_retail=document.getElementById('retail_div');
          clearTimeout(rotateContent_retail());
          i_retail--;
          if(i_retail < 0){i_retail=message_retail.length - 1}
          container_retail.innerHTML=message_retail[i_retail];
}
</script>


    </head>
    <body>


            <div id="retail_div" name="retail_div"></div><br />
            <a href="#" onclick="nextItem(); return false;">next item</a>
            
    </body>
    </html>

___
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18851943
The problem is your script tag.  The type value is wrong.  It should be text/javascript instead of javascript (see below).

<script type="text/javascript">

Let me know how that works.

bol
0
 

Author Comment

by:dirklance
ID: 18852174
hi.

http://kccrossroads.org/new/content_rotator.html

3 issues:

1. i can't get the prevItem() to work?
2. the nextItem() calls every other element in the array
3. the auto rotate will freak out and cycle through the entire array every once and a while?

thanks,

* points raised.  thank u

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18852348
Thanks for recognizing the extra work by increasing the points.  That was very considerate.

OK.  Hopefully all of the problems are related to this one issue.  The settimeout and cleartimeout lines need to be changed.  I will show you the new line but let me know if you have a question putting them in your code.  In the function that sets the timeout use ...

          t = setTimeout('rotateContent_retail()', 5*1000);

Then in the functions (2 of them) to cleartimeout use ...

          clearTimeout(t);

In my tests all of the issues disappeared after that correction.  Let me know how it works or if you have a question.

bol
0
 

Author Comment

by:dirklance
ID: 18859625
that did fix all issues.

my last problem is that i have 3 divs that i need to cycle content through.  i modified the script like:

__

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

<script type="text/javascript">
 // defines messages array
    var message_retail=new Array();
    message_retail[0]='0 dfngdfngdfngdfngsngsdngsngsdn';
    message_retail[1]='1 sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
    message_retail[2]='2 gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsd';
    message_retail[3]='3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in';
    message_retail[4]='4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun';
    message_retail[5]='5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididu';
    message_retail[6]='6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo';

    var i_retail=0;

    // rotates contents every x seconds
    rotateContent_retail=function(){
          var container_retail=document.getElementById('retail_div');
          i_retail++;
          if(i_retail==message_retail.length){i_retail=0}
          container_retail.innerHTML=message_retail[i_retail];
          t_retail = setTimeout('rotateContent_retail()', 30*1000);
    }

    // loads global functions
    loadGlobalFunctions_retail=function(){
          // execute rotateContent function
          rotateContent_retail();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions_retail;

    function retail_nextItem() {
          var container_retail=document.getElementById('retail_div');
          clearTimeout(t_retail);
          i_retail++;
          if(i_retail==message_retail.length){i_retail=0}
          container_retail.innerHTML=message_retail[i_retail];
    }

    function retail_prevItem() {
          var container_retail=document.getElementById('retail_div');
          clearTimeout(t_retail);
          i_retail--;
          if(i_retail < 0){i_retail=message_retail.length - 1}
          container_retail.innerHTML=message_retail[i_retail];
}


// start artist div

 var message_artist=new Array();
    message_artist[0]='0 dfngdfngdfngdfngsngsdngsngsdn';
    message_artist[1]='1 sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
    message_artist[2]='2 gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsd';
    message_artist[3]='3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in';
    message_artist[4]='4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun';
    message_artist[5]='5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididu';
    message_artist[6]='6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo';

    var i_artist=0;

    // rotates contents every x seconds
    rotateContent_artist=function(){
          var container_artist=document.getElementById('artist_div');
          i_artist++;
          if(i_artist==message_artist.length){i_artist=0}
          container_artist.innerHTML=message_artist[i_artist];
          t_artist = setTimeout('rotateContent_artist()', 30*1000);
    }

    // loads global functions
    loadGlobalFunctions_artist=function(){
          // execute rotateContent function
          rotateContent_artist();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions_artist;

    function artist_nextItem() {
          var container_artist=document.getElementById('artist_div');
          clearTimeout(t_artist);
          i_artist++;
          if(i_artist==message_artist.length){i_artist=0}
          container_artist.innerHTML=message_artist[i_artist];
    }

    function artist_prevItem() {
          var container_artist=document.getElementById('artist_div');
          clearTimeout(t_artist);
          i_artist--;
          if(i_artist < 0){i_artist=message_artist.length - 1}
          container_artist.innerHTML=message_artist[i_artist];
}

// end artist div




// start gallery

 var message_gallery=new Array();
    message_gallery[0]='0 dfngdfngdfngdfngsngsdngsngsdn';
    message_gallery[1]='1 sdn gs dngsd njsdng fg nhfdngfgdmnsfngd sgn sng sn gsdnggdrg';
    message_gallery[2]='2 gs lasfl gas;flg as;lg alsjdf ahfg woiehg shdcg8y3trfg8ygsv2ge u yrfg ueyfvg uo5gsd';
    message_gallery[3]='3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in';
    message_gallery[4]='4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun';
    message_gallery[5]='5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididu';
    message_gallery[6]='6 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo';

    var i_gallery=0;

    // rotates contents every x seconds
    rotateContent_gallery=function(){
          var container_gallery=document.getElementById('gallery_div');
          i_gallery++;
          if(i_gallery==message_gallery.length){i_gallery=0}
          container_gallery.innerHTML=message_gallery[i_gallery];
          t_gallery = setTimeout('rotateContent_gallery()', 30*1000);
    }

    // loads global functions
    loadGlobalFunctions_gallery=function(){
          // execute rotateContent function
          rotateContent_gallery();
    }
    // execute code once page is loaded
    window.onload=loadGlobalFunctions_gallery;

    function gallery_nextItem() {
          var container_gallery=document.getElementById('gallery_div');
          clearTimeout(t_gallery);
          i_gallery++;
          if(i_gallery==message_gallery.length){i_gallery=0}
          container_gallery.innerHTML=message_gallery[i_gallery];
    }

    function gallery_prevItem() {
          var container_gallery=document.getElementById('gallery_div');
          clearTimeout(t_gallery);
          i_gallery--;
          if(i_gallery < 0){i_gallery=message_gallery.length - 1}
          container_gallery.innerHTML=message_gallery[i_gallery];
}

// end gallery div





</script>


    </head>
    <body>


            <div id="retail_div" name="retail_div"></div><br />
            <a href="javascript:void(0);" onclick="retail_prevItem(); return false;">prev item</a> | <a href="javascript:void(0);" onclick="retail_nextItem(); return false;">next item</a><br /><br /><br />

            <div id="gallery_div" name="gallery_div"></div><br />
            <a href="javascript:void(0);" onclick="gallery_prevItem(); return false;">prev item</a> | <a href="javascript:void(0);" onclick="gallery_nextItem(); return false;">next item</a><br /><br /><br />

            <div id="artist_div" name="artist_div"></div><br />
            <a href="javascript:void(0);" onclick="artist_prevItem(); return false;">prev item</a> | <a href="javascript:void(0);" onclick="artist_nextItem(); return false;">next item</a><br /><br /><br />

    </body>
    </html>
___

but the timeout seems to be giving me troubles.  i change 't' to 't_DIVNAME' .  the retail div still works but i looks like the global onload isn't firing for the two new ones.  

points raised.

thanks,
0
 

Author Comment

by:dirklance
ID: 18859636
0
 

Author Comment

by:dirklance
ID: 18859643
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18859824
One problem with this new change is the window.onload.  Each use will overwrite the previous one.  I suggest you first remove each line and then change the body tag to ...

    <body onload="loadGlobalFunctions_retail; loadGlobalFunctions_artist; loadGlobalFunctions_gallery;">

That will most likely fix the problem but is definitely at least one cause.  Let me know if you have a question or how that works.  If you still have a problem then let me know if there was a javascript error and what it is.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18865786
I'm glad that helped.  Thanks for the additional points, the grade and the fun question.

bol
0
 

Author Comment

by:dirklance
ID: 18865827
thanks again for all ur help.

hopefully this'll help someone out.
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i get the sole odd and th sole even 2 33
Asp in script 6 35
Making an "H1" a specific color only on a specific page. 3 26
Javascript 2 17
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question