Page 1 of 1

Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 3:45 pm
by Trellot
Hello everyone, this is a class assignment so I'm looking for guidance only.

This assignment works with frames on a page using Javascript. Specifically, the page is a demonstration page where you type code in the left window and after clicking a corresponding button, the result shows up in the right window respectively.

I'm having some difficulty with my showCode() function I created. The purpose of this function is to hide the preview frame and to increase the size of the textarea fields in the html.htm and css.thm documents that I have with me. Here are the steps for this code:
   1. Set the value of the demo frameset's row attribute to "100,*,1" (the frameset's ID is "demo" btw).
   2. Change the height of the textarea field in the html.htm file to 300 pixels (There's a hint given that I have to move up to the parent object and then down to the second frame in the frames collection to     reference the contents of the html.htm document.  I'm then to use the document.getElementById() method to reference the textarea field and use the style.height property to set the textarea field's height to 300 pixels.)
  3. Change the height of the textarea field in the css.htm file to 300 pixels also.  css.htm is the third frame of the frames collection.


So, this is what I came up  with:

function showCode(){
  parent.document.getElementById("demo").rows = "100,*,1";
  parent.frames[1].document.getElementById("inputhtml").textarea.style.height = "300px";
  parent.frames[2].document.getElementById("inputcss").textarea.style.height = "300px";
}

So I'm getting the "null or not an object" error message for the first line. Where am I going wrong?

Thanks,

Trellot

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 3:53 pm
by mortifiedPenguin
Just a guess here (not a JS or web programmer), but it sounds like an uninitialized variable from the error message. Perhaps "demo" is not initialized or does not exist?

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 4:31 pm
by reli4nt
Just to be clear, what exactly is the "first line"?

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 4:34 pm
by Trellot
reli4nt wrote:
Just to be clear, what exactly is the "first line"?


Sorry, that would be "parent.document.getElementById("demo").rows = "100,*,1";"

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 4:48 pm
by reli4nt
My guess would be that there is no element with the id "demo" double check the rest of the code to make sure you didn't leave that out.

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 4:52 pm
by Trellot
reli4nt wrote:
My guess would be that there is no element with the id "demo" double check the rest of the code to make sure you didn't leave that out.

<title>HTML Demo</title>
</head>

<frameset rows="100,210,*" id="demo" name="demo">
   <frame name="title" id="title" src="title.htm" scrolling="no" />
   <frameset cols="*,*">
      <frame name="code1" id="code1" src="html.htm" />
      <frame name="code2" id="code2" src="css.htm" />
   </frameset>
   <frame name="output" id="output" />
</frameset>

</html>

This is what I am trying to reference.

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 5:09 pm
by titan
It looks to me that you're trying to access an object that doesn't exist. I don't see inputhtml and inputcss anywhere.

I'm just getting my toes wet with JavaScript myself. So, if I'm wrong, let me know.

And I hope you realize that frames are considered bad practice now.

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 5:22 pm
by Trellot
titan wrote:
It looks to me that you're trying to access an object that doesn't exist. I don't see inputhtml and inputcss anywhere.

I'm just getting my toes wet with JavaScript myself. So, if I'm wrong, let me know.

And I hope you realize that frames are considered bad practice now.


Well, the "inputhtml" and "inputcss" are from different files, the html.htm and css.htm files that I have. The first line in my function is trying to access the "demo" framset so that it can change the value of the rows attribute.

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 8:02 pm
by Trellot
Here are the files that I have for this project:

HTML.HTM
<html>
<head>
<title>HTML Code for the Demo Page</title>
<link href="code.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form name="code" id="code" action="">
<p>
&lt;body&gt;
<textarea id="inputhtml" name="inputhtml"></textarea>
&lt;/body&gt;
</p>
</form>
</body>
</html>

CSS.HTM
<html>
<head>
<title>CSS Code for the Demo Page</title>
<link href="code.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="code" id="code" action="">
<p>
&lt;style type="text/css" &gt;
<textarea id="inputcss" name="inputcss"></textarea>
&lt;/style&gt;
</p>
</form>
</body>
</html>

TITLE.HTM
<html>
<head>
<title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showPreview(){
  document.getElementById("demo").rows = "100,1,*";
}
function showCode(){
  parent.document.getElementById("demo").rows = "100,*,1";
  parent.frames[1].document.getElementById("inputhtml").textarea.style.height = "300";
  parent.frames[2].document.getElementById("inputcss").textarea.style.height = "300";
}
function showBoth(){
  parent.document.getElementById("demo").rows = "100,210,*";
  parent.frames[1].document.getElementById("inputhtml").textarea.style.height = "150";
  parent.frames[2].document.getElementById("inputcss").textarea.style.height = "150";
}
function sendCode(){
  var previewFrame = parent.getElementById("demo").frames[3];
  var htmlCode = parent.frames[1].document.getElementById("inputhtml").textarea.value;
  var cssCode = parent.frames[2].document.getElementById("inputcss").textarea.value;

  previewFrame.document.write("<html><head><title></title>");
  previewFrame.document.write("<style type='text/css'>" + cssCode + "</style>");
  previewFrame.document.write("</head>");
  previewFrame.document.write("<body>" + htmlCode + "</body></html>");
  previewFrame.document.close();
}
</script>
</head>
<body>
<form name="control" id="control" action="">

<h2 id="demotitle">Creating Web Pages</h2>
<p>
   <input type="button" value="Submit Code" onclick="sendCode()" />
   <input type="button" value="Show Only Code" onclick="showCode()" />
   <input type="button" value="Show Only Preview" onclick="showPreview()" />
   <input type="button" value="Show Code and Preview" onclick="showBoth()" />
</p>
</form>
</body>
</html>

DEMO.HTM
<html>
<head>
<title>HTML Demo</title>
</head>

<frameset rows="100,210,*" id="demo" name="demo">
   <frame name="title" id="title" src="title.htm" scrolling="no" />
   <frameset cols="*,*">
      <frame name="code1" id="code1" src="html.htm" />
      <frame name="code2" id="code2" src="css.htm" />
   </frameset>
   <frame name="output" id="output" />
</frameset>

</html>

I'm working from the Title.htm file and have other functions there that have similar problems. It appears I'm not referencing the frames Object properly.

Trellot

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 8:05 pm
by lordT
Just so we are clear, your DEMO.HTM doesn't open or close a <body> tag.

Re: Javascript/HTML & Frames

Posted: Wed Mar 18, 2009 9:13 pm
by Trellot
lordtottuu wrote:
Just so we are clear, your DEMO.HTM doesn't open or close a <body> tag.


Remembering back, we don't use the body tag when the page is essentially a frame, right? Or am I mistaken?

Trellot

Re: Javascript/HTML & Frames

Posted: Thu Mar 19, 2009 4:43 am
by lordT
Trellot wrote:
lordtottuu wrote:
Just so we are clear, your DEMO.HTM doesn't open or close a <body> tag.


Remembering back, we don't use the body tag when the page is essentially a frame, right? Or am I mistaken?

Trellot
:oops: I'll have to check. It's been eons since I've worked with frames.

Re: Javascript/HTML & Frames

Posted: Mon Mar 23, 2009 3:04 pm
by Trellot
So I discovered a few mistakes....

<script type="text/javascript">
function showPreview(){
  document.getElementById("demo").rows = "100,1,*";  // WAS SUPPOSED TO USE THE PARENT TAG INSTEAD OF DOCUMENT HERE...
}
function showCode(){
  parent.document.getElementById("demo").rows = "100,*,1";
  parent.frames[1].document.getElementById("inputhtml").textarea.style.height = "300"; // SHOULD NOT HAVE INCLUDED THE WORD TEXTAREA HERE
  parent.frames[2].document.getElementById("inputcss").textarea.style.height = "300"; // GET RID OF TEXTAREA
}
function showBoth(){
  parent.document.getElementById("demo").rows = "100,210,*";
  parent.frames[1].document.getElementById("inputhtml").textarea.style.height = "150"; // GET RID OF TEXTAREA
  parent.frames[2].document.getElementById("inputcss").textarea.style.height = "150"; // GET RID OF TEXTAREA
}
function sendCode(){
  var previewFrame = parent.getElementById("demo").frames[3];  // SHOULD HAVE REFERENCED THIS FRAME LIKE THIS....parent.frame[3] ONLY
  var htmlCode = parent.frames[1].document.getElementById("inputhtml").textarea.value; // GET RID OF TEXT AREA
  var cssCode = parent.frames[2].document.getElementById("inputcss").textarea.value; // GET RID OF TEXT AREA

  previewFrame.document.write("<html><head><title></title>");
  previewFrame.document.write("<style type='text/css'>" + cssCode + "</style>");
  previewFrame.document.write("</head>");
  previewFrame.document.write("<body>" + htmlCode + "</body></html>");
  previewFrame.document.close();
}
</script>

Corrected Code:
<script type="text/javascript">
function showPreview(){
  parent.getElementById("demo").rows = "100,1,*";
}
function showCode(){
  parent.document.getElementById("demo").rows = "100,*,1";
  parent.frames[1].document.getElementById("inputhtml").style.height = "300";
  parent.frames[2].document.getElementById("inputcss").style.height = "300";
}
function showBoth(){
  parent.document.getElementById("demo").rows = "100,210,*";
  parent.frames[1].document.getElementById("inputhtml").style.height = "150";
  parent.frames[2].document.getElementById("inputcss").style.height = "150";
}
function sendCode(){
  var previewFrame = parent.frames[3];
  var htmlCode = parent.frames[1].document.getElementById("inputhtml").value;
  var cssCode = parent.frames[2].document.getElementById("inputcss").value;

  previewFrame.document.write("<html><head><title></title>");
  previewFrame.document.write("<style type='text/css'>" + cssCode + "</style>");
  previewFrame.document.write("</head>");
  previewFrame.document.write("<body>" + htmlCode + "</body></html>");
  previewFrame.document.close();
}
</script>

My page works fine now.

Thanks,

Trellot

Re: Javascript/HTML & Frames

Posted: Mon Mar 23, 2009 8:36 pm
by titan
Thanks for posting that!

It'll be helpful for me as I delve into JavaScript myself.

Re: Javascript/HTML & Frames

Posted: Tue Mar 24, 2009 5:02 am
by lordT
Now that you've fixed the problem, may I now suggest you delve into JavaScript frameworks to make your work easier?

Re: Javascript/HTML & Frames

Posted: Tue Mar 31, 2009 1:48 am
by Trellot
lordtottuu wrote:
Now that you've fixed the problem, may I now suggest you delve into JavaScript frameworks to make your work easier?


Oh, I will definitely. This class required using frames at this point, however. I know there has to be a better way in the real world, though.

Trellot

Re: Javascript/HTML & Frames

Posted: Tue Mar 31, 2009 5:28 am
by lordT
Just as a FYI, frames have been removed from the HTML 5 spec. Good riddance!