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.
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
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 …
window Object and Pop-up Windows
This script breaks a page out of another site's frames so your viewers aren't trapped in those frames.
This script will redirect a viewer to your main page if they load one of your interior pages without your frame navigation.
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
there is a function which moves through the pages automatically when the checkbox is checked. This is called automatically. Here is its code…
The function that moves the pages back in sequence is called retrace. Here is the code…
In our slide show, we have a function that moves the pages forwards in the sequence. It is called showPage(). Here it is…
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 window.open() 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
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 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: The Techniques
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…
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.
Exit Window (Source)
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…
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.
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.
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.
The third parameter of the window.open() 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
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
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.
The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag.
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?
To keep a page from getting stuck in a frame, include a simple if statement that tests to see if the parent…
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
Loading into two frames simultaneously
- 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
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
Resizing a 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...
A Frame object is created by using the HTML tag in a Window that contains the tag…
On this page I explain how to access and influence other frames.
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.
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
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.
WRITE ARTICLES FOR US & FREE PROMOTION OF YOUR GRAPHIC DESIGN BUSINESS
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. AllGraphicDesign.com 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
Graphic Design Menu
US YOUR HOMEPAGE
UP FOR NEWSLETTER ::
YOUR PORTFOLIO FREE ::
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
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
and software are the copyrighted works of Allfreelance, ©
2003 - 2019 QuinStreet, Inc.