Menu
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:
[CODE]
<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:
[B]This is a headline
What I need to happen is as follows:
[LIST][*]
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.