Results 1 to 3 of 3
  1. #1
    Join Date
    May 2013
    Posts
    14

    Unanswered: z-index of divs when using recordset paging

    I have a page with three divs (lets say tab1, tab2 and tab3) on top of each other (with tab1 on top and tab3 on the bottom), which look like page tabs. The tabs include a link which changes the z-index of the each div bringing one to the front with the following code:

    HTML Code:
        function changeZIndex(i,id) {
          document.getElementById(id).style.zIndex=i;
        }
    with links looking like this:

    HTML Code:
        <A HREF="#" onclick="changeZIndex(1,'tab1');changeZIndex(2,'tab2');changeZIndex(3,'tab3');">
    Each of these tabs contains 6 items of data pulled from a MySQL database, along with forward and back arrows (to go to the next or previous 6).

    My problem is that while the forward and back arrows DO work, they also reset the z-index to that of the page load so tab1 is on top, whereas, tab2 was the one I was viewing... is there any way of either keeping the z-index OR changing it when clicking the forward/back links - I HAVE tried using the above code but adding it to the links breaks the functionality of them

  2. #2
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    Instead of swapping the z-index you should show/hide them.
    This is especially good for allowing graceful degradation as it doesn't hide any content when a client can't perform your desired actions (e.g. JS disabled).

    Here's how I'd do it: tabs - jsFiddle

    P.S. the jQuery library is awesome
    George
    Home | Blog

  3. #3
    Join Date
    Jan 2007
    Location
    UK
    Posts
    11,434
    Provided Answers: 10
    Fiddle updated!

    Put the .click() binding event outside of the $(document).ready()... D'oh
    George
    Home | Blog

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
  •