Solved

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

Posted on 2010-09-23
11
284 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now