Javascript Problems

bobber205 · Dec 5, 2005

http://www.alexwait.com/NortonvilleandWinchester/ticker.html

I'm trying to make my own really simple ticker script and I want to use add insertAdjacentText into an iframe (one letter at a time, probably timed).

So far nothing is coming up. And when I add src="null.html" (which does exist BTW) the function won't run....

Why is that? Any suggestions?

Grover · Dec 5, 2005

There are a couple of problems. The most important is that you're attempting to manipulate the frame when you should be working with the document in the frame.

Here's an example to get you going:

Code:

<script type="text/Javascript">
	
		var message = "Alex Wait";
		var messageLength = message.length;
		var currentPosition = 0; //initial position is the first letter ("0")
		
		function displayTicker(loc)
		{
			var tickerFrame = document.getElementById(loc);
			//tickerFrame.document.body.insertAdjacentText("beforeEnd", "alex");
			tickerFrame.document.body.innerHTML += "alex";
		}
		
		function getNewLetter()
		{
			return message.charAt(currentPosition);
		}
	
	</script>

It's also not a good idea to use reserved words like location as variable names so I changed the name to tickerFrame.

Finally, I did a quick search and it looks as if insertAdjacentText is a Microsoft extension so if you're coding only for IE for Windows, then you can use it, otherwise, it's not going to work for you. The same is true of innerHTML but it's an extension that other browsers have adopted so it will work for you in Safari and Mozilla-based browsers.

bobber205 · Dec 5, 2005

Thanks for the info.

It's helping alot.
And I'm ok with using insertHTML... IE is used by everyone that doesn't use FF so I don't have to worry...

bobber205 · Dec 5, 2005

It's not working

Code:

<html>
<title>Ticker</title>
<script type="text/Javascript">

var message = "Alex Wait";
		var messageLength = message.length;
		var currentPosition = 0; //initial position is the first letter ("0")
		
		function displayTicker(loc)
		{
			var tickerFrame = document.getElementById("mainFrame");
			//tickerFrame.document.body.insertAdjacentText("beforeEnd", "alex");
			tickerFrame.document.body.innerHTML += "alex";
		}
		
		function getNewLetter()
		{
			return message.charAt(currentPosition);
		}
	


</script>
<body onload="displayTicker('mainFrame')">

<iframe id="mainFrame" name="mainFrame" src="null.html">

That's my page now. And nothing is coming up.

Grover · Dec 5, 2005

You may want to be sure the entire HTML document is well-formed. Here's the complete version that I tested with:

Code:

<html>

<head>
	<title>Ticker</title>
	<script type="text/Javascript">
	
		var message = "Alex Wait";
		var messageLength = message.length;
		var currentPosition = 0; //initial position is the first letter ("0")
		
		function displayTicker(loc)
		{
			var tickerFrame = document.getElementById(loc);
			//tickerFrame.document.body.insertAdjacentText("beforeEnd", "alex");
			tickerFrame.document.body.innerHTML += "alex";
		}
		
		function getNewLetter()
		{
			return message.charAt(currentPosition);
		}
	
	</script>
</head>
<body onload="displayTicker('mainFrame')">
    <iframe id="mainFrame" name="mainFrame" src="./ticker.html">
</body>
</html>

And here's the source of ticker.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Language" content="en-us">
	<title>untitled</title>
</head>
<body>
test
</body>
</html>

When I load this in Safari I get "test alex" in the iFrame.

bobber205 · Dec 5, 2005

Thanks! Man! What a great forums user!

bobber205 · Dec 5, 2005

Even though it should, FF isn't displaying corectly. But Safari is.

Grover · Dec 5, 2005

Sorry about that, I only tried it Safari. Give this a try in FireFox:

Code:

<html>

<head>
	<title>Ticker</title>
	<script type="text/Javascript">
	
		var message = "Alex Wait";
		var messageLength = message.length;
		var currentPosition = 0; //initial position is the first letter ("0")
		
		function displayTicker(loc)
		{
			var tickerFrame = document.getElementById(loc);
			//tickerFrame.document.body.insertAdjacentText("beforeEnd", "alex");

			tickerFrame.contentDocument.body.innerHTML += "alex";
		}
		
		function getNewLetter()
		{
			return message.charAt(currentPosition);
		}
	
	</script>
