Help with Buttons on Frames in JavaScript

T

Trvl Orm

I am working with 2 frames, Left and Right and the main code is in the
left frame, which has been attached.

Can someone please help me with this code. I am new to JavaScript and
can't figure it out.

What needs to happen is this:

On the left frame you should have a series of buttons, which when pushed
makes things happen on the right frame.
1) Prompt the user to enter back ground color, text color, link colors,
title and some lines of text.
2) A button which when pushed shows text, back ground color etc. on the
RIGHT frame...not the LEFT frame.
3) A Script/Prompt box on the left frame, which when the user types in
"What is background Color", say user types in Blue and pushes
submit...it changes the background color to be blue on the RIght frame
and not the left...

What I have done so far, is create buttons to change background color
but it changes it in the LEFT frame and not the RIGHT frame...So my
question is How do I get the buttons and text information to appear on
the Right frame, but created in the left frame.

Confusing isn't it...Is there anyone out there who could help me pretty
promptly???

Thanks so much....
<HTML>
<HEAD>

<TITLE>Exercise Left8-2 - LEFT FRAME PAGE with Document Object</TITLE>

<H3>This is the left document of Exercise 8-2</H3>

<SCRIPT LANGUAGE="JavaScript"

function checkField (field) {
if (field.value == "") {
window.alert("Please enter a Back ground Color");
field.focus ();
}
}
</Script>


<BODY>
<SCRIPT LANGUAGE="JavaScript">

var username = window.prompt("Welcome to Exercise 8-2",
"Enter your name here");
window.prompt("Welcome to Exercise 8-2");
document.write(username - + "Welcome to Exercise 8-2");

</SCRIPT>


<H1 Align=center> <Font Face=Arial Color=Green> Exercise 8-2 -
JavaScript Buttons </Font></H1>
<Center>
<Font Face=Arial Size=3 Color=Green>

<FORM NAME="FrmMyForm" action="Right8-2.html">
Enter a Back Ground Color:
<INPUT TYPE="text" Name="MyField" onBlur-"checkField(this)")
<INPUT TYPE="Submit">


<INPUT TYPE="button" VALUE="Change Back Ground Color" NAME="MyField"
onClick="document.bgColor='blue' ">


<INPUT type="button" value="Change to Red!" name="redbutton"
onClick="document.bgColor='red'"> <br>

<INPUT type="button" value="Change to Yellow!" name="yellowbutton"
onClick="document.bgColor='yellow'"> <br>

<INPUT type="button" VALUE="Change to Blue!" NAME="Bluebutton"
onClick="document.bgColor='blue'"><BR>

<INPUT TYPE="button" NAME="buttonPrint" VALUE="Print"
onClick="window.print()">


<INPUT type="button" value="Go to the Right Page" name="rightbutton"
onClick="window.location="Right8-2.html">

</FORM>
</BODY>

</HTML>
 
R

Ron

Heya Trvl,
There were quite a few errors in both HTML and javascript. Note that
frames are no longer supported in XHTML, so you may as well get used to
coding without them. The object element in combination with simple
javascript allows similar functionality. Instead of a frameset document,
you should have this:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Untitled</title>
<!--All the lines above are required for XHTML documents that use
intrinsic javascript events. Copy
them to a file you can use for a template; don't bother memorizing
it. The template should end with
</head><body></body></html>. These are all required elements.-->
<style type="text/css">
#left {
float:left;
}
#right {
float:right;
}
</style>
<!--The language attribute is deprecated in favor of MIME type-->
<script type="text/javascript">
var rightDoc = null;

