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

Need debugger to help me

P: n/a
I am in no way a scripter/programmer of any kind but I am in charge of
a number of online videos. Anyway I need help debugging my javascript
which has been pieced together from several other posts/people in
relation to the topic of reloading two frames from a link in a image
map. Here is the code it doesn't work, Please Help!

You can check out the live page at

http://www.maddash.net/videos/oakwood

<html>
<head>
<title>Oakwood</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script language="javascript">
function update1() {
Top.Video.location="oakwood_wmhs.htm";
Top.Selector.location="selector_oakwood.htm"; }

function update2() {
Top.Video.location="driessche_wmhs.htm";
Top.Selector.location="selector_driessche.htm"; }

function update3() {
Top.Video.location="wilson_wmhs.htm";
Top.Selector.location="selector_wilson.htm"; }

function update4() {
Top.Video.location="bradley_wmhs.htm";
Top.Selector.location="selector_bradley.htm"; }
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="submenu.jpg" width="297" height="480" border="0"
usemap="#Map">
<map name="Map">
<area shape="rect" coords="172,7,285,30"
href="javascript:onClick=update1();" alt="Main Video">
<area shape="rect" coords="27,166,283,248"
href="javascript:onClick=update2();" alt="Annmarie Driessche">
<area shape="rect" coords="28,253,269,334"
href="javascript:onClick=update3();" alt="Sandy Wilson">
<area shape="rect" coords="28,338,266,423"
href="javascript:onClick=update4();" alt="Anne Marie Bradley">
<area shape="rect" coords="248,445,290,472"
href="http://www.maddash.net/videos/troubleshoot.htm" target="_blank"
alt="Help!">
</map>
</body>
</html>

Jul 23 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Lee
he************@gmail.com said:

I am in no way a scripter/programmer of any kind but I am in charge of
a number of online videos. Anyway I need help debugging my javascript
which has been pieced together from several other posts/people in
relation to the topic of reloading two frames from a link in a image
map. Here is the code it doesn't work, Please Help!

When copying code that you don't understand, you need to copy
very carefully. Don't use "Top" if the original code said "top".
Don't combine: href="javascript:" onClick="update1()"
into: href="javascript:onClick="update1()"

Jul 23 '05 #2

P: n/a
Ivo
<he************@gmail.com> wrote
... the topic of reloading two frames from a link in a image
map. Here is the code it doesn't work, Please Help!

function update1() {
Top.Video.location="oakwood_wmhs.htm";
Top.Selector.location="selector_oakwood.htm"; }


