SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best way to add tab image indicator with jquery ui tabs

    I'm using jquery ui and been reskinnning the tabs to emulate yahoo look.

    My demo page is here: http://www.nvcc.edu/home/ssuh/galleria/

    What's the best way to get the selected tab to show a triangle that breaks out of the box? I was going to just insert an image and use CSS to determine whether the state is active or not. I have the triangle image in the html with a negative margin. My ways seems to be clunky since I would have to insert the triangle for each tab in the html.

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    DEMO: http://jsfiddle.net/OMGCarlos/4ZJ5T/
    (hover over element to see triangle)

    You could actually do this with pure CSS and NO images!

    First, you'll need to add a div inside each tab content area, something like: <div class="tab-triangle"></div>
    Styling it like so:
    HTML Code:
    .tab-triangle {
        display: none;
        position: relative;
        width: 0;
        height: 0;
        margin: auto;
        top: -15px;
    
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid green;
    }​
    Then you simply need to add a CSS style for when the tab is selected, in the demo I used hover to keep it simple:

    HTML Code:
    .tab:hover > .tab-triangle{
        display: block;
        margin-bottom: -15px;
    }
    That first snippet creates a triangle using what I call the "CSS Triangle Hack". You basically create a block element with zero width/height, and set the border size and colors. By setting the side-borders of the box to transparent (yet giving it width) you'll actually end up creating a triangle!

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    DEMO: http://jsfiddle.net/OMGCarlos/4ZJ5T/
    (hover over element to see triangle)

    You could actually do this with pure CSS and NO images!

    First, you'll need to add a div inside each tab content area, something like: <div class="tab-triangle"></div>
    Styling it like so:
    HTML Code:
    .tab-triangle {
        display: none;
        position: relative;
        width: 0;
        height: 0;
        margin: auto;
        top: -15px;
    
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid green;
    }​
    Then you simply need to add a CSS style for when the tab is selected, in the demo I used hover to keep it simple:

    HTML Code:
    .tab:hover > .tab-triangle{
        display: block;
        margin-bottom: -15px;
    }
    That first snippet creates a triangle using what I call the "CSS Triangle Hack". You basically create a block element with zero width/height, and set the border size and colors. By setting the side-borders of the box to transparent (yet giving it width) you'll actually end up creating a triangle!

    that is pretty amazing! i was able to hack it with a background image but i'll look into using your solution!


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
  •