www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] updating variable value...?

Hybrid View

  1. #1
    Join Date
    Oct 2010
    Posts
    6

    resolved [RESOLVED] updating variable value...?

    Okay so I have a slideshow that also has links to allow the user to pick which slide they want to go to. That works okay for the most part, but once the user has selected a slide the slideshow continues to run, which I want to happen, but it continues to the next slide from when the loop function ran initially instead of the next slide in the show from the current slide. I tried recalling the function from the link function, but that really didn't do anything. I realize...at least I think that I realize that the function needs to be rerun from the new value of the count variable, but everything that I've tried to make it do that has been a colossal fail.

    Again I'm a novice here and this has to be written in plain javascript, otherwise I'd have gotten this done via jquery in probably 3 lines of code.

    Here's what my code is looking like right now:

    <script type="text/javascript">
    <!--
    //preload images
    var image1=new Image()
    image1.src="assets/ww.jpg"
    var image3=new Image()
    image3.src="assets/discussion.gif"
    var image2=new Image()
    image2.src="assets/officeSpaceSmall.jpg"
    var image4=new Image()
    image4.src="assets/projects.jpg"

    //create image array
    var tt= new Array("assets/ww.jpg","assets/discussion.gif","assets/officeSpaceSmall.jpg","assets/projects.jpg");
    var imgsrc=0;
    var whichimg=0;

    function moveit(){
    document['pic'].src=tt[imgsrc];
    whichimg=imgsrc
    if (imgsrc<3)
    ++imgsrc
    else
    imgsrc=0
    //call function every 7 seconds
    setTimeout('moveit()',7000)
    }
    function changeit(imgname,imgsrc){
    document[imgname].src=eval('tt['+imgsrc+']');
    }
    function over(){
    switch (whichimg){
    case 0:
    window.location="http://mypath.westwood.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_3_1&url=%2Fwebapps%2Fblackboard%2Fexecute%2FcourseMain%3Fcourse_id%3D _8450_1";
    break;
    case 1:
    window.open("http://learn.westwood.edu/p61378189/","Tutorial");
    break;
    case 2:
    window.alert("this is the date and time of this thing");
    break;
    case 3:
    window.alert('do not procrastinate on projects and you might get good grades');
    break;
    default:
    window.location="http://mypath.westwood.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_3_1&url=%2Fwebapps%2Fblackboard%2Fexecute%2FcourseMain%3Fcourse_id%3D _8450_1";
    }
    }
    //-->
    </script>


    <div class="tips">
    <ul>
    <li>
    <a href="" id="l1" onclick="changeit('pic',0);return false;"><h6>tutoring</h6></a>
    </li>
    <li>
    <a href="" id="l2" onclick="changeit('pic',1);return false;"><h6>discussions</h6></a>
    </li>
    <li>
    <a href="" id="l3" onclick="changeit('pic',2);return false;"><h6>workshops</h6></a>
    </li>
    <li>
    <a href="" id="l4" onclick="changeit('pic',3);return false;"><h6>projects</h6></a>
    </li>
    </ul>

    <div>
    <a href="javascriptver()"><img src="assets/ww.jpg" name="pic" width="400" height="258" /></a>
    </div>

    <script type="text/javascript">moveit();</script>
    </div>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function moveit(){
    document['pic'].src=tt[imgsrc];
    whichimg=imgsrc
    if (imgsrc<3)
    ++imgsrc
    else
    imgsrc=0
    //call function every 7 seconds
    timerID=setTimeout(moveit, 7000)
    }
    function changeit(imgname,imgsrc){
    clearTimeout(timerID);
    document[imgname].src=tt[imgsrc];
    whichimg=imgsrc;
    moveit();
    }
    Again I'm a novice here and this has to be written in plain javascript, otherwise I'd have gotten this done via jquery in probably 3 lines of code.
    That would be 6883 lines of library code and 3 line from you!

  3. #3
    Join Date
    Oct 2010
    Posts
    6

    Thumbs up lol

    Thank you so much- you are awesome and funny.
    You are my yoda

  4. #4
    Join Date
    Oct 2010
    Posts
    6

    Thumbs up one quick update...

    To really get this to work flawlessly DO NOT, I repeat DO NOT use your image index variable directly for your loop, because when you do, it appears to reset, or alter the src that the index points to. So I changed the variable on my counter function and then POINTED that to the index for reference.

    so here's what my final code looks like

    <script type="text/javascript">
    <!--
    //create image array
    var tt= new Array("assets/tutoring.gif","assets/discussions.gif","assets/workshops.gif","assets/projects.gif");
    var imgsrc=0;
    var whichimg=0;
    var count=0;
    var tab=0;

    //preload images
    var preload = new Array();
    for(n=0; n<tt.length; n++)
    { preload[n]=new Image();
    preload[n].src=tt[n];
    }

    //function to auto scroll the slideshow
    function moveit(){

    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document['pic'].src=tt[count];
    whichimg=count;
    if (count<(tt.length-1))
    count++
    else
    count=0
    //call function every 7 seconds
    timerID=setTimeout('moveit()', 7000);
    }

    //function to move to a specific slide
    function changeit(imgname,imgsrc){
    clearTimeout(timerID);
    document[imgname].src=tt[imgsrc];
    count=imgsrc;
    moveit();
    }

    //function to control where the slides link
    function over(){
    switch (whichimg){
    case 0:
    window.location="this_place.html";
    break;
    case 1:
    window.open("this_place.html","Tutorial");
    break;
    case 2:
    window.alert("this is the date and time of this thing");
    break;
    case 3:
    window.alert('do not procrastinate on projects and you might get good grades');
    break;
    default:
    window.location="this_place.html";
    }
    }
    //-->
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles