Marquee

[vouzamo]

Hi,

How can I achieve the following using jQuery?

My code includes a number of container <div>s each with 2 child elements. A <b> and a <p> tag as shown below:

<div id="0001" class="marquee">
<b>This is a headline</b>
<p>This is the first sentence of the article text</p>
</div>

The container <div>s will be a fixed width. For this example, we'll say 700px width. The <b> will be to the left and the <p> will be to the right but will fill all the remaining space without wrapping (e.g. style overflow: hidden. This will keep the 2 child elements on the same line as shown below:

This is a headline This is the first sentence of the article text

What I need to happen is as follows:

• onMouseOver (div) a test occurs to see if the <p> tag overflows or not
• If it does, then it scrolls to the left behind the <b> tag.
• If it doesn't then nothing happens.
• Once it has disappeared completely it either scrolls in from the right or fades in to it's original position.
• This process must repeat as long as the mouseOver occurs.
• onMouseOut (div) the <p> tag returns to it's original position.
• onClick will be a location.href function to hyperlink the user.

Please ask any questions. Your help is much appreciated.

[vouzamo]

if(e.clientHeight < e.scrollHeight)
{

}

This checks if an element has overflowed or not.

All I really need is for someone to point me in the direction of an example marquee where the text can start scrolling to the left on mouseover and fades back in once it has completely disappeared with the text returning to it's original position on mouseout.