SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Sep 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link to reflect radio button selection

    Hi there,

    I have a quick question about a little piece of code that I'm trying to figure out.

    I am trying to get a css-styled button to stay on its 'roll-over' state once it has been selected by its corresponding radio button (connected via the label tag). So far, I have no idea what I'm doing.

    Here's what I have so far:
    http://www.kinkarso.com/testing/index.html

    This is what it's doing:
    http://is.gd/d6W4w

    This is what I'd like it to do:
    http://is.gd/d6W3m


    Any experts out there that can lend a hand ?

    Thanks!
    Donny

  2. #2
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are ok using javascript you could force it to use the hover style once selected.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change your css to something like the following:

    Code:
    a.button:hover,
    a.button.selected {
    	color:#333333;
    	background:url(yes.png) no-repeat 0px -176px;
    }
    Then in your script just add the 'selected' css class to the corresponding anchor tag:

    (using jquery)
    Code:
    $(document).ready(function() {
        $("input[type='radio']").click(function() {
            $(this).parents("label").find(".button:first").each(function() {
                    $(this).toggleClass("selected");
             });
        });
    });
    Good luck

  4. #4
    Non-Member
    Join Date
    Sep 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that's very helpful. Was finally able to get it to function correctly.

    Donny


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
  •