Electric Type

Multimedia

About Us

News

Help

Changing Two Frames at Once
by Luke Knowland 17 Jan 1997


Page 1

Q:  I'm sure this question has been asked before, but I was wondering how I can make two frames change at the same time (with one click). I've seen it done here and there, but haven't had much luck finding any documentation.
- Lori M.

A:  You can change two frames at once with JavaScript. Don't worry, though, this isn't rocket science. It's simply a matter of telling the document with the link what it and the other document (the one the link points to) are going to do. It's pretty easy, really. Let's walk through it.

Imagine we have a page with two frames in it — one on the left and one on the right. We have a link in the left frame that we want to change both frames. In the document that fills the left frame, we'll pop this in:

<a href="zoinks.html"
onClick="window.self.location='raggy.html'" target="otherframe">
Zombies</a>

Let's break it down:

    <a href="zoinks.html"

This is the new document that will be loaded into the right-hand frame.

    onClick="window.self.location='raggy.html'" target="otherframe">Zombies</a>

Basically, onClick means "when you click this."

window.self.location refers to the window you're in during the onClick (the left-hand frame), which will be the host for raggy.html. The part of the script that changes the right frame is target="otherframe">Zombies</a>, which targets otherframe to be the host for zoinks.html.

(Make sure you follow the hierarchy of quotes and spaces exactly when using JavaScript.)

It's also important that you name the right side of the page otherframe (or whatever you call your target) in the document where you call the frameset. Otherwise zoinks.html won't end up in the right place. If you don't know what I'm talking about, check out Jill's column on targeting frames.

If you've done everything properly, you should be able to click on the word "Zombies" in the left frame, and zoinks.html will show up in the right frame at the same time that raggy.html shows up in the left frame.

The only caveat here is that not everyone can see JavaScript. This particular gem holds up in Netscape Navigator 2.x, 3.x, 4.x, and Microsoft Internet Explorer 3.x.


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.