SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Automatic slideshow?

    On my site, I have 1 image flipped 4 times, using links...
    http://fixmysite.us/OTO/loc.shtml
    Only when the mouse moves over each link does the right image show, and the color of the link (its background) changes.
    I'm trying to figure out how I can automatically make it so that the images switch as soon as the page is loaded so that the links color also changes.
    There must be a way to do this with javascript but I can figure how.
    Can I get some help?
    Thanks...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    To try and phrase this in a more programmable way, are you wanting one of them to be selected by default when the page loads?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    No sorry (Its hard to explain) but what I'm looking for is once the page loads, each of the 4 images (the ones with the red boxes) showing the location of the unit is put into an automatic slideshow starts, with about a 2 second delay between 4 slides. It would be a plus if I can also get that link background (to change to grey) each of the 4 times, can this be done so that the image flip still works after the slideshow?
    I want this because I dont know if the user would know to put his mouse over each link in order to do the image flip.
    thanks Paul
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You could loop through each of the links in the 'modernbricksmenu' section, and trigger the onmouseover event.

    The background color of the nav section is set by CSS, so you would need to simulate that with an added class name, perhaps called 'current' on the currently active link.

    How could this be achieved? You could use a setInterval event that checks for a link with the class name 'current', which then removes it and sets it on the next link before triggering the onmouseover function of that link.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Lemme explain this better...

    What im looking for is as soon as the page opens a slideshow starts over that super large image. The first image will just be of nothing but the buildings (as it is now), the second, third, fourth, and fifth image would be the locations of each of the four units (red boxes). This slideshow would be simple image "flips" with about a 2 second interval between each image. Also if possible, id like to have those black boxes (hover over them turns them to grey) so that what image is being shown corresponds to its highlighted link. It would also be nice if the manual image flip would work once the slideshow has ended.
    Thanks
    "Oh, and Jenkins--apparently your mother died this morning."

  6. #6
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    jeez..
    your fast...
    "Oh, and Jenkins--apparently your mother died this morning."

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    jeez..
    your fast...
    My answer came in 3 minutes earlier than your question.

    The only conclusion can be: I'm a time traveller.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    <script type="text/javascript">
    <!--
    //variable that will increment through the images
    var step=0
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.global.src=eval("myimage"+step+".src")
    if (step<5)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
    </script>

    I can see how that would flip the images, but how would I also change the CSS and add the class="current"
    to the active link?

    "Oh, and Jenkins--apparently your mother died this morning."

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    I can see how that would flip the images, but how would I also change the CSS and add the class="current"
    to the active link?
    You're going to need an easy way to add/remove/check if an element has a class name on it. There's a well-used set of functions at http://snipplr.com/view/3561/addclas...lass-hasclass/ for doing that.

    Code javascript:
    function hasClass(ele,cls) {
    	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
     
    function addClass(ele,cls) {
    	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
    }
     
    function removeClass(ele,cls) {
    	if (hasClass(ele,cls)) {
        	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    		ele.className=ele.className.replace(reg,' ');
    	}
    }

    You may also find it effective to create a toggleClass function

    Code javascript:
    function toggleClass(ele, cls) {
        if (hasClass(ele, cls)) {
            removeClass(ele, cls);
        } else {
            addClass(ele, cls);
        }
    }

    Next, you'll want to start off by searching the links to find the one that has a class name of "current". If none is found you can add the "current" class to the first link. If one is found though, you'll want to remove the "current" class from that link, and then add it to the next link (looping back to the start if need be).

    Once the class has been set, you know which link is the one to use, so you don't need to do any tricksy eval stuff. Instead you can just invoke the onmouseover function of that particular link.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    is this ok?

    <script type="text/javascript">
    <!--
    //variable that will increment through the images
    var step=0
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.global.src=eval("myimage"+step+".src")
    if (step<5)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()

    function hasClass(ele,cls) {
    return ele.current.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

    function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.current += " "+cls;
    }

    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }
    }
    function toggleClass(ele, cls) {
    if (hasClass(ele, cls)) {
    removeClass(ele, cls);
    } else {
    addClass(ele, cls);
    }
    }
    //how do I test what link has the class name = "current"?
    //im thinking of adding this code
    //if (currentPage.parent().hasClass('current'))
    // toggleClass(ele, "current");
    //define the rule for the class
    //below document.images.global.src=eval("myimage"+step+".src")


    //-->
    </script>
    "Oh, and Jenkins--apparently your mother died this morning."

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let's go from what I was saying before, and put it in to actual code.

    Quote Originally Posted by pmw57 View Post
    You could use a setInterval event that checks for a link with the class name 'current', which then removes it and sets it on the next link before triggering the onmouseover function of that link.
    Broken down that is:

    1. Use a setInterval event
    2. Loop through the links
    3. Find link with class name of "current" (if not found default to first)
    4. remove the "current" class from that link
    5. add the "current class to the next link (or if at end, back at the start)
    6. trigger the onmouseover event of that link

    Here are the pieces of code that achieve the above


    1. Use a setInterval event

    The menu is the focus of our slider, so we can assign to that menu a variable that relates to the timed event. We can use that saved variable as a reference should we later on want to stop the event.

    Code javascript:
    var menu = document.getElementById('modernbricksmenu');
    menu.slider = setInterval(function (el) {
        return function () {
            slideit.call(el);
        }
    }(menu), 2500);

    Notice that instead of passing a string to the interval function, that something else is being done.

    It could have been as simple as setInterval(slideit, 2500) but then we would need to another getElementById inside the function to get the menu. Instead of that, when that function is invoked I want it to be called in the context of the menu itself. We can do that by returning to the interval a function that knows about the menu (as the el variable) so that we can then invoke the slideit function in the context of that menu.

    2. Loop through the links

    Code javascript:
    function slideit() {
        var links = this.getElementsByTagName('a'),
            link,
            i;
        for (i = 0; i < links.length; i += 1) {
     
        }
    }

    3. Find link with class name of "current" (if not found default to first)

    Code javascript:
    var current = 0;
    for (i = 0; i < links.length; i += 1) {
        link = links[i];
        if (hasClass(link, 'current')) }
            current = i;
        }
    }

    4. remove the "current" class from that link

    Code javascript:
    removeClass(links[current], 'current');

    5. add the "current class to the next link (or if at end, back at the start)

    Code javascript:
    current = (current + 1) % links.length;
    addClass(links[current], 'current');

    Using (current + 1) works for all links except for the last one.

    Using the modulus operator gives us the remainder after dividing by the number of links, which in the case of the last link, returns the current link back to 0.

    6. trigger the onmouseover event of that link

    Code javascript:
    links[current].onmouseover();

    That's all you need so far as the scripting is concerned.

    Having the current menu link show that it's active, is where you update the existing hover effect.

    Code css:
    #modernbricksmenu a:hover {
    background-color: gray; /*Menu hover bgcolor*/
    }

    It's not possible to trigger a hover effect from javascript, so you need to instead use a separate class, which we are using as "current".
    Here it is with the "current" class added as another selector

    Code css:
    #modernbricksmenu a:hover,
    #modernbricksmenu a.current {
    background-color: gray; /*Menu hover bgcolor*/
    }

    The script that we've just gone through, where we keep everything as simple and understandable as practical, looks like this:

    Code javascript:
    function slideit() {
        var links = this.getElementsByTagName('a'),
            link,
            i,
            current = 0;
        for (i = 0; i < links.length; i += 1) {
            link = links[i];
            if (hasClass(link, 'current')) {
                current = i;
            }
        }
        if (hasClass(links[current], 'current')) {
            removeClass(links[current], 'current');
        }
     
        current = (current + 1) % links.length;
        addClass(links[current], 'current');
        links[current].onmouseover();
    }
     
    var menu = document.getElementById('modernbricksmenu');
    menu.slider = setInterval(function (el) {
        return function () {
            slideit.call(el);
        }
    }(menu), 2500);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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