jQuery -> check the visibility of an element

Question

I have a div element which will be shown/hidden in many places. Is it possible if I do a

$("#divtobetracked").hide();

or a

$("#divtobetracked").show();

that another action is fired? Because if .hide() of the element, a button should also be hidden, and if the element wil be shown, a button should also be displayed.

So, I think I can write a function which toggle and do the things I want and I call the function if I want to show/hide the element.

But, is there another possibility, sth. like a .live() event?

Best Regards.

You can't have multiple elements of the same id in the same document; if you do then you should be using a class instead: $('.divtobetracked') in place of $('#divtobetracked'). Also, can you take a moment to clarify your question and title? I'm having trouble trying to work out what you're trying to ask. Guidance from @Jon Skeet. — David Thomas
– David Thomas, Commented Jan 11, 2011 at 9:14
@David Thomas I don't think that's what @Tim means, he means something (ideally) like $('#divtobetracked').hide(function() {...});, a sort of "on-hide" or otherwise "on-css-change" feature. He is talking about only one div. You're right though, because this doesn't exist, his best bet would probably be to add a class to the div as well as the button, and do a $('.toggle-elements').hide() instead. — Spiny Norman
– Spiny Norman, Commented Jan 11, 2011 at 9:22

Community · Accepted Answer · 2017-05-23 12:06:07Z

5

read this discussion...it will help you...
check visibility of element

and try this also...

if(  $(element).is(":visible") == "true" ){  // do something }

else{ // do something else<br> }

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jan 11, 2011 at 9:23

Vivek

11k15 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spiny Norman Over a year ago

This is not an answer to the question: it doesn't fire when the element's visibility changes.

Mauricio Moraes Over a year ago

It may not be the answer, but I was looking for it for a long time. It can tell if the element is visible and it throws false when the element is not visible or doesn't exist. There are other questions searching for an answer like this. Maybe you could look for them.

Spiny Norman · Accepted Answer · 2011-01-11 09:45:03Z

No, that doesn't exist. You could write a function, like you mentioned, or you could extend jquery, like this (see also http://docs.jquery.com/Plugins/Authoring):

(function( $ ) {

  $.fn.hideMe = function() {
     this.hide();  

     this.each(function() {
         // Do more stuff here.
     });

     // Maybe even:
     this.trigger('hideMe.hidden');
  };
})( jQuery );

Then substitute your old .hide() call for:

$('#divtobetracked').hideMe();

And, if you also included the "trigger" call, you can now do:

$('#divtobetracked').bind('hideMe.hidden', function() {
    // do some specific stuff for this div here, like:
    $('#somebutton').hide();
});

See also: http://api.jquery.com/trigger/.

Or, if all you really want to do is hide a div and a button at the same time, just give them the same class:

<div id='#divtobetracked' class='hide-me'></div>
<button id='#somebutton' class='hide-me'></button>

and then

$('.hide-me').hide();

Coroos · Accepted Answer · 2011-01-11 09:22:14Z

1

You could use the callback argument to .hide() and .show() to call .trigger(). See http://api.jquery.com/hide/ and http://api.jquery.com/trigger/ .

$($('#divtobetracked').bind('hideandshow', function() {
  alert('divtobetracked was hidden or shown');
});
$("#divtobetracked").hide(function () {
  $("#divtobetracked").trigger('hideandshow');
});

answered Jan 11, 2011 at 9:22

Coroos

3902 silver badges9 bronze badges

1 Comment

Spiny Norman Over a year ago

This is pretty smart, but what's the difference between calling it as a callback function and just calling it after the .hide() call in this case? The point is to define once what should happen when the element is hidden, not at every call to .hide().

Rafay · Accepted Answer · 2011-01-11 09:22:59Z

0

$("#divtobetracked").toggle();

hope this helps

answered Jan 11, 2011 at 9:22

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

1 Comment

Spiny Norman Over a year ago

This is not an answer to the question: it doesn't fire when the element's visibility changes.

Collectives™ on Stack Overflow

jQuery -> check the visibility of an element

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related