Javascript Windows Tutorials: Frames Tutorials: Opening Windows, Closing Windows, Closing Frames Script, Opening in Frames New Windows
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs


Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.

AddThis Social Bookmark Button

Search Design Schools

Zip Code:



Online Campus Both

home > Web Design Tutorials > Programming Tutorials > Javascripting Articles > Javascript Frames & Windows Coding Tutorials

ARTICLES & TUTORIALS FOR WINDOWS & FRAMES in JAVASCRIPT: Learn about Javascript Development with Frames & Windows, including OnMouseOver Popup Windows, Opening or Closing a New Window, Drop Boxes & Frames, Frame Breakers, Frame Redirectors, and more.

JavaScript Window Object
In this tutorial you learn JavaScript Window Object...

JavaScript Frame Object
In this tutorial you learn JavaScript Frame Object…

Window Methods
In this installment we are going to take a look at the methods that are associated with the window object.

Window Object Event Handlers
In this installment, we'll wrap up our study of the window object by learning how to use the most common of the window event handlers. We'll also take a look at some links for additional help.

Opening Windows with JavaScript
One of the most useful (and quite possibly the most abused) features of JavaScript is its ability to manipulate browser windows…

OnMouseOver Pop-up Window
This next example causes another window to popup when your mouse goes over the image. This window is a standard web page, you can designate the demensions as well.

Opening a New Window
To open a new window, you will need to use yet another ready-made JavaScript function. Here is what it looks like…

Changing 2 Frames at Once
You want to change more than one frame at a time? OK, well here is how to do make the trick work for you. The first thing you will need is a frameset to get you started. Again, I will use a frameset with two frames. Here is the code for the frameset page.

Drop Boxes and Frames
Learn using drop boxes with frames …

Frames and JavaScript
JavaScript and Frames. Frames and JavaScript. Sounds like a mess doesn't it? Well, it does make things a bit more complicated. Let's see if we can figure out how to get those frames to work with our scripts.

window Object and Pop-up Windows
In this last lesson we will talk briefly about the most top level object in JavaScript hierarchy which of course is the window Object. The section concerning pop-up windows is not complete yet but I do provied a link to a page on my JavaScript Corral Site

Frame Breaker
This script breaks a page out of another site's frames so your viewers aren't trapped in those frames.

Frame Redirector
This script will redirect a viewer to your main page if they load one of your interior pages without your frame navigation.


New Window
This script will open a new window when a viewer clicks on the link.

New Window with Button
This script will open a new window when a viewer clicks on the button.

New Window on Image Click
This script will open a new window when a viewer clicks on the linked image.

Multiple New Windows
This script will allow you to open as many links as you want to in a new window of their own.

Working With Windows
In this section, we'll learn how to make a pop-up window.

How to Make Windows
How to Make Windows without any carpentry knowledge at all…

How to write to windows
How to write to windows and close them from the file you started with…

How to Use Hyperlinks in New Windows
Learn how to Use Hyperlinks in New Windows…

Frames in Java Script
This page deals with loading pages in their proper parent, the frame buster code, and loading orphan pages in their proper frames.

Hyperlinks in Frames
We have looked at menus and jumps from page to page, but we have not looked at menus in frames. The first example…

More on Frames
Frames can be useful and on other occasions they can be a nuisance. Many hate frames, and others love them and make all sorts of complex frames in one page. In this lesson we will look at…

Loading Orphan Pages in Their Frame
You can load stray pages into their frames by using this code. First put the function in the frameset page below in your frameset page, changing the name of the frame where you want to load the page to one suiting your own page (change "lowerPage"). Call

A slide show with JavaScript using Frames
there is a function which moves through the pages automatically when the checkbox is checked. This is called automatically. Here is its code…

A slide show with JavaScript using Frames
The function that moves the pages back in sequence is called retrace. Here is the code…

A slide show with JavaScript using Frames
In our slide show, we have a function that moves the pages forwards in the sequence. It is called showPage(). Here it is…

A slide show with JavaScript using Frames
To sound of the trumpets and the roll of the drums, we present the JavaScript Slide Show. By clicking on the buttons below you can move the pages forwards or backwards. This is a very convenient way to present information. The navigation is always in fron

Keep in Frames Script
Use this script to ensure the visitor is viewing your page inside the intended frame setup…

Opens a new browser with the specified width, height and windows features (e.g. toolbar, menu bar, scrollbar and location bar). Useful wrapper script over the method.

