Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    1
    Thanked 0 Times in 0 Posts

    html tabs problem

    hi ,


    My owner wants me to design the follwing tabs




    http://img23.imageshack.us/img23/1737/samplev.png


    I have treid by making e,g the whole home tab as one link with bas bar as well and similarly the all other tabs using photoshop
    then by using zindex i overlapped them


    But problem the images are not clickable as whole box is clickable and user does not know where he is clicking.

    Is there way to get these tabs working

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Is there way to get these tabs working
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have made the tabs and using jquery i finally got them working for sometime. But i have one probelm.


    I am dynamically changing the z-index so that image comes on the top by setting the clicked tab z-index to 100 but problem when other link is pressed

    i don't know how to reset the z-index of previous clciked tab to original state.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    i don't know how to reset the z-index of previous clciked tab to original state.
    Sorry, we can't either (guess and solve your issue).
    Last edited by abduraooft; 04-04-2009 at 01:40 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    1
    Thanked 0 Times in 0 Posts
    e,g

    Code:
    <img src="" id="tab1">
    <img src="" id="tab2">
    <img src="" id="tab3">
    I have absolutely positioned them so that they overlap each other for few pixels

    #tab1{

    z-index=6

    }

    #tab2{

    z-index=5

    }


    #tab3{

    z-index=4

    }

    Tab1 initially has highest z-index , so comes on the top of all as default.

    If i click on other tab , then by jquery i change its z-index to 100 and it comes on the top of other tab (means the corner portions comes on top to see the full tab)

    Now problem is when i click on any other tab , i don't know which z-index to give so that it has more z-index than any other tab , because previous tab which was clicked will have z-index of 100.

    I want some way that , the tab which was clicked get back to z-index = 5 so that
    system goes to the default state with only one tab active

    I hope you got some idea by now

  • #6
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    Perhaps this will be better addressed in the JavaScript subforum?

    Anyway, off the top of my head, you'll have to get the id and z-index of the clicked item and temporarily save the values into JavaScript; so that when another item is clicked, the old z-index will be reapplied to the said item with the said id.
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #7
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    One way is to call the style inside the img tag and using javascript change the style to the needed zindex. I think the image having zindex as the highest value will be got highlighted.

    You can use the onlick event of the js and create a function which reset the zindex of the desired image by changing the style. But I hope for this the style has to be inline instead of using a css file.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I hope you got some idea by now
    Nothing useful to provide(if possible) some helpful information to you.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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