By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,934 Members | 1,352 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,934 IT Pros & Developers. It's quick & easy.

Change height of textarea field in nested frame

P: 31
Hello, I am a new programmer and I am working on a school project. I am being instructed to move up then down the dom. My parent is demo.html then a frameset and then another frameset within the frameset. I have figured out how to get up to the parent and then down to the first frameset and change the rows attribute. However I am stuck on getting to the next level, I am required to change the height of the second frameset textarea to 300 pixels.

here is the code for the demo.html
[HTML]<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3

Web Design Demo

Filename: demo.html
Supporting files: css.html, html.html, title.html
-->

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

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

</html>
here is the code for the title.html
<html>
<head>

<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3

Web Design Demo Control Buttons
Author: Greg Funston
Date: November 9,2008

Filename: title.html
Supporting files: title.css

-->
<title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />

<script src="" type="text/javascript"></script>

<script type="text/javascript">

function showPreview(){
parent.document.getElementById("demo").rows="100,* ,1"
}

function showCode(){
parent.document.getElementById("demo").rows="100,1 ,*"
parent.frames.document.getElementById("code1").tex tarea.style.height="300"
parent.frames.document.getElementById("code2").tex tarea.style.height="300"
}
function showBoth(){
parent.document.getElementById("demo").rows="100,2 10,*"
}
</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>
[/HTML]
I would appreciate the help to find the problem with my code.
Nov 11 '08 #1
Share this Question
Share on Google+
10 Replies


P: 31
I know my problem is in the line

parent.frames.document.getElementById("code1").tex tarea.style.height="300"

and the line below it is wrong also. What am I staing incorrectly?
Nov 11 '08 #2

P: 31
I have a parent element with the following code:
[HTML]<html>
<head>
<title>HTML Demo</title>
</head>

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

</html>

[/HTML]and I am required to go two levels down and make the textarea feilds height to 300 pixels. I am required to do this through a file called css.html.It is the second frame in the above code name="code2"

I am required to change this parameter in the frame name="title"

my code so far is:
[HTML]<html>
<head>
<title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="" type="text/javascript"></script>
<script type="text/javascript">

function showPreview(){ top.document.getElementById("demo").rows="100,*,1"
}

function showCode(){
top.document.getElementById("demo").rows="100,1,*"
top.frames[1].frames[0].document.forms[0].getElementById("inputcss").style.height=300
}
function showBoth(){
top.document.getElementById("demo").rows="100,210, *"
}
</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>
[/HTML]
Can someone please help me understand my problem with this.
Nov 11 '08 #3

P: 31
Hello, I need help to change the textarea height. I know how to do it if I could figure out how to use the DOM properly. I have a page named title.html and it has a parent named demo.html. The demo page has a frameset with another frameset nested within it.
This is where the css.html page opens. I need to access the attributes of the textarea object and change them. I would appreciate some help from anyone please. I have been working on this for many hours.
Nov 11 '08 #4

P: 31
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <title>Web Design Demo Control Buttons</title>
  5. <link href="title.css" rel="stylesheet" type="text/css" />
  6.  
  7. <script  src=""  type="text/javascript"></script>
  8.  
  9. <script type="text/javascript">
  10.  
  11.     function showPreview(){        
  12.         top.document.getElementById("demo").rows="100,*,1"
  13.         }
  14.  
  15.     function showCode(){
  16.         top.document.getElementById("demo").rows="100,1,*"
  17.         top.frames[0].frames[1].document.forms[0].getElementById("inputcss").style.height="300px"
  18.         }
  19.     function showBoth(){
  20.         top.document.getElementById("demo").rows="100,210,*"    
  21.         }        
  22. </script>
  23.  
  24.  
  25. </head>
  26.  
  27. <body>
  28. <form name="control" id="control" action="">
  29.  
  30. <h2 id="demotitle">Creating Web Pages</h2>
  31. <p>
  32.    <input type="button" value="Submit Code" onclick='sendCode()' >
  33.    <input type="button" value="Show Only Code" onclick='showCode()' >
  34.    <input type="button" value="Show Only Preview" onclick='showPreview()' >
  35.    <input type="button" value="Show Code and Preview" onclick='showBoth()' >
  36. </p>
  37. </form>
  38. </body>
  39. </html>
  40.  
Nov 11 '08 #5

P: 31
I am having trouble with line 17. I do not know how to properly move through the DOM to change this parameter.
Nov 11 '08 #6

P: 31
The code from frame 2 is from the demo.html page. Here is the code from the demo.html page.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.  
  5. <title>HTML Demo</title>
  6. </head>
  7.  
  8. <frameset rows="100,210,*" id="demo" name="demo"> 
  9.    <frame name="title" id="title" src="title.html" scrolling="no" />
  10.    <frameset cols="*,*">
  11.       <frame name="code1" id="code1" src="html.html" />
  12.       <frame name="code2" id="code2" src="css.html" />
  13.    </frameset>
  14.    <frame name="output" id="output" />
  15. </frameset>
  16.  
  17. </html>
Nov 11 '08 #7

P: 31
Here is the code from the css.html page.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <title>CSS Code for the Demo Page</title>
  5. <link href="code.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8. <form name="code" id="code" action="">
  9. <p>
  10. &lt;style type="text/css" &gt;
  11. <textarea id="inputcss" name="inputcss"></textarea>
  12. &lt;/style&gt;
  13. </p>
  14. </form>
  15. </body>
  16. </html>
Nov 11 '08 #8

acoder
Expert Mod 15k+
P: 16,027
I've merged three of your threads on the same topic. Please do not double post your questions.

Moderator.
Nov 12 '08 #9

acoder
Expert Mod 15k+
P: 16,027
Read this article on frames. It should help solve your problem.
Nov 12 '08 #10

P: 31
Thank you very much. That clears things up greatly. I am sure that I will be able to deal with this from here.
Nov 12 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.