Making text blink

SlowCoder · 12-03-2012, 09:18 PM

I'm building a multi-object Javascript blinker.

Something's broken, but I can't tell what.

Code:

<div id="agent1">blah</div>
<div id="agent2">bleh</div>

<script language="javascript" type="text/javascript">
		var BlinkToggle = new Array();
		
		BlinkToggle[1] = false;BlinkToggle[2] = true;
		
		function BlinkText(AgentNum,objID){
			BlinkToggle[AgentNum] = !BlinkToggle[AgentNum];
//document.write(BlinkToggle[AgentNum]);
			BlinkObject=document.getElementById(objID);
			if(BlinkToggle[AgentNum] == false)
				{BlinkObject.style.visibility = 'hidden'}
				else
				{BlinkObject.style.visibility = 'visible'};
			
				
			window.setTimeout(BlinkText(AgentNum,objID),3000);
		}
		
		BlinkText(1,"agent1");
		BlinkText(2,"agent2");
</script>

1. IE gives me an out of memory error on line 13.
2. If I uncomment the doc.write command, it shows that the function appears to be looping, but obviously not once every 3 seconds.
3. I've tried using setTimeout with single and double quotes, and without any at all, around the called function.

Anyone tell me what's not working here?

felgall · 12-03-2012, 09:23 PM

Code:

window.setTimeout(BlinkText(AgentNum,objID),3000);

runs BlinkText immediately and then the function the code expects that call to return gets queued to run three seconds later.

To have BlinkTest run after a three second delay you need to code it as:

Code:

window.setTimeout(function() {BlinkText(AgentNum,objID)},3000);

WolfShade · 12-03-2012, 09:36 PM

All I'm going to say is that <blink> was deprecated for a reason.

http://htmlcss.wikia.com/wiki/Blink

VIPStephan · 12-03-2012, 09:57 PM

But text-decoration: blink is not.

WolfShade · 12-03-2012, 10:20 PM

It should be.

Old Pedant · 12-03-2012, 11:06 PM

In any case, the code is horribly over-complex and could and should be simplified:

Code:

<html>
<body>
<div id="agent1">blah</div>
<div id="agent2">bleh</div>

<script type="text/javascript">
(
  function()
  {
     function blink( )
     {
          for ( var b = 1; b < 9999; ++b )
          {
              var div = document.getElementById("agent" + b )
              if ( div == null ) return;
  
              div.style.visibility = ( div.style.visibility == "hidden" ) ? "visible" : "hidden";
          }
      }

      setInterval( blink, 3000 );
  }
)();
</script>
</body>
</html>

Now it works with any number of "agentNN" divs (or spans or whatever) *and* with any initial visibility per agentNN (provided the style is code inline).

That is, you could add

Code:

    <span id="agent3" style="visibility: hidden;">wowser!</span>

And it would autmatically be blinked, as well, but in opposition to the blinks for agent1 and agent2, as given.

SlowCoder · 12-04-2012, 12:32 PM

Quote:

Originally Posted by felgall

Code:

window.setTimeout(BlinkText(AgentNum,objID),3000);

runs BlinkText immediately and then the function the code expects that call to return gets queued to run three seconds later.

To have BlinkTest run after a three second delay you need to code it as:

Code:

window.setTimeout(function() {BlinkText(AgentNum,objID)},3000);

It's been a while since I coded in JavaScript. Thank you for reminding me about the function().

Quote:

Originally Posted by WolfShade

All I'm going to say is that <blink> was deprecated for a reason.

Ah, the 90's ... full of <blink>, glitz, and badly formatted websites! Yep, I know blink is depreciated, but this is for a work project and parts of it need to blink when certain time thresholds have been reached.

Quote:

Originally Posted by Old Pedant

In any case, the code is horribly over-complex and could and should be simplified:

Code:

<html>
<body>
<div id="agent1">blah</div>
<div id="agent2">bleh</div>

<script type="text/javascript">
(
  function()
  {
     function blink( )
     {
          for ( var b = 1; b < 9999; ++b )
          {
              var div = document.getElementById("agent" + b )
              if ( div == null ) return;
  
              div.style.visibility = ( div.style.visibility == "hidden" ) ? "visible" : "hidden";
          }
      }

      setInterval( blink, 3000 );
  }
)();
</script>
</body>
</html>

Now it works with any number of "agentNN" divs (or spans or whatever) *and* with any initial visibility per agentNN (provided the style is code inline).

That is, you could add

Code:

    <span id="agent3" style="visibility: hidden;">wowser!</span>

And it would autmatically be blinked, as well, but in opposition to the blinks for agent1 and agent2, as given.

I see what you did there. Thank you.