SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    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

  2. #2
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Since writing the above I've managed to insert the pause, but still haven't cracked limiting the iterations.
    The code is now:
    Code:
    	<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/
    Tim Dawson
    Isle of Mull, Scotland

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    - Cheers.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by Pullo; Sep 14, 2013 at 04:02. Reason: Please keep personal information private

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you.
    Quote Originally Posted by thetenfold View Post
    A pause function could be made quite easily using the Date object and a "while" loop.
    It would freeze the browser, though.
    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>
    Last edited by Pullo; Sep 14, 2013 at 04:04. Reason: Please keep personal information private
    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
  •