SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ill bet you cant figure this out!

    in this page

    www.phi
    lipd
    usel.com/work.html

    the navigational arrows have a hover effect.....how can that effect only appear when there is another image to be seen...ie if you are on the 1st img in the gallery the left navigational arrow would not have that hover effect. and the same if youre on the last.....

    please look at the page in question

    thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    What you'll need here is a check after showing each image, which checks whether you're at the start or end, and triggers the appropriate show/hide for each arrow.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i know that is what i need to do.....my issue is with doing it. im not how to implement that behavior in javascript

    can you give me an example?

    thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Okay, here's an example.

    Say for example that you have prev and next links. They could be arrows, they could be words, they could be buttons.

    Code html4strict:
    <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

    You could use a class called hidden to hide them

    Code css:
    .hidden {
        display: none;
    }

    And then apply that hidden class, using scripting, to each link as is appropriate for each of them. If you're on image 0, use the hidden class on the prev link, and if you're at 1 less than images.length, use the hidden class on the next link.

    The following code assumes that the collection of images is an array called images, and that currentImage is an index to the one that's currently being shown.

    Code javascript:
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    prev.className = (currentImage === 0) ? 'hidden' : '';
    next.className = (currentImage === images.length - 1) ? 'hidden' : '';

    That's the bare bones of how it's commonly done.

    Are you able to make use of that information and apply it in some way to your own scripting?
    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
  •