Please test my css/javascript "tabs"

Discussion in 'Programming' started by knopix, Dec 7, 2006.

  1. #1
    ..so I tried to add "tabs" to my front page but I ran into some problems

    problems:
    • In safari I had to click multiple times for a Tab to open
    • friends running IE 6 said clicking on the Tabs doesn't do anything
    Could you please test it and tell me if works for you?
    + include your Browser type and Version

    The site: http://www.blackmacbook.com
    + (the "tab area" is the white area to the right of the large laptop image)

    How it was done:
    • css layer containing the background image with a z-index: 0
    • tab button images with display: none; and a z-index: 1
    • empty css boxes with a javascript onClick function and a z-index: 2
    • when the invisible boxes are clicked, they make the appropriate tab display: block
    everything is positioned with position: absolute and the z-index is used to make one image overlap the other

    Before I start marketing the site I want to make sure it works for everyone
    so your help is appreciate.. thanks in advance :)
     
    knopix, Dec 7, 2006 IP
  2. Epica

    Epica Well-Known Member

    Messages:
    1,007
    Likes Received:
    95
    Best Answers:
    0
    Trophy Points:
    170
    #2
    Looks fantastic for me in IE 6 * Firefox 1.5 - tabs all worked perfectly

    Browser:
    IE 6.0.2900 - Works
    FireFox 1.5.0.8 - Works


    P.S. you might want to specify that the "Tab area" in review is the white area to the right of the large laptop image - and not the green area in the main top navigation bar (I was reviewing that area for a few seconds before I started to look around a bit - heh)

    P.S.S Sit's looking fantastic by the way
     
    Epica, Dec 7, 2006 IP
  3. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #3
    Works great for me in Firefox 1.5.0.7 under Ubuntu Linux.
     
    Austars, Dec 7, 2006 IP
  4. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Works great on Windows XP using Firefox 2.0
     
    rgchris, Dec 7, 2006 IP
  5. knopix

    knopix Peon

    Messages:
    122
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for the feedback guys.

    Can anyone with Safari give it a test run?
     
    knopix, Dec 8, 2006 IP
  6. Neo_The_One

    Neo_The_One Active Member

    Messages:
    555
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #6
    lol, is NU your site? ^^ hehe, look at the comments:


    I went 10 testimonials down? Hmm, go there and refresh it uses a random number with php or javascript to just pick a random number!

    WORST HOST EVER! LOL

    lol that was 4 refreshes!

    LOL YOUR TRYINg TO SCAM PEOPLE
     
    Neo_The_One, Dec 8, 2006 IP
  7. Epica

    Epica Well-Known Member

    Messages:
    1,007
    Likes Received:
    95
    Best Answers:
    0
    Trophy Points:
    170
    #7
    Neo...are you being dryly sarcastic, or do you seriously not realize its a spoof site...? Hmmmm
     
    Epica, Dec 8, 2006 IP
  8. Neo_The_One

    Neo_The_One Active Member

    Messages:
    555
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #8
    For real? Hmm didt se that, i really was thinking it was a real host! :(

    LOL! hehe..
     
    Neo_The_One, Dec 8, 2006 IP
  9. technologist

    technologist Peon

    Messages:
    93
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I wont touch that with a 10 feet pole.
     
    technologist, Dec 8, 2006 IP
  10. knopix

    knopix Peon

    Messages:
    122
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    haha, I guess it wasn't as obvious as I thought.. :)


    + Can anyone with Safari please test the site in the original post?
     
    knopix, Dec 9, 2006 IP
  11. adsexper

    adsexper Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    works great on windows XP IE 7.05 and Firefox 2.0. Cool design by the way.
     
    adsexper, Dec 9, 2006 IP
  12. danbradster

    danbradster Peon

    Messages:
    156
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I recommend having a rollover effect as at first glance, it just looks like an image, not a navigation system.

    Also, it doesn't really work on slower connections as you're using two separate images for the two states, I recommend using one image including both states but only display the correct state with CSS.

    If that didn't make sense, look at the following image that I use in the navigation of my website -
    http://www.tutorials-db.com/Images/Button_Left.jpg
    http://www.tutorials-db.com/
     
    danbradster, Dec 10, 2006 IP
  13. weknowtheworld

    weknowtheworld Guest

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I think eveything is fine...
     
    weknowtheworld, Dec 11, 2006 IP
  14. knopix

    knopix Peon

    Messages:
    122
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Is it the color similarity that makes it confusing?
    I would rather keep it "clickable" instead of using onMouseOver events.

    You might be right on this.
    I have only tested it on new computers, and only once on an old Mac.
    - Why is it happening though? There aren't any elaborate functions, just a simple show/hide switch.

    What you did is simpler - it's rollOver, not clicks - and it's button text on top of background, my text is part of the image

    Thanks for your feedback.
     
    knopix, Dec 12, 2006 IP