SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching a element background when selected

    I'm stumped trying to figure out a way to have a different background on my <li> elements when an <a> inside of them is selected.

    I'm also using a Jquery tabbing feature called idTabs to navigate to various anchors when clicked to give the appearance of tabs. It's really all a one page website.

    The difficulty is in trying to get a different "selected" sort of background on the tab link <li> that has just been clicked.

    Tab markup is

    `<ul class="idTabs">
    <li class="tabBorder tabBackers"><a href="#enabling">Enabling<br>Next-Generation<br>Medicine</a></li>
    <li class="tabBorder tabBackers"><a href="#what">What is<br>Ayrris&trade;</a></li>
    <li class="tabBorder tabBackers"><a href="#benefits">Benefits<br>of Ayrris&trade;</a></li>
    <li class="tabBackers"><a href="#why">Why Ayrris&trade;<br>for Big Data?</a></li>
    </ul>

    <div id="enabling">Some content</div>
    <div id="what">Some content</div>
    <div id="benefits">Some content</div>
    <div id="why">Some content</div>`

    So the tabBacker CSS has a colored background and I'd like that to switch to an image when that link is selected. But the anchor link is inside the <li> that needs the switched background. It like to call an image called button-backer_on.gif as a background when selected.

    Here's current CSS:

    `.idTabs li { float:left; width:234px; height:94px; background-color:#2f2f2f; font-size:18px; text-align:center; }
    .idTabs li a { color:#ffffff; }
    .tabBorder { border-right:1px solid #3c3c3c; }
    .tabBackers { background-color:#353535; }
    .tabBackers a.selected { background:#0082c8 url(../img/button-backer_on.gif) top left no-repeat; }`

    And the dev link:

    http://www.savagepixels.com/ayrris/index.html

    I also got to figure out to center that button text Vertically in the <li> ... weird problem ...

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot. I figured it out ... I just had to apply my background formatting to the anchor instead of the <li>.

    Does anybody know how to center that text vertically?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by scott1964 View Post
    Does anybody know how to center that text vertically?
    You could set the UL to display: table and the LIs to display: table-cell (remove the float) and vertical-align: middle and set the width and height on the LIs that was on the As. Then you'd have to remove display: block from the As and put the blue background on the LIs on hover and when selected.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My understanding was that all the action had to happen on the anchors. Can I use the <li> as a hotspot? I would love to know how to do that.

    <a href="someUrl.html"><li>Some text</li></a>

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There also must be a way to tell it to do a colspan="4" right? because right now the table is stacking vertically.

    I tried this too: display:table-row;

    Didn't work.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am slowly getting the picture. What I was missing in the past post was the vertical align middle part. That snapped everything horizontal nicely.

    My last issue is, I still don't see how to do a .selected on an <li>. I tried to display the <li> as an anchor or something, but it didn't work. I can't do this on a hover because it's just required for the "pages" that are deemed in the "on" state.

    New dev link:

    http://www.savagepixels.com/ayrris/indexTest.html

    thanks

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Nice work so far. What you can do is this in your CSS:

    Code:
    .idTabs li:hover, .idTabs li.selected {
      background: #0082c8;
    }
    So, that will make the menu item blue when you hover over it, and it will also be blue if you add a class of "selected" to the LI, which you would do when that menu link's content is visible. At the moment, the "selected" class is being placed on the <a> ... which is probably better, but using display: table and vertical-align center makes it hard (if not impossible) to get the <a> to fill the menu item space.

    So I'd look at editing the JS so the .selected class is placed on the LI instead.

    Edit:

    Personally, I use this script for tabs, which happens to add the "selected" class to the LI, so that may be an easier route to follow.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.savagepixels.com/ayrris/indexTest.html

    Ahhhhh ... getting close ... just no cigar yet ...

    I'm telling jquery to place the class on the <li> but it put it on the anchor.

    `switch($('.idTabs a'))
    {
    case $('.enablingLink'):
    $('.tabBackersEnabling').addClass("selected");
    $('.tabBackersWhat').removeClass("selected");
    $('.tabBackersBenefits').removeClass("selected");
    $('.tabBackersWhy').removeClass("selected");
    break;
    case $('.whatLink'):
    $('.tabBackersEnabling').removeClass("selected");
    $('.tabBackersWhat').addClass("selected");
    $('.tabBackersBenefits').removeClass("selected");
    $('.tabBackersWhy').removeClass("selected");
    break;
    case $('.benefitsLink'):
    $('.tabBackersEnabling').removeClass("selected");
    $('.tabBackersWhat').removeClass("selected");
    $('.tabBackersBenefits').addClass("selected");
    $('.tabBackersWhy').removeClass("selected");
    break;
    case $('.whyLink'):
    $('.tabBackersEnabling').removeClass("selected");
    $('.tabBackersWhat').removeClass("selected");
    $('.tabBackersBenefits').removeClass("selected");
    $('.tabBackersWhy').addClass("selected");
    break;
    }`

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm starting to think this aint possible. Nothing will switch the damn class of another element. It always thinks I want to deal with an anchor.

    Haven't I seen this butt simple move done a million times all over the damn internet? Shouldn't be this hard. They never even mentioned having the hover effect, but now that you do ... yeah let's do that too. That link you pasted in is cool. Not really a plugin though is it? More like a guy just trying to tell you how to do this from scratch which I don't have the time for right now unfortunately. Do i need to stat over? What gives?

    Even if i learn his way, it's not gonna switch the class of a different element.

    I think for my purposes today with limited time and all I'm just gonna go down and dirty

    http://elasticitydev.com/ayrris/

    Thanks for all the help Ralph!
    |sc

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by scott1964 View Post
    I think for my purposes today with limited time and all I'm just gonna go down and dirty

    http://elasticitydev.com/ayrris/
    Well, it seems to work as you want, so well done.

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ralph. I learned a lot on that journey.


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
  •