Page 1 of 1
Custom selection of divs
Posted: Tue Mar 18, 2008 11:53 pm
by GeXus
I'm trying to implement a selection, that works the same as checkboxes, but uses divs... for example
Code: Select all
<div id="options">
<div id="option_one">This is option one</div>
<div id="option_two">This is option one</div>
<div id="option_three">This is option one</div>
</div>
The way it would work is there would be mouseover properties for each option, and when selected the style would change, and somehow it would save the selected div id's to an array....
Sorry if this isn't very clear... but if anyone as any ideas how to do this or if there is a jquery plug in that will do this.. I'd really appreciate it! Thanks.
Re: Custom selection of divs
Posted: Wed Mar 19, 2008 12:15 am
by JAB Creations
Code: Select all
#option_one:hover, #option_one:focus {background-color: #000; color: #fff}#option_two:hover, #option_two:focus {background-color: #000; color: #fff}#option_three:hover, #option_three:focus {background-color: #000; color: #fff}
Re: Custom selection of divs
Posted: Wed Mar 19, 2008 10:27 am
by pickle
If you're using jQuery, this'll take care of the checked/unchecked
Code: Select all
var checkedItems = new Array();
$("#options div").toggle(
function(){
$(this).attr('className','checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = clickedID;
},
function(){
$(this).removeClass('checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = false;
});
});
If you're only using modern browsers, you can set the hover states in CSS like how ~JAB showed you. IE6 doesn't allow :hover pseudo-selectors for anything other than 'a' tags however, so if IE6 is in your target audience, you'll have to use JS for that too.
Re: Custom selection of divs
Posted: Wed Mar 19, 2008 12:28 pm
by GeXus
pickle wrote:If you're using jQuery, this'll take care of the checked/unchecked
Code: Select all
var checkedItems = new Array();
$("#options div").toggle(
function(){
$(this).attr('className','checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = clickedID;
},
function(){
$(this).removeClass('checked');
var clickedID = $(this).attr('id');
checkedItems[clickedID] = false;
});
});
If you're only using modern browsers, you can set the hover states in CSS like how ~JAB showed you. IE6 doesn't allow :hover pseudo-selectors for anything other than 'a' tags however, so if IE6 is in your target audience, you'll have to use JS for that too.
Thanks! How do I serialize this though? When I try to alert the checkedItems array, it returns nothing.