Solved

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

Posted on 2010-09-18
4
427 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
  • 2
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
bupper earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now