Solved

How to style radio buttons to have no buttons, but to be highlighted

Posted on 2010-09-23
11
287 Views
Last Modified: 2012-05-10
Greetings.

I am trying to develop an app using JQUERY, where I need the functionality of a drop down, but the look of a unordered list.  An unordered list has no value attrib, but I need it to look like one.

JQUERY has an "Onclick" function, which I can grab the click and do something, but I have no values associated with the list.  Help?
0
Comment
Question by:Evan Cutler
  • 5
  • 4
  • 2
11 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 450 total points
ID: 33744375
if you have a list
<ul>
   <li>option1</li>
   <li>option2</li>
   <li>option3</li>
</ul>

you need to convert it to

<ul class="dropdown">
   <li>option1<span style="display:none">1</span></li>
   <li>option2<span style="display:none">2</span></li>
   <li>option3<span style="display:none">3</span></li>
</ul>


now you can assign the onclick event on the list like this

$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).find("span").html());
});

0
 
LVL 9

Author Comment

by:Evan Cutler
ID: 33744592
BRILLIANT!!!

GENIUS...Pure Genius...
Awesome....It's always the little stuff that gets you.

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33744668
Thanks for the kind words. Glad to help :)
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 2

Assisted Solution

by:WilliamStam
WilliamStam earned 50 total points
ID: 33745230
you better off with

<ul>
   <li rel="1">option1</li>
   <li rel="2">option2</li>
   <li rel="3">option3</li>
</ul>

.attr("rel")


$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).attr("rel"));
});

soz gurvinder372 :( i shamelessly copy pasted from yours..

reason its better... you can control exactly what goes there.. and also there might be a few issues using the span approtch.. also for performance wise its better refrencing a tag instead of finding a span inside..

you could also give sudo attributaries to the li's like a value 1... but thats not valid HTML (works in all the browsers tho)

rel is a valid attr. your code will pass validation :)
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33745289
this should work fine... will alow you to create a style of

#dropdown .selected {background-color:#f00; } or something... that you have a visual representation of which 1 is selected

.click is the same as .bind("click" i just prefer using the .click way... reads better
$("#dropdown li").click(function(){
	$("#dropdown .selected").removeClass("selected");
	var $this = $(this);
	$this.addClass("selected");

		alert("value is: " + $this.attr("rel"));
});


<ul id="dropdown">
   <li rel="1">option1</li>
   <li rel="2">option2</li>
   <li rel="3">option3</li>
</ul>

Open in new window

0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33745338
http://www.jsfiddle.net/wmpDw/

that should show a themed version of it...

css im using with above is attatched
#dropdown {
    margin:0px;
    padding:0px;
}
#dropdown li {
    display:block;
    padding:3px;
    cursor:pointer;
}
#dropdown li.selected {
    background-color:#6FF;    
}
#dropdown li:hover {
    background-color:#FFC;
}

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33746098
i would rather use the id attribute than rel, since i am not sure if rel is a valid attribute for li
http://www.w3.org/TR/html401/struct/lists.html

i would make it

<ul>
   <li id="ul_li_1">option1</li>
   <li id="ul_li_2">option2</li>
   <li id="ul_li_3">option3</li>
</ul>

$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).attr("id").substring(6));
});

0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33746205
interesting enough...

li value="" is valid..

http://validator.w3.org/check

hehe time to start using value instead of rel on my li's now :D

thanks for pointing it out gurvinder372
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33746237
doctype html 4 or xhtml Transitional! value is fine... but the strict ones fail again... depends on your doc type
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33746254
actually as per the previous link i had shared, 'value' is deprecated
0
 
LVL 9

Author Closing Comment

by:Evan Cutler
ID: 33757306
Thank you guys for the responses...there is some incredible knowledge here.  I love this site.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question