Help - Search - Members - Calendar
Full Version: Auto-scrolling Lyrics For Automated Jukebox
Suggest A Fix PC Support Forums > Internet > Webmastering and HTML Q&A
Jim Campton
Can anyone help me with the script for the auto scrolling lyrics for the automated jukebox? I can't seem to find the script for it anywhere on the website. Thank you Tom for the script for the jukebox, it will make a great addition to our church website www.amo1stbaptist.org Thank you to anyone who can help with the scrolling script!
phzzz
QUOTE(Jim Campton @ May 24 2008, 12:12 PM) *
Can anyone help me with the script for the auto scrolling lyrics for the automated jukebox? I can't seem to find the script for it anywhere on the website.
Hi Jim,

Actually I never posted the script publicly at all, so you wouldn't have found it anywhere.
Although I don't know the reason why, nobody has ever asked for it before now. You are the first!
But since you want it, I'll supply it. There's a first time for everything I guess! laugh.gif

I use javascript. So, if any site visitor has javascript disabled in their browser, they will not see any autoscrolling. Nowadays it's foolish for anybody to disable javascript, since it's in such wide use, but there are unfortunately some "paranoids" lurking out there that still do, thus ruining their web browsing experience at an untold number of web sites on the net.

Anyway, include the following javascript code at some point following the <body> tag of the web page you want to autoscroll...

CODE
<script language="javascript" type="text/javascript">
iPosition = 0;  iLength=254; bscroll = true;  function switchscroll(atag)
{    
bscroll = !bscroll;  atag.innerText = bscroll ? 'Autoscroll on/off' : 'Autoscroll on/off'; return false;
}
function scrollinit()  // section below initiates the scrolling and continues the scrolling to end of page
{
scrollTo(0, 10000);  lyrics_height = document.body.scrollTop+document.body.offsetHeight; scrollTo(0,0);  
}
function timer() // section below sets the timer and determines the delay and steps - you can change the values below
{    
iPosition++;  setTimeout('timer()', 500);  progress = (iPosition/iLength)*100;  if (iLength > 0)    
{        
thissec = iPosition/iLength;  lastsec = (iPosition-1)/iLength; scrollperc = thissec-lastsec;
if (bscroll) scrollBy(0, (lyrics_height-(document.body.offsetHeight/2))*scrollperc);    
}  
}
setTimeout('scrollinit()', 50);setTimeout('timer()', 10000);
</script>

In the first line of the above javascript, there is a section that reads bscroll = true
The "true" value initiates an immediate autoscroll (immediate that is, based on the delay value set in the timer function in the javascript). The "true" value causes the script to autostart as soon as the page loads. This is how I use it in the Automated Jukebox script at my site for the scrolling lyrics, with timer and delay values adjusted for each song lyrics page accordingly, to give it a "somewhat" Karaoke effect for each song, as the song plays.

There is another page I used it with, for one of my former customers, seen here. In that case, I've changed the value of bscroll to bscroll = false in the above javascript. So, you must actually click the [Autoscroll on/off] link in the center iFrame that contains the biography for Apostle Hicks on that page to initiate the scrolling manually.

Now, on to the link itself...

Again, after the <body> tag on the same page, and after the point where the above javascript code was placed, insert the following link code (clicking the link will toggle auto scrolling on or off)...

CODE
[ <a href='.' onclick='return switchscroll(this);'>Autoscroll on/off</a> ]

That's it! It's really very basic, as you can see.

QUOTE(Jim Campton @ May 24 2008, 12:12 PM) *
Thank you Tom for the script for the jukebox, it will make a great addition to our church website www.amo1stbaptist.org Thank you to anyone who can help with the scrolling script!

You are very welcome, Jim!
And I will be checking from time to time to see how you are progressing toward getting an Automated Jukebox working at your site at www.amo1stbaptist.org!

Take care,
phzzz (aka Nunzio; aka Tom)

Jim Campton
QUOTE
And I will be checking from time to time to see how you are progressing toward getting an Automated Jukebox working at your site at www.amo1stbaptist.org!


I'm happy to report that the automated jukebox is up and running on our Kid's Page here! I thank you for your help with both the automated jukebox and the autoscrolling lyrics. I am quite new to all of this. And your step by steps and detailed explanations made it if not simple, at least understandable.

Though the automated jukebox is up and working properly, while waiting for the autoscrolling code I've been noodling this: How about converting the whole thing (Audio & Lyrics) to a Flash video so the lyrics are timed to come up on screen as they are sung. I started working on that yesterday and I must admit, it looks GREAT! So in the future, I think I will be modifying your script to remove "refresh to next page" and the windows media player. I will set the the flash video to redirect to next page upon completion, and I think that will help those who have a slower internet connection. So the page won't redirect until the song is over instead of after a given time.

Also, I am VeRy interested in the java script you used to make browser windows open and slowly get larger and larger until they were the size you programed in. If it isn't too much bother, I'd like to see your working copy of that code too please. I think it would work well with the automated jukebox!

Once again, thank you so much for all your help and I look forward to any comments you might have.
phzzz
QUOTE(Jim Campton @ May 28 2008, 12:47 PM) *
I'm happy to report that the automated jukebox is up and running on our Kid's Page here! I thank you for your help with both the automated jukebox and the autoscrolling lyrics. I am quite new to all of this. And your step by steps and detailed explanations made it if not simple, at least understandable.

Well, that's great! Good job! smile.gif

QUOTE(Jim Campton @ May 28 2008, 12:47 PM) *
Though the automated jukebox is up and working properly, while waiting for the autoscrolling code I've been noodling this: How about converting the whole thing (Audio & Lyrics) to a Flash video so the lyrics are timed to come up on screen as they are sung. I started working on that yesterday and I must admit, it looks GREAT! So in the future, I think I will be modifying your script to remove "refresh to next page" and the windows media player. I will set the the flash video to redirect to next page upon completion, and I think that will help those who have a slower internet connection. So the page won't redirect until the song is over instead of after a given time.

Sounds like a good idea. I'd be interested in seeing what you did to accomplish the above, after you have it completed (if you don't mind).

QUOTE(Jim Campton @ May 28 2008, 12:47 PM) *
Also, I am VeRy interested in the java script you used to make browser windows open and slowly get larger and larger until they were the size you programed in. If it isn't too much bother, I'd like to see your working copy of that code too please. I think it would work well with the automated jukebox!

It's already available as a Featured Article for viewing at my site, Jim...

Animated (Expanding) Window Examples

btw... I have always been using the same javascript to open my Automated Jukebox from this page.
And now that you've made mention of it in this thread I think that I may also include it here at some point...
Webmastering And Html Articles, Tips & Tricks, You can contribute articles to SAF!!

QUOTE(Jim Campton @ May 28 2008, 12:47 PM) *
Once again, thank you so much for all your help and I look forward to any comments you might have.

You are welcome! thumb up.gif

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.