CODEWITHSUNDEEP
jquerycssscroll
sisko
sisko

Reputation: 9910

If it falls within a div

Is there a way to detect if an element is currently located within a div?

I have scrolling vertical menu. I set the height of the navigation div and then overflow:hidden so I only see a few of the links at a time.

So, I click a graphic at the bottom of the navigation to move the links down. I have another graphic at the top to get the opposite effect.

But, I can't find a reliable way to stopping the animation. So the movement keeps going way past the first and last menu links.

You can see the problem at http://test2omniforce.co.uk/test

Upvotes: 1

Views: 148

Answers (3)

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

Try this out:

if ( $('#myElement').closest('div').length > 0 ) {
    // yup, I'm inside a DIV
}

You can also plug in a proper jQuery selector inside the .closest() function. So to check if an element is inside my scrollable DIV, you can use:

$('#myElement').closest('div#myScrollableDiv').length > 0

Upvotes: 0

shanethehat
shanethehat

Reputation: 15580

You need to test the current value of the div#content top margin when the buttons are clicked. So for example, the top button's animation should only play if div#content margin-top is less than 0, and the bottom button's animation when the margin-top is greater than -500.

Upvotes: 2

jAndy
jAndy

Reputation: 236202

Just to answer your question, jQuery offers the :hashelp pseudo selector for detecting. Looks like

if( $('div:has(span)').length )  { }  // true if a div contains a `<span>` node.

But I don't think this is your problem. To reliable stop an animation, you can just call .stop()help.
Probably like

$('div').stop(true,true).animate() // ...

The parameters tell jQuery, to clear the current fx queue and jump to the end.

Another technique to avoid multiple executing of asyncronous effects, is to invoke the :animatedhelp pseudo selector. With that, you can detect if an element currently is animated and if so, do nothing.

if( $('div').is(':animated') ) { }  // div is currently animated

Upvotes: 1

Related Questions