function getUserName() {
var username = window.prompt("Welcome to Exercise 8-2", "Enter
your name here");
var rightText = rightDoc.createTextNode(username + "Welcome to
Exercise 8-2");
rightDoc.body.appendChild(rightText);
rightDoc.body.normalize();
/* In almost all cases, it is bad form to use document.write()
unless one knows exactly what they are doing.
This function was moved here because it needs to run after the
right frame has finished loading. You'll
notice with javascript that if you call elements before they have
been loaded, they will always be null.
Learn more about the standard methods above at
http://www.w3.org/TR/DOM-Level-3-Core .
Note that as of this date, no browsers implement properties and
methods introduced in Level 3 Core. */
}

function setRightDoc() {
rightDoc = document.getElementById('right').contentDocument;
}
</script>
</head>
<body onload="setRightDoc();getUserName()">
<object id="left" data="Left8-2.xhtml"
type="application/xhtml+xml" height="600" width="50%"></object>
<object id="right" data="Right8-2.xhtml"
type="application/xhtml+xml" height="600" width="50%"></object>
</body>
</html>

Note how all tag names and attributes are in lower-case, and all tags
are closed. Now you'll want to modify Left8-2.xhtml to be the following:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Exercise Left8-2 - LEFT FRAME PAGE with Document
Object </title>
<script type="text/javascript">
function checkField(field) {
if (field.value == "") {
window.alert("Please enter a Back ground Color");
field.focus ();
}
}

function changeRightTo(value) {
var rightDoc =
parent.document.getElementById("right").contentDocument;
if(document.implementation.hasFeature("CSS2", "2.0")) {
rightDoc.body.style.setProperty("background-color", value,
"important");
}
}
</script>
<style type="text/css">
h2 {
text-align:center;
font-family:Arial, sans-serif;
color:green;
}
.my-form {
text-align:center;
font-family:Arial, sans-serif;
font-size:small;
color:green;
}
</style>

<!--All tags must be closed. Empty tags can be closed by adding a
slash before the closing '>' of the tag-->
</head>
<body>

<!-- Headings are structural, not aesthetic. If you don't like the
heading style, use stylesheets, but
never put heading numbers out of order simply for aesthetic reasons-->
<h1>This is the left document of Exercise 8-2</h1>

<!--The font element is no longer supported. Use stylesheets to
effect document aesthetics-->
<h2>Exercise 8-2 -JavaScript Buttons</h2>

<!--The center element is no longer supported. Use stylesheets for
aesthetic positioning.-->
<!--For most top-level elements, the functionality of name has been
replaced with id. Form components must still use
name to be successful.-->
<form id="FrmMyForm" action="Right8-2.html" class="my-form">

<!--It is good form to use label/control structure instead of having
controls in a sea of unrelated text.-->
<label for="MyField">Enter a Back Ground Color:</label>
<input type="text" name="MyField" id="MyField"
onblur="checkField(this)" />

<!--The button element allows greater flexibility than the input
element of type button-->
<button type="button" name="Userbutton"
onclick="changeRightTo(document.getElementById('MyField').value)">
Change Back Ground Color
</button>
<button type="button" value="red" name="redbutton"
onclick="changeRightTo(this.value)">
Change to Red!
</button>
<br />
<button type="button" value="yellow" name="yellowbutton"
onclick="changeRightTo(this.value)">
Change to Yellow!
</button>
<br />
<button type="button" name="buttonPrint"
onclick="window.print()">Print</button>
<button type="button" name="rightbutton"
onclick="window.location='Right8-2.html'">
Go to the Right Page
</button>
</form>
</body>
</html>

The Right8-2.xhtml file is just an empty XHTML document:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Exercise Right8-2 - RIGHT FRAME PAGE with Document
Object</title>
</head>
<body>
</body>
</html>

You should be able to work from here. Learn more about the current XHTML
standard at http://www.w3.org/TR/xhtml11 .
 
M

Michael Winter

There were quite a few errors in both HTML and javascript. Note that
frames are no longer supported in XHTML, so you may as well get used to
coding without them.
Click to expand...

I was lead to believe that IE is incapable of handling XHTML properly. All
it ends up doing is switching into quirks mode and "error-correcting" it
to HTML. Specifying the content type as text/html isn't much better as
normal HTML will do just as well without the conversion. Is it really
worthwhile? For now, it seems much more sensible to use Strict HTML. Any
browser from the NN4 generation onwards can handle that.

[snip]
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
Click to expand...

Unless your server sends the content type, you should append the character
set:

content="application/xhtml+xml; charset=xxx"

[snip]
Learn more about the standard methods above at
http://www.w3.org/TR/DOM-Level-3-Core .
Note that as of this date, no browsers implement properties and
methods introduced in Level 3 Core. */
Click to expand...

I question the point of that. If DOM 3 Core isn't implemented, why learn
it? It would make more sense to learn DOM 1 or 2 Core and HTML, followed
by DOM 2 Events and Style, coupled with Microsoft's event model (isn't
browser scripting fun :).
function setRightDoc() {
rightDoc = document.getElementById('right').contentDocument;
Click to expand...

You should certainly be demonstrating, or at least mentioning, feature
detection (see FAQ) with DOM methods and properties. Though it would be
nice to ignore older browsers, you shouldn't.

[snip]
if(document.implementation.hasFeature("CSS2", "2.0")) {
Click to expand...

You are aware that most browsers won't return true, but will support the
objects below, yes? The only browser that I have that will pass this test
is Mozilla 1.8a[1], yet both IE and Opera will allow the alteration of the
background-color CSS property through script.
rightDoc.body.style.setProperty("background-color", value,
"important");
[snip]

You should be able to work from here. Learn more about the current XHTML
standard at http://www.w3.org/TR/xhtml11 .
Click to expand...

Again, I'd recommend starting with Strict HTML[2] and CSS:

HTML 4.01 Specification (don't use deprecated elements or attributes)
<URL:http://www.w3.org/TR/html4/>

CSS 2
<URL:http://www.w3.org/TR/REC-CSS2/>

It should be noted that IE doesn't support some elements of CSS 2 very
well.

Mike


[1] It should be noted that Mozilla's claims should be taken with a pinch
of salt. Though it may support the various properties and methods, its
implementations do not always follow specification.
[2] I feel that it should be learnt first as it's the cornerstone of
well-formed XHTML.
 
R

Ron

Michael said:
I was lead to believe that IE is incapable of handling XHTML properly.
All it ends up doing is switching into quirks mode and
"error-correcting" it to HTML. Specifying the content type as
text/html isn't much better as normal HTML will do just as well
without the conversion. Is it really worthwhile? For now, it seems
much more sensible to use Strict HTML. Any browser from the NN4
generation onwards can handle that.

[snip]
Click to expand...

Heya Michael,
IE6 renders XHTML documents with embedded objects fine on my end, as
long as one uses the compatibility tips for XHTML. :) Documents
identified as XHTML are rendered more efficiently than HTML in newer
browsers, and it is a simpler language which is in the process of
incorporating other XML applications, so I tend to encourage its use.
Unless your server sends the content type, you should append the
character set:

content="application/xhtml+xml; charset=xxx"

[snip]
Click to expand...

I would add this, but I have no way of knowing what character encoding
the reader is using.
I question the point of that. If DOM 3 Core isn't implemented, why
learn it? It would make more sense to learn DOM 1 or 2 Core and HTML,
followed by DOM 2 Events and Style, coupled with Microsoft's event
model (isn't browser scripting fun :).
Click to expand...

I wouldn't suggest "learning" any of the DOMs. :) I provide the link as
a reference document, and as such, providing the most up-to-date version
makes sense, as long as the reader doesn't expect browsers to use DOM 3
properties and methods as of this date. It extends the useful life of
this thread a little. :)
You should certainly be demonstrating, or at least mentioning, feature
detection (see FAQ) with DOM methods and properties. Though it would
be nice to ignore older browsers, you shouldn't.

[snip]
Click to expand...

Hehe. Some things do get judgement calls though. If the browser cannot
access the content document of the frame, then the entire function of
the main document is not just useless, but meaningless as well. A
feature detection here would possibly be useful as a debug to the
author, but wouldn't provide any useful *alternate* information to a
client other than "You can't use this page.".
if(document.implementation.hasFeature("CSS2", "2.0")) {
Click to expand...


You are aware that most browsers won't return true, but will support
the objects below, yes? The only browser that I have that will pass
this test is Mozilla 1.8a[1], yet both IE and Opera will allow the
alteration of the background-color CSS property through script.
Click to expand...

Firefox and Mozilla 1.7b pass the test fine. Unfortunately, Opera
doesn't support script elements in XHTML (strange, they say it will be
fixed in the next version), and IE doesn't even load the objects
properly, so this is moot for them.
You should be able to work from here. Learn more about the current
XHTML standard at http://www.w3.org/TR/xhtml11 .
Click to expand...


Again, I'd recommend starting with Strict HTML[2] and CSS:

HTML 4.01 Specification (don't use deprecated elements or attributes)
<URL:http://www.w3.org/TR/html4/>

CSS 2
<URL:http://www.w3.org/TR/REC-CSS2/>

It should be noted that IE doesn't support some elements of CSS 2 very
well.

Mike
Click to expand...
IE doesn't support a lot of elements of CSS2 very well. :D I guess I
should try to be more friendly to IE user agents. :) For the thread
starter, you'll want to keep
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml_node_entry.asp
to reference IE-specific properties and methods and
http://www.mozilla.org/docs/dom/domref/ as a reference to those specific
to Gecko-based browsers.
 
T

TrvlOrm

Ok Thanks Ron, I'll give this a try. If I can't get it to work...I'll let you know..
Thanks Again
 
T

TrvlOrm

Thank you Michael and Ron for your posts. I will give your suggestions
a try and see what happens. If it works - wonderful, if not I'll be
back.

Thanks again.

Ron said:
Michael said:
I was lead to believe that IE is incapable of handling XHTML properly.
All it ends up doing is switching into quirks mode and
"error-correcting" it to HTML. Specifying the content type as
text/html isn't much better as normal HTML will do just as well
without the conversion. Is it really worthwhile? For now, it seems
much more sensible to use Strict HTML. Any browser from the NN4
generation onwards can handle that.

[snip]
Click to expand...

Heya Michael,
IE6 renders XHTML documents with embedded objects fine on my end, as
long as one uses the compatibility tips for XHTML. :) Documents
identified as XHTML are rendered more efficiently than HTML in newer
browsers, and it is a simpler language which is in the process of
incorporating other XML applications, so I tend to encourage its use.
Unless your server sends the content type, you should append the
character set:

content="application/xhtml+xml; charset=xxx"

[snip]
Click to expand...

I would add this, but I have no way of knowing what character encoding
the reader is using.
I question the point of that. If DOM 3 Core isn't implemented, why
learn it? It would make more sense to learn DOM 1 or 2 Core and HTML,
followed by DOM 2 Events and Style, coupled with Microsoft's event
model (isn't browser scripting fun :).
Click to expand...

I wouldn't suggest "learning" any of the DOMs. :) I provide the link as
a reference document, and as such, providing the most up-to-date version
makes sense, as long as the reader doesn't expect browsers to use DOM 3
properties and methods as of this date. It extends the useful life of
this thread a little. :)
You should certainly be demonstrating, or at least mentioning, feature
detection (see FAQ) with DOM methods and properties. Though it would
be nice to ignore older browsers, you shouldn't.

[snip]
Click to expand...

Hehe. Some things do get judgement calls though. If the browser cannot
access the content document of the frame, then the entire function of
the main document is not just useless, but meaningless as well. A
feature detection here would possibly be useful as a debug to the
author, but wouldn't provide any useful *alternate* information to a
client other than "You can't use this page.".
if(document.implementation.hasFeature("CSS2", "2.0")) {
Click to expand...


You are aware that most browsers won't return true, but will support
the objects below, yes? The only browser that I have that will pass
this test is Mozilla 1.8a[1], yet both IE and Opera will allow the
alteration of the background-color CSS property through script.
Click to expand...

Firefox and Mozilla 1.7b pass the test fine. Unfortunately, Opera
doesn't support script elements in XHTML (strange, they say it will be
fixed in the next version), and IE doesn't even load the objects
properly, so this is moot for them.
You should be able to work from here. Learn more about the current
XHTML standard at http://www.w3.org/TR/xhtml11 .
Click to expand...


Again, I'd recommend starting with Strict HTML[2] and CSS:

HTML 4.01 Specification (don't use deprecated elements or attributes)
<URL:http://www.w3.org/TR/html4/>

CSS 2
<URL:http://www.w3.org/TR/REC-CSS2/>

It should be noted that IE doesn't support some elements of CSS 2 very
well.

Mike
Click to expand...
IE doesn't support a lot of elements of CSS2 very well. :D I guess I
should try to be more friendly to IE user agents. :) For the thread
starter, you'll want to keep
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml_node_entry.asp
to reference IE-specific properties and methods and
http://www.mozilla.org/docs/dom/domref/ as a reference to those specific
to Gecko-based browsers.
Click to expand...
 
R

Richard Cornford

IE6 renders XHTML documents with embedded objects fine on my end, as
long as one uses the compatibility tips for XHTML. :)
Click to expand...

The compatibility requirement for using XHTML with IE browsers is to
send a content type header that asserts that the contents are text/html.
The effect is that IE treats the content as HTML and interprets the
XHTML features (explicitly closed empty tag (" /"), unknown attributes
and the like) as erroneous mark up, error-correcting it back into HTML
tag soup and construct a scriptable HTML DOM for the page.
Documents identified as XHTML are rendered more
efficiently than HTML in newer browsers,
Click to expand...

Receiving content asserting that it is text/html induces browsers that
could handle genuine XHTML to treat that content as HTML, and they also
error-correct it back to tag soup HTML and construct a scriptable HTML
DOM for the page. It is unlikely that the added burden of
error-correcting the mark-up would result in XHTML served as text/html
being rendered faster than formally valid HTML.

Unless your server sends the content type, you should append the
character set:

content="application/xhtml+xml; charset=xxx"

[snip]
Click to expand...
I would add this, but I have no way of knowing what character encoding
the reader is using.
Click to expand...
<snip>

Because the XHTML appendix C compatibility guidelines recommend sending
the content type as text/html, putting a META tag in the document
asserting that the content type is application/xhtml+xml is a bit
perverse, probably pointless (what is the browser expected to do, switch
to an XML parser when it is encountered?) and potentially dangerous.
HTML DOMs and XHTML DOMs are similar but require distinct handling
(particularly with regard to namespaces), so it cannot be a good idea to
produce a page that is expected to result in an HTML DOM (to be
scripted) and then do something that might result in the browser
producing an XHTML DOM (even if nobody is aware of a browser that would
do so).

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Help needed with Frames and Buttons in JavaScript 0
How can I arrange a series of radio buttons? 2
Help with code 0
Canvas drawing HTML Javascript on elementor 1
I Need Help with making a function that draws in a canvas using location data. 1
Need help with code on website (noob) 2
Help with Visual Lightbox: Scripts 2

Members online

Total: 35 (members: 2, guests: 33)
Robots: 170

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,150
Latest member
MakersCBDReviews

Latest Threads

Top