0

I am having a page with the following as its :

HTML

<div class="parent">
    <div class="fbNubFlyoutOuter">
        <div class="fbNubFlyoutInner">
            <div class="predecessor"></div>
            <div class="fbNubFlyoutFooter">
                <div class="_552h hidden_elem"></div>
                <div class="other"></div>
            </div>
            <div class="successor"></div>
        </div>
    </div>
    <div class="boxMargin"></div>
    <div class="rest"></div>
</div>

Now, the following things happen (all happens dynamically, so only single if-else won't do):

  1. The div with class _552h gets shown/hidden by adding/removing class hidden_elem to it respectively.

  2. Now, I am trying to change the CSS for boxMargin as background-color:red; whenever there is class hidden_elem added to _552h. Otherwise, boxMargin has background-color:green;.

CSS is like:

._552h {
    background-color:yellow;
    border:1px solid black;
    height:50px;
    width:50px;
}
._552h.hidden_elem {
    display:none;
}
.boxMargin {
    height: 50px;
    width: 50px;
    border:1px solid black;
    background-color:green; /*should be become red when _552 is hidden*/
}
/*Maybe add a .boxMargin hidden class rule, where bkg color is red*/

Note: I will not be able to create custom events because, it will require me to trigger them which is not possible for me here since show/hide happens by some other scripts which I cannot edit. Also, I do not intend to use attrchange plugin for jQuery.

This can be solved by binding show/hide events for _552h somehow.

I have looked through some solutions to this on SO, but most of them involve creating custom hide/show event and triggering them, which is not possible as I have mentioned.

Also, I saw this : https://stackoverflow.com/a/19525797/3751213. But it is not fired, I don't know why.

Can there be simple CSS solution to this?(by parent or sibling selection maybe)

Or, I will have to go with either attrchange or DOMListeners(for attributes) or custom events anyhow? If so how will I get it?

The link which I mentioned, I have tried here: JSFIDDLE

Since, the situation might be confusing, question will be editted to provide all information needed.

EDIT

It will also be fine if I can make the fiddle work.

Community
  • 1
  • 1
j809
  • 1,499
  • 1
  • 12
  • 22

3 Answers3

1

In your case, the display of the _552h element visibility isn't managed by the show or shide events, so binding a behavior to those methods won't help you.

If some other code is adding or removing the class hidden_elem, the perhaps you could listen for the addClass or removeClass methods.

(function ($) {
      $.each(['addClass','removeClass'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
          this.trigger(ev);
          return el.apply(this, arguments);
        };
      });
    })(jQuery);

jQuery(document).ready(function() {
    jQuery(document).on('removeClass','._552h',function() {
          jQuery('.boxMargin').css('background-color','green');
    });

    jQuery(document).on('addClass','._552h',function() {
        jQuery('.boxMargin').css('background-color','red');
    });
    jQuery('#changevisibility').click(function() {
        if(jQuery('._552h').hasClass('hidden_elem')) {
            jQuery('._552h').removeClass('hidden_elem');
        } else {
            jQuery('._552h').addClass('hidden_elem'); 
        }

    });

});

http://jsfiddle.net/amenadiel/YsSen/

ffflabs
  • 17,166
  • 5
  • 51
  • 77
  • Sorry for this late comment but this sort of works. Still just a small doubt. Won't making `display:none` by adding a class trigger `hide` event? – j809 Jul 14 '14 at 09:42
  • Nope. The event only triggers when you use the method. Whatever other way to achieve the same effect would use their own method and therefore their own event, and several of them woulnd't trigger any event at all, or would be too cumbersome to manage, such as binding the css method. – ffflabs Jul 14 '14 at 11:02
  • I accepted the answer because it led me to correct thinking. Thank you. However, I am having one more problem that the handler is not detecting the event. What can be the reason for this? Is it possible that if I bind these custom events in a function instead of `$(document).ready()`, and then when the function call gets over, the handlers are removed(not unbinding them myself though)? – j809 Jul 14 '14 at 18:25
  • But, this does not work even if I add handlers globally. The handlers respond(or maybe event is fired) only once when page is loaded, but not when element class gets changed afterwards. – j809 Jul 14 '14 at 18:32
  • Are you sure that the hiding and showing is done with jquery's addclass and removeclass methods? If it's done with native js (using the classname property) or with another library, the event won't trigger – ffflabs Jul 14 '14 at 20:32
  • Yes, adding/removing class changes its display CSS. Or as I have observed through web inspector. Although I have got your point and will take into account how is the class added. – j809 Jul 14 '14 at 20:36
0

Can be done with css only (without custom events) have a look at a very nice answer here:

Show hide divs on click in HTML and CSS without jQuery

Community
  • 1
  • 1
nsthethunderbolt
  • 2,059
  • 1
  • 17
  • 24
  • Thanks for your valuable answer... But how am I going to target the DOM in my case? Please show me an example because, I need to see the class of `siblings` child for this case. – j809 Jul 13 '14 at 14:45
0

I think this will do the trick

here is the PEN for the Code

I added some CSS and here is the JQuery i used

$(document).ready(function () {

$('#um').click(function () {
    $('._552h').toggleClass('hidden_elem');
});

$('#dois').click(function () {

    if ($('._552h').hasClass('.hidden_elem')) {

        $(.boxMargin).css('background-color', 'red');
    } else {

    }
});

});
Miguel
  • 305
  • 3
  • 16