Javascript/HTML & Frames

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 3:45 pm

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:
Code: Select all
   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
Last edited by Trellot on Wed Mar 18, 2009 4:30 pm, edited 1 time in total.
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 3:53 pm

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?
2600K @ 4.8GHz; XSPC Rasa/RX240/RX120 Phobya Xtreme 200; Asus P8Z68-V Pro; 16GB Corsair Vengeance 1333 C9; 2x7970 OC w/ Razor 7970; Force GT 120GB; 3x F3 1TB; Corsair HX750; X-Fi Titanium; Corsair Obsidian 650D; Dell 2408WFP Rev. A01; 2x Dell U2412m
mortifiedPenguin
Gerbil Elite
 
Posts: 812
Joined: Mon Oct 08, 2007 7:46 pm

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 4:31 pm

Just to be clear, what exactly is the "first line"?
The JPProject Multimedia
Designing the world we live in. Defining the terms we live by.
reli4nt
Gerbil
 
Posts: 59
Joined: Thu Aug 12, 2004 6:32 pm
Location: New York

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 4:34 pm

reli4nt wrote:Just to be clear, what exactly is the "first line"?


Sorry, that would be "parent.document.getElementById("demo").rows = "100,*,1";"
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 4:48 pm

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.
The JPProject Multimedia
Designing the world we live in. Defining the terms we live by.
reli4nt
Gerbil
 
Posts: 59
Joined: Thu Aug 12, 2004 6:32 pm
Location: New York

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 4:52 pm

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.

Code: Select all
<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.
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 5:09 pm

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.
The best things in life are free.
http://www.gentoo.org
Guy 1: Surely, you will fold with me.
Guy 2: Alright, but don't call me Shirley.
titan
Grand Gerbil Poohbah
 
Posts: 3276
Joined: Mon Feb 18, 2002 7:00 pm
Location: Great Smoky Mountains

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 5:22 pm

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.
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 8:02 pm

Here are the files that I have for this project:

HTML.HTM
Code: Select all
<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
Code: Select all
<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
Code: Select all
<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
Code: Select all
<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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 8:05 pm

Just so we are clear, your DEMO.HTM doesn't open or close a <body> tag.
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: Javascript/HTML & Frames

Postposted on Wed Mar 18, 2009 9:13 pm

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Thu Mar 19, 2009 4:43 am

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.
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: Javascript/HTML & Frames

Postposted on Mon Mar 23, 2009 3:04 pm

So I discovered a few mistakes....

Code: Select all
<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:
Code: Select all
<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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Mon Mar 23, 2009 8:36 pm

Thanks for posting that!

It'll be helpful for me as I delve into JavaScript myself.
The best things in life are free.
http://www.gentoo.org
Guy 1: Surely, you will fold with me.
Guy 2: Alright, but don't call me Shirley.
titan
Grand Gerbil Poohbah
 
Posts: 3276
Joined: Mon Feb 18, 2002 7:00 pm
Location: Great Smoky Mountains

Re: Javascript/HTML & Frames

Postposted on Tue Mar 24, 2009 5:02 am

Now that you've fixed the problem, may I now suggest you delve into JavaScript frameworks to make your work easier?
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: Javascript/HTML & Frames

Postposted on Tue Mar 31, 2009 1:48 am

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
Trellot
Gerbil Team Leader
 
Posts: 294
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Javascript/HTML & Frames

Postposted on Tue Mar 31, 2009 5:28 am

Just as a FYI, frames have been removed from the HTML 5 spec. Good riddance!
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest