jquery append when a div is visible

Question

So my container div when is not visible is this :

div id="content-wrapper" style="display: block; left: -980px; ">

and when is visible is this :

div id="content-wrapper" style="display: block; left:0px; ">

I want to append a div when a div container is visible, and I don't know how exactly to do this.

Answer 1

Is there any reason you're using a position instead of hiding the div? If you hid the div (style="display: none;") then you could use the :visible selector in jQuery. You could also use a class (class="hidden") then you could use jQuery to see:

if ($('#content-wrapper').hasClass('hidden'))
{
    // append div
}

Without that, you're pretty much dead in the water as you don't want to rely on spacing or text case.

Answer 2

$("#content-wrapper:visible") will return #content-wrapper when visible.

using the visible selector:

http://api.jquery.com/visible-selector/

So you could do something like $("#content-wrapper:visible").append(...)

Related to:

how to check image is visible or not?

Check if divs are visible with jQuery

How to determine if a table row is visible or not?