0

I'm trying to trigger a function when I toggle a pane.

enter image description here

I cannot find a way to "listen" to on click method of these little buttons (red circles of the picture). This is what I tried for the west button:

$('.ui-layout-toggler.ui-layout-toggler-west.ui-layout-toggler-open.ui-layout-toggler-west-open').click(function(){
    alert('test');
});

But when I click it, my alert doesn't pop up (but the pane hides/shows). Using F12 I have this html:

<div id="" class="ui-layout-toggler ui-layout-toggler-west ui-layout-toggler-open ui-layout-toggler-west-open" title="Fechar" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; height: 48px; width: 6px; top: 174px; left: 0px;"></div>
lucasdc
  • 1,032
  • 2
  • 20
  • 42
  • you might need to use event delegation, due to the fact that when you create that event handler, those buttons might not have those classes yet.... – A.O. Feb 06 '14 at 19:05

1 Answers1

1

try:

$('body').on('mousedown', '.ui-layout-toggler', function(){
    console.log('test');
});

It seems there is another another event handler that is either interfering/taking precedence or even possibly using event.stopPropagation() that's causing the on.('click') not to work. one way around this is to capture the mousedown event, this should work for whatever you're trying to do after the user clicks the toggle button....

to catch the arrow + ctrl key use this code:

        var arrow = {
            left: 37,
            up: 38,
            right: 39,
            down: 40
           },

        ctrl = 17;

        $(document).on("keydown", function (event) {
            if (event.ctrlKey && event.which === arrow.left) {
                console.log("You pressed left, and control.");
            }
        });

i got this code from this SO post: How to do something if the user presses two keys in javascript

here is the new fiddle: http://jsfiddle.net/zUrpz/4/

Community
  • 1
  • 1
A.O.
  • 3,733
  • 6
  • 30
  • 49
  • Didn't work. It shows/hides the pane but the alert doesn't pops up – lucasdc Feb 06 '14 at 19:14
  • i had an extra parenthesis in the handler, try it again and let me know if it still doesnt work – A.O. Feb 06 '14 at 19:17
  • hmmmm yeah thats strange. I can get it to work on the 'resizer' bars but for some reason it wont on the toggler. Ill keep messing with it and let you know......http://jsfiddle.net/zUrpz/1/ – A.O. Feb 06 '14 at 19:28
  • Thanks.. works great. But one more thing: how can I make the same thing with the ctrl + arrows? I mean, this solves only if the user clicks the button, but what about if he uses keyboard? – lucasdc Feb 06 '14 at 19:51