www.webdeveloper.com
Results 1 to 2 of 2

Thread: Marquee

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    Marquee

    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:

    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.

  2. #2
    Join Date
    Jun 2007
    Posts
    73
    Code:
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles