Untitled

New Window Checkbox__________

This code will appear on your page as a little box that your visitor's can check if they want all of the links on that particular page to open in a new window. This is especially useful for layouts with Iframes, so visitors won't have to sidescroll whenever you have a lot of content.

Here are a few ideas of where a New Window option would come in handy:

Sections with Tutorials
Sections with Javascript Games
Sections with Surveys, Quizzes, and Polls

Now here's how you get it:

First you have to open up the page that you want the New Window box on. Let's say you're using it for your Tutorials section, and that your Tutorials section is named Tutorials.html. You'd open up Tutorials.html, and place this code between the HEAD and /HEAD sections on the page:

Next you place this code wherever you want the New Window option to actually appear. It will be somewhere between the BODY and /BODY tags of your page:

**Note: You can align your New Window box anywhere you want, just add<p align="left">, <p align="right">, or <p align="center"> before the code, and then close it after the code by using </left>, </right>, or </center>If you want to place your code in an EXACT location on your page (i.e.: 100 pixels from the left, and 10 pixels from the top), then you will have to place your code inside a DIV tag. See my DIV tutorial for more information :)

Now the only thing you have left to do is edit the code. Where you see NEW WINDOW? make sure you change it to whatever you want it to say (the text will appear to the right of the box).

Now there's one more cool part to this tutorial. These boxes can actually be COMPLETELY customized to fit your site. You can change the border color, border width, border style, and background color! You can do this by using the same method to change a text area, which is known as CSS.

Here is a sample of the code that you would put between the HEAD and /HEAD tags of your page (before the first part of your New Window box code):

<style type="text/css">  </style> Wow, that looks confusing huh? It's really not. I'll try and break it down for you as best as I can.

Now the first thing to remember is NOT to remove the "input, textarea" that you see first. There are many things you can customize using CSS, and that "input, textarea" tells the style sheet that everything that is in a textarea or an input form should follow such and such a format. That way it won't effect the overall look of your page, just your inputs and text areas. Since the second part of the New Window box code began with < input type= "checkbox" >, it shows that it is an input and that it can be customized. If you're using CSS on your page already, then you only have to copy and paste the "input, textarea" part and everything within the brackets, and then place it either before or after the CSS codes that you already have. Now here's what each part of the code means:

Background: Background is where you would put the background color you want for your box. You may also enter the URL of an image that you want to have in the background, or you may enter "Transparent", if you want the box to look like your background color/image that you already have.
Font Family: Here you can enter the name of a font for your text that will appear next to the window box, that is if you want it different from the main font already being used on your page. You cannot change the font of anything that will be inside the New Window box, because all that appears is a checkmark
Color: Same thing as above, only the color of the font. Checkmark color cannot be changed either
Border-Style: This is where you enter what style of border you would like to have. You can enter one option, and you can choose between: "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset". Each of them can make your New Window box look very cool :) You don't have to keep the quotation marks around them either
Border Color: Enter what color you want the border around your box to be. It's recommended that it's different from the background color, otherwise you won't see a difference.
Border Width: Here is where you enter any numerical value, and after it add "px". That stands for pixels. "1px" is the thinnest, and "10px" would be the thickest.

The CSS is completely optional, but I thought I'd provide it anyway for those of you who are picky, like me :P. The main thing to remember about this whole tutorial is that everything, the CSS, the first part of the code, and the second part of the code, must all go onto the SAME page (and that page is whatever you want the new window box on). I've seen so many mistakes where people put the first part of their code (along with the CSS) onto their index or main page, and then the second part of the code onto the page where they want the New Window box. That won't work! It would only be okay if you had one page all together.

For those of you who are still confused, click here to see an example image of what everything will look like together.

Hosted by www.Geocities.ws