0

Below you will see the code I am working on and an included JSFiddle.

Issue:

  1. The focus is running before the click/change so the margin is moving before the radio button can be selected.

Please explain the code so I can learn from this. If you do not have a solution any hints or direction would also be helpful.

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');
    });
    
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user262430
  • 229
  • 3
  • 17
  • Why don't you make the effect on `hover` instead of `focus`? You would not need jquery, because pure css will be enough. Just replace `.panel-primary` in your css with `.panel:hover`. – Al.G. Dec 05 '14 at 17:57
  • Needs to work using the TAB key. – user262430 Dec 05 '14 at 17:59
  • OK, I think this is what you want: http://jsfiddle.net/nLgqhqwc/10/ See the fiddle and tell us if it works as wanted. – Al.G. Dec 05 '14 at 18:11

2 Answers2

0

You can just fire the event when the user goes over the .panel. To do this you have to replace the click:

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

with click OR hover with the mouse. That's the way:

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

And here is the example fiddle: http://jsfiddle.net/nLgqhqwc/10/

Another way

When not focused, make the padding wider. This way the .panel's content will not move (and the user can click it easily) and the margin will be still there:

.panel{
    padding:15px 30px;
}

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

Link: http://jsfiddle.net/nLgqhqwc/11/

Al.G.
  • 4,327
  • 6
  • 31
  • 56
  • Thanks but I am looking for a solution that works with only click not mouseover and click. Really appreciate the help though :) – user262430 Dec 05 '14 at 18:22
  • Great idea but I am afraid it needs to be done with a margin and the radio/checkbox inputs will need to move. – user262430 Dec 05 '14 at 18:29
  • It works yes but I am looking for a javascript solution and not a change to the way the page is presented to the user. More of a behind the scenes solution. – user262430 Dec 05 '14 at 18:39
0

You must listen the click event on capturing phase. You can do:

document.querySelector('.panel').addEventListener('click', doSomething, true);

Take a look here to understand the difference of capturing and bubbling phases.

The main problem is you won't use jQuery.

Not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included. jQuery equivalent of JavaScript's addEventListener method

Therefore, you shouldn't concern about event order. You may resolve simple.

Community
  • 1
  • 1
Carlos André Oliveira
  • 340
  • 1
  • 4