Attila Hajzer

# June 17, 2013 at 4:30 pm

//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’); }
});
});

pixelgrid

# 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

Senff

# 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.

Attila Hajzer

# 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?

pixelgrid

# June 17, 2013 at 4:57 pm

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

Attila Hajzer

# 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

Attila Hajzer

# June 17, 2013 at 5:09 pm

under.

Attila Hajzer

# 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

Attila Hajzer

# 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

pixelgrid

# 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

Alen

# June 17, 2013 at 5:24 pm