Keep Page In Frames Script
Now and then people get to a page which needs to be kept in a frame. This script keeps pages which need to be in a frame in it.

Break Out of Frames
This script uses a link to break out of frames. You place the code where you want it to appear on your page and once clicked it will break the page out of any frames. If the page is shown outside of a frame the link will disappear.

Keep Page Out of Frames Script
Many times people will link to your site and keep your pages within their own frames so that the surfer can get back to their own page. This script prevents that from occuring.

Opening New Windows
This is the first of two primers on opening a new window. This first primer will deal with the JavaScript commands you would use to open a new window. The new window will display a second HTML document.

Opening a Window with a Function
Here, we're going to create a new window function where the new window and all of its contents will be carried along in the same HTML document. It is literally the equivalent of two pages in one.

Frameset Scripts
Javascript can be a powerful addition to frames pages. One of the biggest disadvantages of frame based websites has been that you could not refer to your subpages, unless you wanted the visitor to open it oustside the frameset.

Frameset Script: The Techniques
This script ensures that subpages aren't loaded outside a frameset…

Frameset Script: The Code
As mentioned on the previous page, you need to enter a small script in the section of both your subpages and your frameset page.

Frameset Script: Examples
To let you try out the scripts we produced a sample page. It consists of four files...

Popup Windows
If you want a link to open a document in a new regular window you should not use javascript to do so.

Popup Windows: The Techniques
JavaScript has built-in methods for opening and closing windows…

Popup Windows: The Code
When working with popup windows, three different techniques are relevant…

Popup Windows: Examples
This is a ready to use script that will allow you to easily open new windows on your pages…

Javascript Windows & Frames Tutorials - Online Tools & Popup Windows
This tool will let you easily create links that pop up in new customized windows. You can control which menus and buttons should be present, as well as, the positioning of the new window.

Opening Windows with JavaScript
One of the most useful (and quite possibly the most abused) features of JavaScript is its ability to manipulate browser windows….

Exit Window (Source)
Here is the source code for the Exit Window JavaScript. You should have seen the JavaScript effect when you followed the link here - the new window.

New Window
Do you have a link that you'd rather have open in a new window? This little script will do just that! You can even use a button or a text link to open the new window…

Javascript Windows & Frames Tutorials - Boinger Window
Launches a popup window that continually switches back and forth between two settable sizes. The cycle time and location are settable and may switch back and forth in the timing cycle.

Javascript Windows & Frames Tutorials - Window Resize
View your Web pages in different size windows. This script will open a new, resized window using the measurements (in pixels) you choose. Small but effective.


Window Position
Do you not where opens your new windows? Using this JavaScript, you can actually have the new window open wherever you want! Look at our example to see what we mean…

Javascript Windows & Frames Tutorials - Window Sizer
This is a JavaScript that shows you different window dimensions. It helps you to customize your web pages with the dimensions that best compliment your web site.

Window Manipulation in JavaScript
While opening windows in HTML is very handy, it's also limiting; the Web browser controls how the window looks. You have no control over the size of the window or what the window looks like. Happily, JavaScript gives you this control.

Examples of Opening Windows with JavaScript
Try clicking on these three links and see what happens. Don't close any of the windows until you've clicked on all three links.

Windows Features
The third parameter of the method is a list of features that you'd like your window to have. As you've seen, if you don't include this parameter at all, the window will contain all the features of a default browser window.

Communicating between Windows
Although it doesn't make sense to blur or focus the window you're on, you might well want to move another window to the fore. In order to communicate with a window using JavaScript, you need a reference to that window…

Getting Framed
We'll see in this lesson relate to frames and how to use them with JavaScript.

No Frames
This script is very important for you, if you have problems protecting your own pages and their content. People will just link your page in a frameset and make it seem that it is their own work. To break out of their frameset we use the following script.

blur() and focus()
These two methods are used for focusing in windows. The blur() method moves the window to the background, behind the main window. The focus() method moves the window to the foreground, on top of the others ("bringing it into focus").

This method is used for opening a new window. It takes three parameters: the URL of the file to be opened, the name of the window (for reference) and the attributes to be used in the new window…

This method is used to move a window to a new location on the screen. The window is "moved by" the number of pixels given within the parameters in the method.

This method is used to determine the distance, in pixels, that the document will scroll in a window.

Window Object Event Handlers
An event handler is a JavaScript keyword that allows a script to perform certain functions based on events on a Web page.

