Solved

Highlight changed Radiobutton in Chrome not working

Posted on 2014-04-02
8
146 Views
Last Modified: 2014-04-03
I have a simple highlight that just puts a halo around a changed Radio button, it can be seen at this jsFiddle

http://jsfiddle.net/V6DSn/3/

It works OK in IE but not in Chrome. Any ideas from the experts?

Andy
0
Comment
Question by:Andy Green
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
yes, that work only on IE.
you need to replace them check this : http://jsfiddle.net/V6DSn/4/

               $('input:radio').click(function () {
                   //remove all 
                   $('input:radio').parent().removeClass("highlight");
                   //add currect
                   $(this).parent().addClass("highlight");
               });

Open in new window

0
 
LVL 3

Author Comment

by:Andy Green
Comment Utility
Thanks leakim971 but its gone the other way now. Doesn't work in IE. Is there a cross browser solution

Andy
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
for IE add this CSS :

:checked { 
    background-color: red;
}

Open in new window

0
 
LVL 3

Author Comment

by:Andy Green
Comment Utility
I have done that:



http://jsfiddle.net/V6DSn/5/


Problem now is that in IE the radio stays red when I select another button. Works OK in Chrome.

Andy
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
replace click by change : http://jsfiddle.net/V6DSn/8/
0
 
LVL 3

Author Comment

by:Andy Green
Comment Utility
All text highlightedHmm. It works in JS fiddle, but in  my page this happens when I select any Radio button:

All the text is highlighted with the background colour, not just the radio.

See image.

More on this tomorrow. fed up with it now.
0
 
LVL 3

Author Comment

by:Andy Green
Comment Utility
If I can rewind - this is using actual markup from my app: http://jsfiddle.net/kXufK/2/

This works in IE but not in Chrome

Andy
0
 
LVL 3

Author Closing Comment

by:Andy Green
Comment Utility
My original query has been answered. So points for that. I'll open another question for my on going problem.

Thanks

Andy
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

772 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

10 Experts available now in Live!

Get 1:1 Help Now