Change height of textarea field in nested frame

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • waltapp
    New Member
    • Nov 2008
    • 31
    #1

    Change height of textarea field in nested frame

    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.d ocument.getElem entById("code1" ).textarea.styl e.height="300"
    parent.frames.d ocument.getElem entById("code2" ).textarea.styl e.height="300"
    }
    function showBoth(){
    parent.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='sendCo de()' >
    <input type="button" value="Show Only Code" onclick='showCo de()' >
    <input type="button" value="Show Only Preview" onclick='showPr eview()' >
    <input type="button" value="Show Code and Preview" onclick='showBo th()' >
    </p>
    </form>
    </body>
    </html>
    [/HTML]
    I would appreciate the help to find the problem with my code.
    Last edited by acoder; Nov 11 '08, 05:51 PM. Reason: Added [code] tags
    Tags: None
    • waltapp
      New Member
      • Nov 2008
      • 31
      #2
      I know my problem is in the line

      parent.frames.d ocument.getElem entById("code1" ).textarea.styl e.height="300"

      and the line below it is wrong also. What am I staing incorrectly?

        Comment

        • waltapp
          New Member
          • Nov 2008
          • 31
          #3
          Trying to understand DOM

          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.ge tElementById("d emo").rows="100 ,*,1"
          }

          function showCode(){
          top.document.ge tElementById("d emo").rows="100 ,1,*"
          top.frames[1].frames[0].document.forms[0].getElementById ("inputcss").st yle.height=300
          }
          function showBoth(){
          top.document.ge tElementById("d emo").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='sendCo de()' >
          <input type="button" value="Show Only Code" onclick='showCo de()' >
          <input type="button" value="Show Only Preview" onclick='showPr eview()' >
          <input type="button" value="Show Code and Preview" onclick='showBo th()' >
          </p>
          </form>
          </body>
          </html>
          [/HTML]
          Can someone please help me understand my problem with this.

            Comment

            • waltapp
              New Member
              • Nov 2008
              • 31
              #4
              Change height of textarea field.

              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.

                Comment

                • waltapp
                  New Member
                  • Nov 2008
                  • 31
                  #5
                  Code:
                  <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[0].frames[1].document.forms[0].getElementById("inputcss").style.height="300px"
		}
	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>

                    Comment

                    • waltapp
                      New Member
                      • Nov 2008
                      • 31
                      #6
                      I am having trouble with line 17. I do not know how to properly move through the DOM to change this parameter.

                        Comment

                        • waltapp
                          New Member
                          • Nov 2008
                          • 31
                          #7
                          The code from frame 2 is from the demo.html page. Here is the code from the demo.html page.
                          Code:
                          <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>

                            Comment

                            • waltapp
                              New Member
                              • Nov 2008
                              • 31
                              #8
                              Here is the code from the css.html page.
                              Code:
                              <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>

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  I've merged three of your threads on the same topic. Please do not double post your questions.

                                  Moderator.

                                    Comment

                                    • acoder
                                      Recognized Expert MVP
                                      • Nov 2006
                                      • 16032
                                      #10
                                      Read this article on frames. It should help solve your problem.

                                        Comment

                                        • waltapp
                                          New Member
                                          • Nov 2008
                                          • 31
                                          #11
                                          Thank you very much. That clears things up greatly. I am sure that I will be able to deal with this from here.

                                            Comment

                                            Previous template Next
                                            Working...