This event handler is used to execute a script before the page in the browser is exited. This usually happens when a visitor attempts to leave the current page.

Javascript Windows & Frames Tutorials - Javascript Popups
The function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag.

Javascript Windows & Frames Tutorials - Opening New Windows with the Method
Using the open method of the window object to open new windows gives us control over a new window's properties that we didn't have with HTML.

Working with Sub Window Properties
Loading Multiple Documents into the Same Pop Up Window…

Writing Dynamic Content to a New Window
This script not only opens a new window, it dynamically writes the HTML to the document contained in the window. Notice the first parameter of the open method in the example below. We are not specifying a file name.

Closing Windows and Confirmation Boxes
Ever notice how a script that attempts to close a window will at times generate a confirmation and other times not?

JavaScript's Frame Path
JavaScript treats each frame as a separate window, so you have as much control over an individual page within a frameset as you would with a regular window.

Javascript Windows & Frames Tutorials - Un-Frame Me
To keep a page from getting stuck in a frame, include a simple if statement that tests to see if the parent…

Javascript Windows & Frames Tutorials - Creating or Opening New Windows (pop-up) in JavaScript
If you completed the assignments in the previous session you know how to open new windows. Like the alert() method, the open() also takes arguments. When used without any arguments, the new window displayed is blank. Here I tell you how to embellish this

Windows and on-the-fly documents
Opening new browser windows is a great feature of JavaScript…

An often asked question is how frames and JavaScript work together. First I want to explain what frames are and what they can be used for…

Loading into two frames simultaneously
Do you know that using some simple JavaScript function you can load different pages into different frames simulteneously if those frames are located on the same page.

Javascript Windows & Frames Tutorials - New window properties
In this tutorial I will show how to specify different parameters for a new window to open. In JavaScript there is a standart function called open, that has three arguments…

- Window scrolling
If you are making the chat application, this tutorial is very useful You can show exactly the last entry on the page.

The Window Object
The window object represents the browser window the document is being displayed in. It contains information about both the display window and the browser displaying the document…

Working with Frames
A frame is a window within a window. Using frames allows you to divide a browser window into a collection of panes. Each pane can then be used to display a separate document.

Working with Windows
JavaScript also allows you to write code that works between windows.

The new window methods
With the help of 6 new window methods, moving, scrolling, and resizing a window programmatically becomes trivial a task. These new methods are…

Moving a window
JavaScript allows you to move a window either relatively…

Javascript Windows & Frames Tutorials - Scrolling a window
Same concept, just different actions. The new scrollBy() and scrollTo() methods of JavaScript1.2 allow you to programmatically scroll the window either up-down, left-right, or both.

Resizing a window
Same concept again, different action again. The new resizeBy() and resizeBy() methods of JavaScript1.2 allow you to programmatically resize the window.

How to access objects in one frame from another
The title may be a little ambiguous, but lets do an example to see what I mean by "cross-accessing" objects. Lets say we have a basic two-columned frame...

Using JavaScript to load multiple frames
So what good is it to cross-access objects, you ask? Well, one of the most popular uses of such is to load and change the content of more than one frame at one. Without JavaScript, there isn't a prayer. Lets say we have the following example…

A Frame object is created by using the HTML tag in a Window that contains the tag…

OBJECT: Window
As the top level object in the JavaScript client hierarchy, every browser window and frame has a corresponding Window object, created automatically with every instance of a or tag.

Javascript Windows & Frames Tutorials - Introduction to Frames
On this page I explain how to access and influence other frames.

Javascript Windows & Frames Tutorials - Popups
Sometimes it's useful to add a popup to your pages. When the user clicks on a link, a new window opens and displays a page.

Cross-window scripting
If you're using popups, inevitably the time comes when you want to call scripts in another window. This page explains the basics of cross-window JavaScripting.

Customized Framesets
This script helps you to create a frameset with a content page other than the homepage. When you write a static frameset, you force users to enter at your homepage. In my own site, I want people to be able to enter anywhere they want but nonetheless be in

Frame Busting
This page explains the difficulties with frame busting: that is, preventing that your page is caught in someone else's frameset.

On this page I give a short overview of accessing iframes from the page they’re on. Not surprisingly, there are some browser considerations.


AddThis Social Bookmark Button



We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here



Please click here to visit our sponsor

Graphic Design Menu


OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2019 QuinStreet, Inc.