I’m trying to set up a strap-line that unrolls across the screen, pauses, then disappears and unrolls again in a different (vertical) position. The sequence to be repeated ‘x’ times or for ‘y’ seconds (the option to set either would be nice).
I have managed to achieve the unrolling and repeating in a different position. I’m having trouble introducing the pause and the defined number of repeats. The code I’ve got so far is:
CSS:
p#strap {
position: absolute;
left: 260px;
top: 170px;
z-index: 5;
color: #FFF;
font-weight: bold;
font-size: 130%;
width: 0;
overflow: hidden;
margin: 0;
padding: 0;
white-space: nowrap;
}
JS:
<script>
function unRollStrap() {
var elem = document.getElementById('strap');
var wid = elem.offsetWidth;
if (wid >= 600) {
var topDist = getRandomInt(0, 170);
elem.style.width = 0;
wid = 0;
elem.style.top = topDist + 'px';
}
if (wid < 600) wid = wid+10;
elem.style.width = wid + 'px';
unroll = setTimeout(unRollStrap, 100);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
setTimeout(unRollStrap, 1000);
</script>
The single line paragraph starts with a width of zero, which is incremented up to 600, thus unrolling the text (initially 170px from top), from left to right. The text itself is static.
When the width reaches 600 a new random position is chosen (within limits of 0 and 170), and off it goes again. I want to introduce a pause here so that the text remains for a few seconds. I tried putting a timeout on ‘getRandomInt’, but it caused mayhem. New lines kept starting and disappearing immediately, up and down the screen (albeit between the limits).
I also want to introduce a limit so that the sequence is repeated ‘x’ times, or for ‘y’ seconds. (I have in mind about five times, but the number should be manually adjustable). I have tried a While loop, but can’t yet see how to work that with the timeout loop, as either the loop counter keeps getting reset, or it’s never incremented.
The current state of affairs can be seen at: wisemantrust.co.uk
I’d much appreciate any help with adding these two features.
Since writing the above I’ve managed to insert the pause, but still haven’t cracked limiting the iterations.
The code is now:
<script>
function unRollStrap() {
var elem = document.getElementById('strap');
var wid = elem.offsetWidth;
if (wid < 600) {
wid = wid+10;
elem.style.width = wid + 'px';
unroll = setTimeout(unRollStrap, 100);
} else {
// if (wid >= 600) {
var topDist = setTimeout(getNewTopDist,5000);
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getNewTopDist() {
var elem = document.getElementById('strap');
var newTopDist = getRandomInt(0, 170);
elem.style.width = 0;
wid = 0;
elem.style.top = newTopDist + 'px';
unroll = setTimeout(unRollStrap, 100);
}
setTimeout(unRollStrap, 1000);
</script>
This can be seen at http://wisemantrust.co.uk/
It may be a bit much, but try my code I just made: http://pastebin.com/ERKpDHR7
It’s quite dynamic. You can make a new unroller pretty easily.
And since it’s a constructor function, you can have multiple different ones on the same page.
I didn’t add any dynamism for setting the “top” style, but you can add that if you want it dynamic as well.
I was a bit hesitant to write all the code for you, but I felt like you would be the type of person to learn from it.
Well, thank you. That’s a lot of code to take in instantly. I’ll have a detailed look at it.
I’ve not used setTimeout much in several years of using JS (as you can no doubt tell). It’s a pity JS doesn’t have a simple built-in ‘insert pause here’ function, which would fill the bill in many cases.
Shouldn’t actually be too difficult, as an ‘alert’ stops execution (as far as I’m aware) under user control.However, we have to make bricks with the straw we’re given.
A pause function could be made quite easily using the Date object and a “while” loop.
It would freeze the browser, though.
I hope my code is easy to understand. I tried to name all the variables accordingly and add comments where unclear.
<snip>
Thank you.
Yes, I’ve seen it done. But not a good plan to freeze the browser.
I hope my code is easy to understand. I tried to name all the variables accordingly and add comments where unclear.
I hope so too. I’ve only had a chance to skim through it on the Forum page, but I can see the basic idea, and that there are some comments. I will be taking a copy and looking more closely later.
My client, of course, had no idea what he was asking for when he came up with this ‘simple idea’. I’m not sure I like it, really but…
<snip>