Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: open

Message Too Old, No Replies

Multiple choice of <li> selectors

     
9:34 pm on Sep 17, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2011
posts: 14
votes: 0


Hello guys,


I came up with an idea yesterday but I don't have the code knowledge to follow it through. I'm not quite sure if it's even possible but I'm guessing it probably is, considering those amazing stuff people create!

Thing is, I want to create unorganized lists and use it as a part of my form. When a <li> is clicked, I want that <li> to be "selected" by adding a special class while the previous selected div fades back to default.

This is actually the radio button behaviour but I want to use it without buttons and TEXT only.

Such as;

What's your favourite colour?
Black - Green - Yellow - Red

What's your favourite drink?
Water - Beer - Cola - Lemonade


Do you think that's possible?

Thanks,
Efe
4:43 pm on Sept 18, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts: 3178
votes: 22


I think what you're trying to say is that you want to have the hover effect on label elements trigger when you give focus to their child radio or checkbox input elements. Even if it's not hopefully it'll get you started in the right direction. I use this on my site among many other things to enhance accessibility. Here is the script...

- John

function gui_radio_accessibility(id)
{
if (document.getElementById(id) && document.getElementsByTagName('*').length!=0)
{
var inputs = document.getElementById(id).getElementsByTagName('input');
if (inputs!=undefined)
{
for (var i=0; i < inputs.length; i++)
{
if (inputs[i].getAttribute('type')=='radio')
{
if (window.addEventListener)
{
inputs[i].addEventListener('focus', function() {this.parentNode.className='pollh';},false);
inputs[i].addEventListener('blur', function() {this.parentNode.className='';},false);
}
else
{
var thisid = inputs[i].id;
inputs[i].attachEvent('onfocus', function() {window.event.srcElement.parentNode.className='pollh';});
inputs[i].attachEvent('onblur', function() {window.event.srcElement.parentNode.className='';});
}
}
}
}
}
}

//usage
gui_radio_accessibility('side');
10:41 am on Sept 19, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2011
posts: 14
votes: 0


Thanks JAB, I'll take a look at it.
7:51 pm on Sept 22, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 14, 2011
posts: 14
votes: 0


In case if anyone needs, I've found the solution here and it seems to working fine.

[protofunc.com...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members