Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Javascript Problems

G

Grover

macrumors member
May 14, 2004
48
0
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
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.:mad:
 
G

Grover

macrumors member
May 14, 2004
48
0
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.
 
G

Grover

macrumors member
May 14, 2004
48
0
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>
 
G

Grover

macrumors member
May 14, 2004
48
0
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
(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.)
Click to expand...

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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
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.:D
 
G

Grover

macrumors member
May 14, 2004
48
0
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
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?
 
bobber205

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
I tried returning "&nbsp"... nothing happens.
I tried returning "<&nbsp>" and I get < >inbetween each word.

What am I doing wrong?:confused:
 
G

Grover

macrumors member
May 14, 2004
48
0
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

bobber205

macrumors 68020
Original poster
Nov 15, 2005
2,182
1
Oregon
*dances*

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

See ya around.

:cool:
 
G

Grover

macrumors member
May 14, 2004
48
0
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom