Grow your CSS skills. Land your dream job.

everything after skills removed when selecting radio button js

  • # June 17, 2013 at 4:30 pm

    http://hajzer.info/#skills

    click one of the radio buttons and the contact form dissappears. but when you click all again the contact form re-appears.

    here’s the js

    // attack a click event on all radio buttons with name ‘category’
    $(“input[name=category]”).change(function() {
    var sel = $(this).val();
    $(‘.hide’).fadeIn(‘slow’).removeClass(‘hide’);
    if (sel !== ‘box’) { $(‘.box:not(.’ + sel + ‘)’).hide().addClass(‘hide’); }
    });
    });

    # June 17, 2013 at 4:48 pm

    your contact form is inside a div with a class of box the same class you use to target your skills boxes remove the class and the code works ok

    # June 17, 2013 at 4:51 pm

    Yup, that’s about right. It does exactly what you tell it to do. :)

    Just remove the “box” class from your contact form.

    # June 17, 2013 at 4:54 pm

    my goodness. thank you very much! any criticism on it though? :P thought comments or concerns? i feel that the colours don’t really go well with the theme. so i might change that to just one colour . and settle for that. or do you think the color adds just enough diversity?

    # June 17, 2013 at 4:57 pm

    i think flat colors might be a better suit for what you are after have alook here http://flatuicolors.com/

    # June 17, 2013 at 5:08 pm

    how do i make the whole box clickable?
    i’ve tried making the label but that didn’t help.

    here’s the css

    #category {height:35px; line-height:35px; margin: 0 40px;}
    #category form{}
    #category form li {float:left; width: 100px; margin:3px 5px; padding:3px 5px; border-radius:4px;}

    Categories:

    • All
    • Website
    • Application
    • Networking

    # June 17, 2013 at 5:09 pm

    under.

    # June 17, 2013 at 5:10 pm

    how do i make the whole box clickable?
    i’ve tried making the label but that didn’t help.

    here’s the css

    #category {height:35px; line-height:35px; margin: 0 40px;}
    #category form{}
    #category form li {float:left; width: 100px; margin:3px 5px; padding:3px 5px; border-radius:4px;}

    Categories:

    • All
    • Website
    • Application
    • Networking

    # June 17, 2013 at 5:14 pm

    and does the radio button reallly need to be there i remember reading a post on css tricks about converting the radio button to a button or span or something had to do with tabbed navigation for small content boxes

    # June 17, 2013 at 5:18 pm

    label whould be ideal , just make sure the ‘for’ attribute of the label is the same as the id attribute of the checkbox.

    You will need 4 different ids one for each category.

    an unordered list without radio buttons but an active class and javascript is another solution

    # June 17, 2013 at 5:24 pm
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".