SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    SetTimout and While loop

    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:

    Code:
    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;
    	}
    Code:
    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.
    Last edited by ramasaig; Sep 13, 2013 at 05:31. Reason: Thread title should read 'SetTimeout...'
    Tim Dawson
    Isle of Mull, Scotland


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •