Tutorials » Javascript » Using iFrames



Code It

The first thing you have to do is setup the code on the page where you want the iframe.

Select All


I'll list all the attibutes and what they do so you can keep or change them.
  • src = This is the where you place the URL of the page you want inside the iframe. It can't be identical to your home page, because the point of an iframe is to show a different page on your home page.
  • frameborder = Pretty self explanitory. If you want a border on your iframe, you can type in 1-20. If not, leave it as 0. The border will be beveled, so if you just want it flat, you'll have to place it on top of a picture with a frame.
  • width = This is where you place what length you want your iframe to be in pixels. There are no limits, but I would suggest not going over 800, since some people's screens don't go over that.
  • height = This is where you place what height you want your frame to be in pixels. Again, there are no limits, but I would suggest not going over 600, for the same reason. You dont want your frame to cover the entire page.
  • name = You can name your iframe whatever you want, but you have to make sure you remember it for a few other codes you'll be using in near future (ex. frame01).
  • scrolling = If you want scrollbars on your iframe, keep it on auto. If you don't want them, change it to "no".
  • marginwidth and marginheight = If you want some space between the text inside your frame and the border or edge, add a few pixels of these. I wouldn't go above 10.
  • hspace and vspace = Horizontal and vertical space will add white space to the outside of your iframe.
Once you've finished editing the code, now you need to put it...


Place It


...in the correct place. Hopefully you work with div layers. I'm not too familiar with any other layout setup. Positioning is everything, so depending on where you want it, you should have it in it's own div layer. Divs look a little like this:

<div style="position:absolute;top:0;left:0;">text text text</div>

All you have to do is add pixel amounts to the top and left to put the frame anywhere on your page you want it. Just make sure where the frame is placed leaves enough room for everyone to see the entire page. You don't want people scrolling the main page left to right. That gets annoying.


Picture It


If your layout has a graphic in the background, or as the background, you'll need to do a few more steps to get it in the right position. First you need to actually place your graphic on the page. What I would do to make life easier is to put the graphic in its own div layer, close to your iframe's div layer. Like this...

<div style="position:absolute;top:0;left:0;"><img src=""></div>
<div style="position:absolute;top:0;left:0;"><iframe code></div>

Than all you have to do is find out where your iframe needs to go on your graphic - which is easy. Using PSP7, all you have to do is click on the graphic. In the lower left-hand corner of your screen you will see the statistics bar. It changes when you move your mouse over the graphic. This gives you the exact dimentions you need. Follow these iframe steps:
  1. Determine where on the graphic you want your iframe to be. Make sure you will be able to read the text where it is.
  2. Select the Selection tool and outline where you want your iframe to be, but do NOT release your mouse when you have outlined the entire thing.
  3. Copy down the dimentions from the statistics bar where is says (00,00) -> (00,00). All you really need is the first set, though.
  4. Hopefully you still have the place on the graphic where you want the iframe outlined with the selection tool. You now need to press these on your keyboard in this order: (1) Ctrl+C (2) Ctrl+V (3) Shift+I. A new box will pop up with just the place you want your iframe in it.
  5. Look at the Image Dimentions. You'll see 000x000. The first is the width, second is the height. Jot these down, too.
When you're done with that, you need to come back to the code and change the width and height of your iframe code to match the width and height you wrote down.

View your page so far. Where is your graphic on the page? Find out by Print Screening the window. While viewing your page, click Print Screen SysRq + Alt on your keyboard. Go into Paint or Paint Shop Pro and press Ctrl+V. An image of your window will come up. The same way you found the dimentions of the place you wanted your iframe, find your graphic. Click on the picture below to see how it's done.



Then go to the div layer of your iframe. Replace the top and left alignments of the iframe code with the (00,00) stats of what you just did (step 6 on the image above) PLUS the (00,00) stats you got before (step 3 of iframe steps). The first "00" is left, the second "00" is top. Here is an example iframe layout I made to show you what I mean.




Clear It


If you have an image in the background like above, and you want to make the iframe transparent instead of the background color it is, you just need to slip in a few codes. Code #1 is for the iframe code. Place it in with the other attibutes. Code #2 is for the page that you have in your iframe. It goes inside your first <body> tag as an attribute.

#1


#2



Know It


When you make an iframe, you have to know what you're doing. Hopefully this tutorial has helped you out in that area. If you're still having trouble, check out the Wiki page.

 
 

All content copyright their respective owners. No copyright infringement is intended, and no money is being made.