The topmost window should be referenced as "top" with a lowercase "t".
Also, in your HTML frameset, the name of the frame is "Select", not
"Selector" (I'd use a less confusing name btw). In short, changing the
function as follows should do the trick:

function update1() {
top.frames.Video.location="oakwood_wmhs.htm";
top.frames.Select.location="selector_oakwood.htm"; }

hth
--
Ivo

Jul 23 '05 #3

P: n/a
I updated the code to as follows but I am getting the following errors:

update1 is not defined
update2 is not defined
update3 is not defined
update4 is not defined

<html>
<head>
<title>Oakwood</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="javascript">
function update1() {
top.frames.Video.location="oakwood_wmhs.htm";
top.frames.Selector.location="selector_oakwood.htm "; }

function update2() {
top.frames.Video.location="driessche_wmhs.htm";
top.frames.Selector.location="selector_driessche.h tm"; }

function update3() {
top.frames.Video.location="wilson_wmhs.htm";
top.frames.Selector.location="selector_wilson.htm" ; }

function update4() {
top.frames.Video.location="bradley_wmhs.htm";
top.frames.Selector.location="selector_bradley.htm "; }
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="submenu.jpg" width="297" height="480" border="0"
usemap="#Map">
<map name="Map">
<area shape="rect" coords="172,7,285,30" href="javascript:"
onClick="update1()" alt="Main Video">
<area shape="rect" coords="27,166,283,248" href="javascript:"
onClick="update2()" alt="Annmarie Driessche">
<area shape="rect" coords="28,253,269,334" href="javascript:"
onClick="update3()" alt="Sandy Wilson">
<area shape="rect" coords="28,338,266,423" href="javascript:"
onClick="update4()" alt="Anne Marie Bradley">
<area shape="rect" coords="248,445,290,472"
href="http://www.maddash.net/videos/troubleshoot.htm" target="_blank"
alt="Help!">
</map>
</body>
</html>

Jul 23 '05 #4

P: n/a
he************@gmail.com wrote:
I updated the code to as follows but I am getting the following errors:
update1 is not defined
update2 is not defined
update3 is not defined
update4 is not defined

<html>
<head>
<title>Oakwood</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="javascript">
function update1() {
top.frames.Video.location="oakwood_wmhs.htm";
top.frames.Selector.location="selector_oakwood.htm "; }

function update2() {
top.frames.Video.location="driessche_wmhs.htm";
top.frames.Selector.location="selector_driessche.h tm"; }

function update3() {
top.frames.Video.location="wilson_wmhs.htm";
top.frames.Selector.location="selector_wilson.htm" ; }

function update4() {
top.frames.Video.location="bradley_wmhs.htm";
top.frames.Selector.location="selector_bradley.htm "; }
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="submenu.jpg" width="297" height="480" border="0"
usemap="#Map">
<map name="Map">
<area shape="rect" coords="172,7,285,30" href="javascript:"
onClick="update1()" alt="Main Video">
<area shape="rect" coords="27,166,283,248" href="javascript:"
onClick="update2()" alt="Annmarie Driessche">
<area shape="rect" coords="28,253,269,334" href="javascript:"
onClick="update3()" alt="Sandy Wilson">
<area shape="rect" coords="28,338,266,423" href="javascript:"
onClick="update4()" alt="Anne Marie Bradley">
<area shape="rect" coords="248,445,290,472"
href="http://www.maddash.net/videos/troubleshoot.htm" target="_blank"
alt="Help!">
</map>
</body>
</html>


Replace the double 'slanted' quotes here:

<script language="javascript">

....with HTML-standard 'curly' doubles. Helps get those functions
declared.

Also: add ------> return false;
as the final line in each 'update' function, and call them like so:

<area shape="rect" coords="172,7,285,30" href="some_url"
target="_blank"
onclick="return update1()" alt="Main Video">

'some_url' should download a meaningful page of some sort for those
with JS disabled.

Jul 23 '05 #5

P: n/a
RobB wrote:
he************@gmail.com wrote:

<--snip-->
<script language="javascript">


<--snip-->
Replace the double 'slanted' quotes here:

<script language="javascript">

....with HTML-standard 'curly' doubles. Helps get those functions
declared.


No, stop using the language attribute and use the type attribute instead:

<script type="text/javascript">
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #6

P: n/a
Ivo
"RobB" wrote
he************@gmail.com wrote


Hi, I took all and more tips together in th following code. You 'll note
that there is only one function update(), which takes the link as parameter.
All links are hardcoded in the HTML for the js-less, and converted to the
appropriate url's in the javascript. This is possible thanks to your already
consistent naming scheme.

<html><head><title>Oakwood</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function update(s) { s=s.href;
top.frames.Video.location.href=s;
top.frames.Select.location.href=s.replace( /(\w+)_wmhs/, 'selector_$1' );
return false;
}

</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="submenu.jpg" width="297" height="480" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="172,7,285,30" href="oakwood_wmhs.htm"
onclick="return update(this);" target="Video" alt="Main Video">
<area shape="rect" coords="27,166,283,248" href="driessche_wmhs.htm"
onclick="return update(this);" target="Video" alt="Annmarie Driessche">
<area shape="rect" coords="28,253,269,334" href="wilson_wmhs.htm"
onclick="return update(this);" target="Video" alt="Sandy Wilson">
<area shape="rect" coords="28,338,266,423" href="bradley_wmhs.htm"
onclick="return update(this);" target="Video" alt="Anne Marie Bradley">
<area shape="rect" coords="248,445,290,472"
href="/videos/troubleshoot.htm" target="_blank" alt="Help!">
</map>
</body>
</html>

--
Ivo


Jul 23 '05 #7

P: n/a
DU
he************@gmail.com wrote:
I am in no way a scripter/programmer of any kind but I am in charge of
a number of online videos. Anyway I need help debugging my javascript
which has been pieced together from several other posts/people in
relation to the topic of reloading two frames from a link in a image
map. Here is the code it doesn't work, Please Help!

You can check out the live page at

http://www.maddash.net/videos/oakwood

<html>
<head>
<title>Oakwood</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script language="javascript">
function update1() {
Top.Video.location="oakwood_wmhs.htm";
Top.Selector.location="selector_oakwood.htm"; }

I suggest you use this form (for better cross-browser support) rather:

function update1() {
top.frames["Video"].location.href = "oakwood_wmhs.htm";
top.frames["Selector"].location.href = "selector_oakwood.htm"; }

Note that it's top, not Top.
function update2() {
Top.Video.location="driessche_wmhs.htm";
Top.Selector.location="selector_driessche.htm"; }

function update3() {
Top.Video.location="wilson_wmhs.htm";
Top.Selector.location="selector_wilson.htm"; }

function update4() {
Top.Video.location="bradley_wmhs.htm";
Top.Selector.location="selector_bradley.htm"; }
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" are all
non-standard. If you really want your frame to have no margins, then use
the proper attributes (marginwidth marginheight) on the frame:
http://www.w3.org/TR/html4/present/f...f-marginheight
http://www.w3.org/TR/html4/present/f...ef-marginwidth
and define a css rule for the body node in the framed document.
<img src="submenu.jpg" width="297" height="480" border="0"
usemap="#Map">
<map name="Map">
<area shape="rect" coords="172,7,285,30"
href="javascript:onClick=update1();" alt="Main Video">


Do not use href="javascript:onClick=update1();": this does not make
really any sense.
I suggest you avoid an image map for this and use real HTML buttons.

<button type="button" onclick="update1();">View main video</button>

otherwise, at least, use the onclick event handler and the nohref
attribute accordingly
http://www.w3.org/TR/html4/struct/ob...ml#adef-nohref

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)
Jul 23 '05 #8

P: n/a
Thanks! Everything is working except that I get a blank JavaScript
Console window when testing in Firefox 1.0.2. There are no errors but
after clearing the caches and restarting I still get a blank window

Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.