Solved

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

Posted on 2010-09-18
4
433 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
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript the "if condition with Or" 8 29
Displaying text in text field when clicking on ajax search result 10 39
ASP.NET Content Page 3 27
JQuery Search Filter 2 28
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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

839 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