How can I stop the browser viewport moving to the top of the page when the user clicks on a jQueryUI radio button?

I have got some radio buttons setup like this:

<div id="typeRadios">
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>

That I turn into jQueryUI buttons like this:

$("#typeRadios").buttonset();

This is the resulting HTML:

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled开发者_高级运维="false"><span class="ui-button-text">note2</span></label>

The buttons work, but whenever I click one, the browser view-port gets returned to the top of the page, the same way it happens when you click on a <a href="#">link</a> link.

I am using jQuery 1.4.2 and jQueryUI 1.8.7. How can I prevent this behaviour? Thanks for reading.

EDIT: The <a href="#">link</a> part was missing.

I encountered this problem recently and I have actually found a solution which might help you depending on your CSS.

Basically if you are hiding your radio buttons off the page using something like:

input[type="radio"] {
  left : -10000px;
  position: absolute;
  top : -10000px;
}

Or something similar it is the top : -10000px ; that is the issue.

That is, when the radio button is inevitably focused by the label click, the page is trying to bring it into view by scrolling the browser viewport to the radio button. Since the minimum scrollTop value for the browser is 0 it scrolls to the top.

If you just remove the rule top : -10000px ; it will fix the issue.

Hope this helps.

p.s. the reason why preventDefault and stopPropagation won't work in this instance as mentioned as a solution in other comments is that they do not stop the default behaviour of the browser to focusing of the form field when the label is clicked.

I've tried to recreate the issue, but failed. I've checked this in FireFox 3.6.13, Google chrome 8.0 and Internet Explorer 8.

Can you give some more details to recreate the issue or may be test html page?

Do you have a click event for the radio buttons. If you have one on your event handler you can stop the propagation of the event and try once.

function clickhandler(ev){
    ev.stopPropagation();
    ev.preventDefault();
    //Your code here
}

But whatever code is given here does not suggest anything that can cause this behavior. If you have a test page please update the post with that.

Instead of using href="#", use href="#add" or any other relevant text. This will solve the jumpting to the top of the page.

The problem is that when you click on label of radio button, the button automatically takes focus. Do not use position properties like top:-100000000px and left:-100000000px.

I think you just need to set Visibility property of input text to Hidden.

input[type="radio"]{visibility:hidden;}

looks like you need to handle a click, and put there return false; at the end of handler. Or may be better to prevent bubbling the event by using:

...
ev.preventDefault();
ev.stopPropagation();

where ev - is an Event object

The following click handler would prevent this

function(e){
  e.preventDefault();
  ... your code
}

I had the same problem

FF-only quick fix (referring to your code) would be

$("div#typeRadios input[type='radio']").hide();

solution for both FF and IE

The culprit was a CSS rule in main stylesheet:

input[type="radio"]{position:relative;top:3px;}

which conflicted with jQueryUI .ui-helper-hidden-accessible class

I had to make this rule more specific limiting it only to the "real" forms which are used for data submission

form dl.zend_form input[type="radio"]{position:relative;top:3px;}

I have encountered cases where the use of the empty anchor link href="#" would cause such viewport jumps (especially if used inside an iframe in chrome). Try replacing it with href="javascript:void(0)"

This is not the behaviour of the jquery UI as can be seen at http://www.jsfiddle.net/gaby/3Wz3A/

It is, most likely, some other code you add to those buttons.

What happens when you click on those radio buttons ? You hide and load content or something else ?

If you do attach some other handler to those radio buttons, please show that code as it could very well be the culprit..

Similar to Christos's solution, to override the stylesheet, use

top: auto;

Found it in a Wordpress bug report: http://core.trac.wordpress.org/ticket/23684 The idea is that setting both "left" and "top" to big negatives should be unnecessary.

Note to the commenters discussing the click handler or the href: jquery-ui is setting handlers for its purposes, so I would rather not alter them and then have to test accessibilty, keyboard nav, etc. The style override solution seems harmless.

[edit 2014/02/03] Wordpress fixed this in version 3.8.1 (or earlier). This fix is kinda cool, negative positioning begone! It's replaced with clip: rect(0 0 0 0); border: 0;, which is apparently the jquery-ui way. See https://core.trac.wordpress.org/changeset/26602

This thing is still absolutely positioned, so leaving in my or Christo's fix should be OK.

The solution for me has been to set "position: relative" on

input[type='radio'].ui-helper-hidden-accessible

Edit: Not working on Firefox... the radio buttons become visible