|
Back
To JavaScript Index
Using IFRAME To
Put
A Page Within A Layer.
|
This simple script technique can be used to insert an external page into a
layer in your current page -- a great way to include
extra content, especially in crowded pages. Using links
within the "iframed" pages, you can literally include a
whole secondary content vehicle or mini-website. Since NS6-7 and
IE both now fully support the IFRAME tag, this is now a viable
alternative for content inclusion. (Note that IFRAME is
ignored by NS4 and prior.) |
| . |
|
Instructions
. |
| Insert
the code snippet shown below in your page. Because it is
captured in a positioned layer, it does not matter where --
anywhere between <body> and </body>. Usually,
the best place will be just before the </body> tag.
Change the
SRC= to reflect the address of the page that you want to
show. Usually, best policy is to use the full http:// path
to the page; though relative paths can be used, too.
Adjust the
size by setting *both* the WIDTH= and HEIGHT= in the <IFRAME>
and the width, height, and clip rect(...) in the <DIV>
style. Colors and borders, etc., can be adjusted in the
styles to suit your design.
Position
the layer in your page by setting the left: and top: in the STYLE.
. |
|
The
Code
. |
|
|
Click here to select the code in the window above.
Use Control-C to copy it to your system clipboard.
|
|
.
|
Demo
.
The blue-framed content below is a sample of this technique
in use. (We have the layer floating over some background lorem
ipsum text.) Try clicking on the links within the layer to
see how it behaves.
.
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse placerat elementum velit. Aliquam quis urna. Aenean augue wisi, sollicitudin a, aliquam quis, bibendum nec, arcu. Morbi facilisis. Mauris tempor, nunc non interdum convallis, magna neque condimentum lorem, sit amet congue arcu nunc eget ipsum. In ultrices. Duis elit sem, vehicula non, posuere eu, venenatis et, turpis. Maecenas a urna. Quisque erat lectus, bibendum nec, vestibulum vel, molestie vel, enim. Nulla in dui id arcu venenatis elementum. In hac habitasse platea dictumst. Etiam scelerisque, felis ut lobortis iaculis, nibh elit accumsan nulla, eu vehicula libero mauris eget erat. Integer venenatis nisl id tortor. In et odio. Phasellus rhoncus nonummy turpis. Donec dignissim vestibulum nulla. Donec sed pede vitae arcu aliquet mattis. Nam hendrerit justo vitae quam. Praesent eget dui vel est placerat tempor. Nam tincidunt sem vulputate eros.
Aliquam convallis. Nam venenatis commodo tortor. Phasellus vitae mauris nec mi tempor dignissim. Donec tincidunt. Maecenas auctor arcu non augue. Vestibulum justo elit, commodo nec, molestie sit amet, ultrices eu, dolor. Duis ullamcorper. Mauris lacinia convallis urna. Duis lacus eros, lacinia id, tristique laoreet, feugiat non, enim. Fusce non dolor. In dictum sollicitudin mauris. Donec ligula lectus, consectetuer ac, aliquam posuere, euismod in, erat. Etiam sapien. Suspendisse lobortis. Sed eleifend quam in
tortor.
|
[ Return
to JavaScript Index ]
|
