Solved

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

Posted on 2010-09-23
11
288 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How our DevOps Teams Maximize Uptime

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

 
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to dynamically set the form action using jQuery.
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…

735 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