</head>
<body onload="displayTicker('mainFrame')">
    <iframe id="mainFrame" name="mainFrame" src="./ticker.html"></iframe>
</body>

Mike Teezie · Dec 5, 2005

EDIT: problem solved.

bobber205 · Dec 5, 2005

Bloody awesome! It works.

My learning adventure continues.

bobber205 · Dec 5, 2005

Is that page by hand or with Macromedia Dreamweaver?

Mike Teezie · Dec 5, 2005

bobber205 said:
Is that page by hand or with Macromedia Dreamweaver?

Mine?

Grover · Dec 5, 2005

The first step would be to give those images different names and then update the rollover code. So the result would be something like:

Code:

<table width="300" border="0">
  <tr>
    <td><a href="http://mnjordan.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('option1','','images/buttons/guysroll.gif',1)"><img src="images/buttons/guys.gif" name="option1" width="156" height="31" border="0"></a></td>
    <td><a href="http://apsnap.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('option2','','images/buttons/girlsroll.gif',1)"><img src="images/buttons/girls.gif" name="option2" width="158" height="31" border="0"></a></td>
    <td><a href="http://apple.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('option3','','images/buttons/bothroll.gif',1)"><img src="images/buttons/both.gif" name="option3" width="157" height="31" border="0"></a></td>
    <td><a href="http://google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('option4','','images/buttons/aboutroll.gif',1)"><img src="images/buttons/about.gif" name="option4" width="159" height="31" border="0"></a></td>
    <td><a href="http://yahoo.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('option5','','images/buttons/contactroll.gif',1)"><img src="images/buttons/contact.gif" name="option5" width="157" height="31" border="0"></a></td>
  </tr>
</table>

The rollover code needs to be able to uniquely identify the images to be able to change the src property. I didn't download all your images to try this out but this is the first step in the right direction.

(By the way, bobber205 is right that the script you've got there is the stock DreamWeaver rollover code. That's what the MM_ is for - Macromedia.)

bobber205 · Dec 5, 2005

(By the way, bobber205 is right that the script you've got there is the stock DreamWeaver rollover code. That's what the MM_ is for - Macromedia.)

It thought it might be. I hate MM code... never works for newbs (like me

)

Mike Teezie · Dec 5, 2005

Ah.

I assumed (you know what happens.....) that Will Cheyney wrote the code he showed me:

https://forums.macrumors.com/threads/163506/

Handwritten or no, I don't care - he helped me out a whole lot, and I'm really grateful.

Now, back to this thread's scheduled programming.

bobber205 · Dec 6, 2005

Ok.

Here's my latest revision. I've got the code stopping before it gets all the way through the string correctly.

But nothing is being written.

Code:

<html>
<title>Ticker</title>
<script type="text/Javascript">

var message = "Alex";
var messageLength = message.length;
var currentPosition = 0; //initial position is the firstletter("0")

alert(tickerFrame +" is ticker frame");

function displayTicker()
{
var tickerFrame = document.getElementById("mainFrame");
alert("displayTicker()")
if (currentPosition != messageLength)
{
var letter = getNewLetter(currentPosition);
alert("Letter = " + letter);
tickerFrame.contentDocument.innerHTML += letter;

currentPosition++
alert("currentPosition = " +currentPosition);
}

if (currentPosition != messageLength)
{
displayTicker();
}


}
		


function getNewLetter(position)
{
return message.charAt(position);
}




</script>


<body onload="displayTicker()">

<iframe id="mainFrame" name="mainFrame" src="./blank.html" frameborder="0">
</iframe>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

"tickerFrame.contentDocument.body.innerHTML+="<b>Alex!</b>";

Ok.
To see the troubled page in action: http://www.alexwait.com/NortonvilleandWinchester/ticker.html

Thanks for being such a helpful resource everybody.

Grover · Dec 6, 2005

You have to take care with the object references. You'd removed "body" from the reference to the document in the iFrame. Try this:

Code:

