Expanded Radio Buttons - Using other objects as them.

Jumpy09 · November 8, 2010

It took me a while to figure this one out, and it still isn't exactly what I want it to do.

//CSS
#radioDiv {width: 402px; margin: 0 auto;}
#radioDiv input {display: none;}
#radioDiv label:hover {border: 2px solid green;}
#radioDiv label.isSelected {border: 2px solid green;}
.radio {display: inline-block; margin: 5px;}
.crazy {border: 2px solid #252525; width: 50px; height: 50px; background: url('Image.png') center no-repeat; background-position: 0 0; display: inline-block;}

//Javascript
<script type="text/javascript">
    $(document).ready(function() {
        $('#radioDiv:radio').focus(updateSelectedStyle);
        $('#radioDiv :radio').blur(updateSelectedStyle);
        $('#radioDiv :radio').change(updateSelectedStyle);
    })

    function updateSelectedStyle() {
        $('#radioDiv :radio').removeClass('isSelected').next().removeClass('isSelected');
        $('#radioDiv :radio:checked').addClass('isSelected').next().addClass('isSelected');
    }

</script>

//HTML
<form action="" method="post">
<div id="radioDiv ">
<div class="radio">
<input type="radio" name="group1" value="99" id="test" />
<label for="test" class="crazy" name="radios"></label><br />
Crazy
</div>
</div>
</form>

I'm relatively new with Javascript so this is giving me a bit of a headache.

What I really want to do is display the image, and the title.. and have it in a container div. Then you could hover over that container div, and click it to select the radio option.

This one does that via the label, but I can't really expand the label around the text.

I'm going to attempt to draw this out in special chars.

Unselected! It would have a light border, nothing colored, and would have around 24 of these in a container.

|**********|

| |

|__________|

| Crazy |

|__________|

Hover! Border Turns Green and the bottom where the Select Text would be displays, the background turns green!

|**********|

| |

|__________|

| Crazy |

|||||Select|||||

***********

Selected! Stays as it would when Hovering, but the html would turn to Selected!

|**********|

| |

|__________|

| Crazy |

||||Selected|||

***********

Hope that explains what I am attempting to do. I know how to get the text to switch over, but until I get the Hover/Focus working right... it would be rather pointless for me to switch the text from nothing, to Select, to Selected.

Can anyone assist?

Adam · November 8, 2010

Try running this and see if it's what you're after..

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
.hovered {
    background-color: #FFF58F !important;
}

.selected {
    background-color: #ADFF6F;
}
</style>

</head>
<body>

<form method="post" action="">
    <div class="checkbox">
        <input type="checkbox" name="foo" id="foo" /> <label for="foo">Foo</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" name="bar" id="bar" /> <label for="bar">Bar</label>
    </div>
</form>

<script type="text/javascript">
$('.checkbox').hover(function() {
    $(this).addClass('hovered');
}, function() {
    $(this).removeClass('hovered');
}).click(function() {
    var input = $(this).children('input:checkbox:first-child');
    if (input.attr('checked')) {
        input.attr('checked', false);
        $(this).removeClass('selected');
    } else {
        input.attr('checked', true);
        $(this).addClass('selected');
    }
});
</script>

</body>
</html>

Jumpy09 · November 8, 2010

That is basically almost like what I have, except I have the radio buttons.

I only want one option selected so I chose radio buttons, instead of check boxes.

If I give the label the class for the image, the border works fine. If I try to put anything else inside the label, it doesn't work as great.

I'll mess around with what you gave me and see if I can do anything else with it, but I still have no idea how this other website did theirs.

Adam · November 8, 2010

Oh yeah, my mistake. Try this then:

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
.hovered {
    background-color: #FFF58F !important;
}

.selected {
    background-color: #ADFF6F;
}
</style>

</head>
<body>

<form method="post" action="">
    <div class="radio">
        <input type="radio" name="foobar" id="foo" value="foo" /> <label for="foo">Foo</label>
    </div>
    <div class="radio">
        <input type="radio" name="foobar" id="bar" value="bar" /> <label for="bar">Bar</label>
    </div>
</form>

<script type="text/javascript">
$('.radio').hover(function() {
    $(this).addClass('hovered');
}, function() {
    $(this).removeClass('hovered');
}).click(function() {
    $(this).addClass('selected').children('input:radio:first-child').attr('checked', true);
    $(this).siblings('div.radio').removeClass('selected').children('input:radio:first-child').attr('checked', false);
});
</script>

</body>
</html>

Jumpy09 · November 8, 2010

<html>
<head>



<style type="text/css">
.hovered {
    border: 2px solid green;
 background-color: green;
}

.selected {
    border: 2px solid green;
 background-color: green;
}

.radio {
width: 75px;
height: 75px;
background-color: black;
margin: 2px;
}

.innerRadio {
background-color: black;
width: 73px;
height: 63px;
margin: 0 auto;
}
</style>


</head>
<body>

<form method="post" action="">
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="foo" value="foo" /> <label for="foo">Foo</label>
		</div>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="bar" value="bar" /> <label for="bar">Bar</label>
		</div>
	</div>
</form>
<script type="text/javascript">
$('.radio').hover(function() {
    $(this).addClass('hovered');
}, function() {
    $(this).removeClass('hovered');
}).click(function() {
    $(this).addClass('selected').children('input:radio:first-child').attr('checked', true);
    $(this).siblings('div.radio').removeClass('selected').children('input:radio:first-child').attr('checked', false);
});
</script>

</body>
</html>

I've gotten thus far, of course it's not being nice.

What I want is the .radio class to turn green for it's background. I think I have messed something up adding in the innerRadio.

Jumpy09 · November 9, 2010

<style type="text/css">
.radio {
width: 52px;
height: 62px;
background-color: black;
border: 1px solid #151515;
margin: 1px;
}

.hovered {
    border: 1px solid grey;
 background-color: grey;
}

.selected {
    border: 1px solid green;
 background-color: green;
}

.deselect {
    border: 1px solid red;
 background-color: red;
}

.radio input {display: none;}

.innerRadio {
background-color: black;
width: 50px;
height: 50px;
margin: 0 auto;
}
</style>


</head>
<body>

<form method="post" action="">
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="foo" value="foo" /> <label for="foo" class="crazy"></label>
		</div>
		<span></span>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="bar" value="bar" /> <label for="bar" class="ignored"></label>
		</div>
		<span></span>
	</div>
</form>
<script type="text/javascript">
$('.radio').hover(
function() {
    if(!$(this).hasClass('selected')) {
	$(this).addClass('hovered').find('span').html("Select");
} else {
	$(this).removeClass('hovered').find('span').html("");
	$(this).addClass('deselect').find('span').html("Deselect");
}
}, function() {
if(!$(this).hasClass('selected')) {
	$(this).removeClass('hovered').find('span').html("");
} else {
	$(this).removeClass('hovered').find('span').html("");
	$(this).removeClass('deselect').find('span').html("Selected");
}
}).click(
function() {
	if($(this).parent().hasClass('selected')) {
		$(this).removeClass('selected').find('span').html("").find('input').attr('checked', false);
	} else {
		$(this).addClass('selected').find('span').html("Selected").find('input').attr('checked', true);
		$(this).siblings('div.radio').removeClass('selected').find('span').html("").find('input').attr('checked', false);
	}
});
</script>

</body>
</html>

Getting even closer, but I can't get the selected to be removed from the div on second click.

It's slightly aggravating lol, but I'm learning.

Jumpy09 · November 9, 2010

<style type="text/css">
.radio {
width: 52px;
height: 62px;
background-color: black;
border: 1px solid #151515;
margin: 1px;
}

.hovered {
    border: 1px solid grey;
 background-color: grey;
}

.selected {
    border: 1px solid green;
 background-color: green;
}

.deselect {
    border: 1px solid red;
 background-color: red;
}

.radio input {display: none;}

.innerRadio {
background-color: black;
width: 50px;
height: 50px;
margin: 0 auto;
}
</style>


</head>
<body>

<form method="post" action="">
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="1" value="1" /> <label for="1" class="crazy"></label>
		</div>
		<span></span>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="2" value="2" /> <label for="2" class="ignored"></label>
		</div>
		<span></span>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="3" value="3" /> <label for="3" class="bored"></label>
		</div>
		<span></span>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="4" value="4" /> <label for="4" class="talking"></label>
		</div>
		<span></span>
	</div>
	<div class="radio">
		<div class="innerRadio">
			<input type="radio" name="foobar" id="5" value="5" /> <label for="5" class="nerd"></label>
		</div>
		<span></span>
	</div>
</form>
<script type="text/javascript">
$('.radio').hover(
function() {
    if(!$(this).hasClass('selected')) {
	$(this).addClass('hovered').find('span').html("Select");
} else {
	$(this).removeClass('hovered').find('span').html("");
	$(this).addClass('deselect').find('span').html("Deselect");
}
}, function() {
if(!$(this).hasClass('selected')) {
	$(this).removeClass('hovered').find('span').html("");
} else {
	$(this).removeClass('hovered').find('span').html("");
	$(this).removeClass('deselect').find('span').html("Selected");
}
}).click(
function() {
 if(!$(this).hasClass('selected')) {
	$(this).addClass('selected').find('span').html("Selected").find('input').attr('checked', true);
	$(this).siblings('div.radio').removeClass('selected').find('span').html("").find('input').attr('checked', false);
} else {
	$(this).removeClass('selected').find('span').html("").find('input').attr('checked', false);
	$(this).removeClass('deselect').find('span').html("");
}
});
</script>

</body>
</html>

Well I finally got what I wanted, but it isn't allowing the clicking of the Label to select it. I was wanting to allow users to "Deselect" an Option, but if I use .parent() then it doesn't allow the deselection... but allows the clicking of the label.

It's confusing me, anyone see where I went wrong?

Jumpy09 · November 9, 2010

I finally decided to use onclick, onmouseover, and onmouseout. I used a Switch ... with states. Works relatively well.

Thanks for the Help MrAdam!

Adam · November 9, 2010

The last code you posted seems to work for me - even deselecting. As for clicking the label, there's nothing in the labels to click?

I wouldn't give up and attach the events using (obtrusive) HTML attributes though, you're nearly there!

Jumpy09 · November 10, 2010

I know that the obtrusive HTML probably isn't the "best" route to go, but I was having too many issues with the last code I supplied. Well on my site anyway.

What I currently have uses a Switch and does exactly what I need it to do. I will continue working on that code to get it working completely, but I was running low on time and has to make a vital decision to get it working sooner.. or put more time into it.

I really do thank you for your help, I know know a little bit of JS! ^.^

Sign In

Expanded Radio Buttons - Using other objects as them.

Recommended Posts

Jumpy09

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Jumpy09

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information