javascript - Focus is running before the click/change of a radio button. Is it possible to run the click/change before the focus? -


below see code working on , included jsfiddle.

issue:

  1. the focus running before click/change margin moving before radio button can selected.

please explain code can learn this. if not have solution hints or direction helpful. in advance!

http://jsfiddle.net/nlgqhqwc/6/

html

<div class="panel">     <input type="text"/> </div>  <div class="panel">     <input type="text"/> </div>  <div class="panel">     <select>         <option>option</option>     </select> </div>  <div class="panel">     <input type="radio"/> </div>  <div class="panel">     <input type="checkbox"/> </div> 

css

.panel{     padding:15px;     background:grey;     margin-bottom:15px; }  .panel-primary{     margin:0 15px 0 15px;     background:blue;     margin-bottom:15px; } 

jquery

$(document).ready(function () {      $('.panel').click(function () {         event.stoppropagation();         $('.panel').removeclass('panel-primary');         $(this).addclass('panel-primary');     });      $('input, select').bind('focus blur', function (event) {         event.stoppropagation();         $('.panel').removeclass('panel-primary');         $(this).closest(".panel").addclass('panel-primary');     });      $('input[type=radio]').change(function () {         event.stoppropagation();         $('.panel').removeclass('panel-primary mrgn-lft-lg');         $(this).closest(".panel").addclass('panel-primary');     });  }); 

you can fire event when user goes on .panel. have replace click:

$('.panel').click(function () { 

with click or hover mouse. that's way:

$('.panel').on('click mouseover',function () { 

and here example fiddle: http://jsfiddle.net/nlgqhqwc/10/

another way

when not focused, make padding wider. way .panel's content not move (and user can click easily) , margin still there:

.panel{     padding:15px 30px; }  .panel-primary {     margin:0 15px 0 15px;     padding: 15px; } 

link: http://jsfiddle.net/nlgqhqwc/11/


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -