Solved

Vertically scroll text over a div that has a background - like movie credits

Posted on 2010-09-18
4
444 Views
Last Modified: 2013-11-19
I have a large div on a page, enclosed in a table. The div has a background image. That div is also used as a placeholder for some AJAX supplied content.

When it is not showing the AJAX content, I'd like to have some copy scrolling over it, like movie credits. I need the existing background image to show behind the scrolling text. I'd like the text to stop scrolling on mouseover, and the text to be live links to expanded content. I'd like the scolling to be continuous, and to automatically start over once completed

I also need it to be cross browser compantible, and not use Flash. (I want too much!)

Is this possible?

I am working with PHP, JavaScript and j!Query on this page.


0
Comment
Question by:birwin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
bupper earned 500 total points
ID: 33710333
No, you don't want too much, and it is very possible and doable. I will not write the script, but I will walk you through the steps:

On the main div with the background, make sure you have css "overflow:hidden"
You create a child div, and specify position:absolute, besides other formatting options.
The child div should have an ID, like "childabc"
specify onmouseover and onmouseout in the child div, this will set a javascript variable so js knows whether the mouse is over or not. As you will see below, the onmouseout should also trigger the main function:
Write a javascript function. It will move the child div. You can do it like, document.getElementById("childabc").style.top = NEWTOP; (this will be a variable; 0 = beginning, CHILDDIV.offsetHeight-MAINDIV.offsetHeight = end)
At the end of the javascript function call setTimeout to redo the function, IF the mouse is not over the child div.

I know, I know it's a lot of content there, but that's it in a nutshell. If you want to research each point, go ahead :) It will work, btw, and be completely cross-browser.
0
 
LVL 6

Author Comment

by:birwin
ID: 33713347
Sorry, I am not enough of a JavaScript coder to be able to do that. (I'm mostly a PHP/mySQL coder).
0
 
LVL 5

Expert Comment

by:bupper
ID: 33717570
Then hire a developer or learn it :)

If you Google each point, it will be simple enough.
0
 
LVL 6

Author Closing Comment

by:birwin
ID: 33818642
I usually use the PHP section, where posters are polite, helpful, and not as stingy with their knowledge. I guess JavaScript programmers, or at least you, are a different breed. But to close this question, you get the points.

Please choke on them.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question