<html>

    <head>
    	<title>Ticker</title>
    	<script type="text/JavaScript">

    		var message = "Alex";
    		var messageLength = message.length;
    		var currentPosition = 0; //initial position is the firstletter("0")

    		//alert(tickerFrame +" is ticker frame");

    		function displayTicker()
    		{
    			var tickerFrame = document.getElementById("mainFrame");

    			//alert("displayTicker()")
	
    			if (currentPosition != messageLength)
    			{
        			var letter = getNewLetter(currentPosition);
    			
        			//alert("Letter = " + letter);
    			
        			tickerFrame.contentDocument.body.innerHTML += letter;

        			currentPosition++;

        			//alert("currentPosition = " + currentPosition);
    			}

    			if (currentPosition < messageLength)
    			{
    			    displayTicker();
    			}

    		}

    		function getNewLetter(position)
    		{
    			return message.charAt(position);
    		}

    	</script>

    </head>

    <body onload="displayTicker()">

        <iframe id="mainFrame" name="mainFrame" src="./blank.html" frameborder="0"></iframe>

    </body>

</html>

bobber205 · Dec 6, 2005

What's the best way to delay my code from executing?

Code:

var delay = setTimeOut("displayTicker()",1000);

I have that code, but when it is somehow stopping the rest from going.
Why is that?

Here is all the code.

Code:

<html>
<title>Ticker</title>
<script type="text/Javascript">

var message = "Alex Wait is really really awesome!!!!!";
var messageLength = message.length;
var currentPosition = 0; //initial position is the firstletter("0")



function displayTicker()
{
var tickerFrame = document.getElementById("mainFrame");


if (currentPosition != messageLength)
{
var letter = getNewLetter(currentPosition);

tickerFrame.contentDocument.body.innerHTML += letter;

currentPosition++

}

if (currentPosition != messageLength)
{
var delay = setTimeOut("displayTicker()",1000);
}


}
		


function getNewLetter(position)
{
return message.charAt(position);
}




</script>


<body onload="displayTicker()">

<iframe id="mainFrame" name="mainFrame" src="./blank.html" frameborder="0">
</iframe>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

"tickerFrame.contentDocument.body.innerHTML+="<b>Alex!</b>";

bobber205 · Dec 6, 2005

I tried the code in Safari and it is not responding to spaces.

What's the name for a space I can use to check for a space in the message and return something useful?

Grover · Dec 6, 2005

Spaces can be converted to the entity.

bobber205 · Dec 6, 2005

I tried returning "&nbsp"... nothing happens.
I tried returning "<&nbsp>" and I get < >inbetween each word.

What am I doing wrong?

Grover · Dec 6, 2005

For the looping problem try:

Code:

<html>

    <head>
    	<title>Ticker</title>
    	<script type="text/JavaScript">

    		var message = "Alex Test";
    		var messageLength = message.length;
    		var currentPosition = 0; //initial position is the firstletter("0")
			var delay = null;
    		
    		//alert(tickerFrame +" is ticker frame");

    		function displayTicker()
    		{
    			var tickerFrame = document.getElementById("mainFrame");

    			//alert("displayTicker()")
	
    			if (currentPosition != messageLength)
    			{
        			var letter = getNewLetter(currentPosition);
    			
        			//alert("Letter = " + letter);
    			
    				if (letter == " ") letter = " ";
    			
        			tickerFrame.contentDocument.body.innerHTML += letter;

        			currentPosition++;

        			//alert("currentPosition = " + currentPosition);
    			}

    			if (currentPosition < messageLength)
    			{
    			    delay = setTimeout("displayTicker()",1000);
    			}

    		}
    		

    		function getNewLetter(position)
    		{
    			return message.charAt(position);
    		}


    	</script>

    </head>

    <body onload="displayTicker()">

        <iframe id="mainFrame" name="mainFrame" src="./blank.html" frameborder="0"></iframe>

    </body>

</html>

JavaScript is case sensitive so setTimeOut was causing your problem. I also included a test for the space so you can see how it might be done.

bobber205 · Dec 6, 2005

*dances*

Thanks so much! Man! I wish there was some sort of reward you could get for being SOOOO helpful.

See ya around.

bobber205 · Dec 6, 2005

Is there any workaround for the flashing that goes on?

Grover · Dec 7, 2005

I don't notice any flicker on my machine in Safari or Camino so I'm not sure. It might be a side effect of manipulating the innerHTML. Now that you've got the basics figured out you could experiment with inserting text nodes as you originally intended to see if that makes a difference.

Javascript Problems

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors 68020

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors member

macrumors 68020

macrumors member

macrumors 68020

macrumors 68020

macrumors member

Our Staff