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:
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:
<div id="0001" class="marquee">
<b>This is a headline</b>
<p>This is the first sentence of the article text</p>
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.