JavaScript Franes Select Problems

J

jascraig

Here's my dilemma. I'm working with a frameset with 3 frames
(header,content,control). My control frame contains a select list with
buttons for next and previous. When the next button is pushed the
select list moves to the next option and the content frame changes to
the next URL, and a page number is updated on the header. The code I
have now works great on NS 7 and FF1. When I test it in IE, the select
box updates then immediately resets to index 0. Has anyone come upon
this.
Thanks,

Jason

Code follows:

Default Frameset:

function next(obj){
// Handle Next button event
var cnt = obj.pages.selectedIndex;
// If within the range of pages specified on the drop-down options
list,go to next page.
if(cnt < obj.pages.length-1){
cnt=eval(cnt+1);
obj.pages.selectedIndex=cnt;
content.location.href=control.url_list[cnt];
header.swapText(cnt+1);
alert(cnt);
}
// Else go to first page of next topic UNLESS the current topic is last
topic, in that case, alert user.
else {
alert("This is the last page of the topic area.");
}
}
// - End of Control Pad Script -->
</script>
</head>
<frameset rows = "115,*" cols = "*" border = "0">
<noframes>
<body><p>This topic requires a 4.0 browser with frames.</p></body>
</noframes>
<frame name = "header" src = "asdf_header.htm" scrolling="no"
frameborder = "0" />
<frameset name = "lower" rows = "*,30" cols = "*" border = "0">
<frame src = "asdf_01.htm" name = "content" frameborder = "0" />
<frame src = "asdf_control.htm" name = "control" scrolling = "NO"
frameborder = "0" marginwidth = "0" marginheight = "1" />
</frameset>

Control Page:

<body bgcolor="#CCCCCC"
onload="parent.header.setInitialPages(1,url_list.length);">
<form id="control_pad" action="" name="control_pad">
<center>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr valign="top" align="left">
<td height="27" width="62"><a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Exit','','../../u_images/exitOver.gif',1)"><input
type = "image" src="../../u_images/exit.gif" alt="Exit" name="Exit"
width="62" height="27" border="0" onclick="top.window.closeWindow()"
/></a></td>
<td height="27" width="110"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Feedback','','../../u_images/fbOver.gif',1)"><input
type = "image" src="../../u_images/fb.gif" alt="Feedback"
name="Feedback" width="110" height="27" border="0"
onclick="openFeedback()"></a></td>
<td height="27" width="107"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Glossary','','../../u_images/glossOver.gif',1)"><input
type="image" src="../../u_images/gloss.gif" alt="Glossary"
name="Glossary" width="107" height="27" border="0"
onclick="openGlossary()"></a></td>
<td height="25" width="200" bgcolor="#000099">
<select name="pages" size="1" onchange="go_to(this.form)">
<option value="asdf_01.htm">Introduction</option>
<option value="asdf_02.htm">Page 1</option>
<option value="asdf_03.htm">Page 2</option>
<option value="asdf_04.htm">Page 3</option>
<option value="asdf_05.htm">Page 4</option>
<option value="asdf_06.htm">Page 5</option>
<option value="asdf_n.htm">Summary</option>
</select>
</td>
<td height="27" width="111"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu','','../../u_images/menuOver.gif',1)"><input
type = "image" name = "Menu" src="../../u_images/menu.gif" onclick =
"openMenu()" width="111" height="27"></input></a></td>
<td height="27" width="80"><a href="#"><input type = "image" name =
"Back" src="../../u_images/back.gif" onclick = "prev(this.form)"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Back','','../../u_images/backOver.gif',1)"
width="80" height"></a></input></td>
<td height="27" width="83"><a href="javascript:next(this.form)"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Forward','','../../u_images/forwardOver.gif',1)"><input
type = "image" name ="Forward" src = "../../u_images/forward.gif"
width="83" height="27"></input></a></td>
</td>
</tr>
</table>
</form>
</body>
</html>
 
R

RobB

Here's my dilemma. I'm working with a frameset with 3 frames
(header,content,control). My control frame contains a select list with
buttons for next and previous. When the next button is pushed the
select list moves to the next option and the content frame changes to
the next URL, and a page number is updated on the header. The code I
have now works great on NS 7 and FF1. When I test it in IE, the select
box updates then immediately resets to index 0. Has anyone come upon
this.
Thanks,

Jason

Code follows:

Default Frameset:

function next(obj){
// Handle Next button event
var cnt = obj.pages.selectedIndex;
// If within the range of pages specified on the drop-down options
list,go to next page.
if(cnt < obj.pages.length-1){
cnt=eval(cnt+1);
obj.pages.selectedIndex=cnt;
content.location.href=control.url_list[cnt];
header.swapText(cnt+1);
alert(cnt);
}
// Else go to first page of next topic UNLESS the current topic is last
topic, in that case, alert user.
else {
alert("This is the last page of the topic area.");
}
}
// - End of Control Pad Script -->
</script>
</head>
<frameset rows = "115,*" cols = "*" border = "0">
<noframes>
<body><p>This topic requires a 4.0 browser with frames.</p></body>
</noframes>
<frame name = "header" src = "asdf_header.htm" scrolling="no"
frameborder = "0" />
<frameset name = "lower" rows = "*,30" cols = "*" border = "0">
<frame src = "asdf_01.htm" name = "content" frameborder = "0" />
<frame src = "asdf_control.htm" name = "control" scrolling = "NO"
frameborder = "0" marginwidth = "0" marginheight = "1" />
</frameset>

Control Page:

<body bgcolor="#CCCCCC"
onload="parent.header.setInitialPages(1,url_list.length);">
<form id="control_pad" action="" name="control_pad">
<center>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr valign="top" align="left">
<td height="27" width="62"><a href="#" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Exit','','../../u_images/exitOver.gif',1)"><input
type = "image" src="../../u_images/exit.gif" alt="Exit" name="Exit"
width="62" height="27" border="0" onclick="top.window.closeWindow()"
/></a></td>
<td height="27" width="110"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Feedback','','../../u_images/fbOver.gif',1)"><input
type = "image" src="../../u_images/fb.gif" alt="Feedback"
name="Feedback" width="110" height="27" border="0"
onclick="openFeedback()"></a></td>
<td height="27" width="107"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Glossary','','../../u_images/glossOver.gif',1)"><input
type="image" src="../../u_images/gloss.gif" alt="Glossary"
name="Glossary" width="107" height="27" border="0"
onclick="openGlossary()"></a></td>
<td height="25" width="200" bgcolor="#000099">
<select name="pages" size="1" onchange="go_to(this.form)">
<option value="asdf_01.htm">Introduction</option>
<option value="asdf_02.htm">Page 1</option>
<option value="asdf_03.htm">Page 2</option>
<option value="asdf_04.htm">Page 3</option>
<option value="asdf_05.htm">Page 4</option>
<option value="asdf_06.htm">Page 5</option>
<option value="asdf_n.htm">Summary</option>
</select>
</td>
<td height="27" width="111"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Menu','','../../u_images/menuOver.gif',1)"><input
type = "image" name = "Menu" src="../../u_images/menu.gif" onclick =
"openMenu()" width="111" height="27"></input></a></td>
<td height="27" width="80"><a href="#"><input type = "image" name=
"Back" src="../../u_images/back.gif" onclick = "prev(this.form)"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Back','','../../u_images/backOver.gif',1)"
width="80" height"></a></input></td>
<td height="27" width="83"><a href="javascript:next(this.form)"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Forward','','../../u_images/forwardOver.gif',1)"><input
type = "image" name ="Forward" src = "../../u_images/forward.gif"
width="83" height="27"></input></a></td>
</td>
</tr>
</table>
</form>
</body>
</html>
Click to expand...

Surprised that it works anywhere, as you've referenced 'this.form'
within that link's href (<a href="javascript:next(this.form)"..). As JS
urls execute with global scope and there (presumably) is no global
'form' property it should fail. iirc it's IE that applies a form's
scope chain to non-form elements nested inside a form. Whatever. The
reset of the listbox is probably a result of the (re-)loading of the
page as a side effect of that link. Try:

<td height="27" width="83"><a href="#" onclick="return
next(document.control_pad)"...

....and add 'return false;' to your next() function.

<input> is a singlet tag, no closing </input>.

Pointless: cnt=eval(cnt+1);
 
J

jascraig

That's the fix. Thanks. I was modifying outdated code, and I'm a Java
guy, not JavaScript.

Appreciate it.
 

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

Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image shifts to the right when export the page to pdf 4
How do I fix this issue in sqaurespace code block? 1
Multi select options in a menu 1
Help with my responsive home page 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

Total: 43 (members: 1, guests: 42)
Robots: 467

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top