Custom selection of divs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Custom selection of divs

Post 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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Custom selection of divs

Post 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}
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Custom selection of divs

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Re: Custom selection of divs

Post 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.
Post Reply