U sing a tabbed interface, this DHTML script lets you display external web pages inline on your page, with the help of the IFRAME tag. [ Dynamic Drive ] threw in a feature that allows the user to also load the webpage in the entire browser window when desired. This script works in IE5+ and NS6+, and degrades well with the rest (as tabs are simply regular links).
W e have tested the code in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with one variation observed in Firefox1.5.0.1, Netscape7.02 and Netscape8.0.4. This variation did not have any adverse effect of the effect itself.
The variation was that when you select "Yahoo!", it appears that the page is on a black background instead of the white which is defined in its source. Reason being is that we have our page defined as black and somehow this reflects when it goes to Yahoo! To see what we are explaining, grab the below link for a screen capture of this variation;
[ Variation In Netscape and FireFox ]
Workaround: All we can say is that if you do not want this slight variation, have this effect sit on a white or light colored page as opposed to a dark one such as this.
D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document.
<Head> Section (CSS Style Sheet) Reconfigurations
|
<style type="text/css"> |
|
T
he CSS <style> </style> sheet (to the left) is the only reconfiguration within the <HEAD> section you need to be concerned with. Just play around with the color coded parts until it fits the look and feel of your site. These configurations are just for the tabs above the IFrame, nothing else.T he next part is basically self-explained. This is where you enter your URL's(links) to call. you can add as many as you want but remember that the page is only so wide and can only hold so many tabs.
<BODY> Section (URL-Link) Reconfigurations
<ul id="tablist">
<li><a class="current" href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
<li><a href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
<li><a href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
<li><a href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
<li><a href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
</ul>
Y
ou can add more than the default amount of links by following the pattern and be sure to enter each new link before the closing </ul> tag. In other words add the below section of code before the closing </ul> tag.
<li><a href="URL Goes Here" onClick="return handlelink(this)">Link Name Here</a></li>
For your Information: If you have lots of tab links, you can get them to appear on separate lines, by adding a divider as seen below:
|
<ul id="tablist"> |
J ust add the below code wherever you want the break to be with the tabs.
<div style="margin-bottom: 8px"></div>
# This is where you would replace the # with the link address.
T he final part of the <BODY> reconfigurations is to decide which of the links you want to appear as the page opens. In other words when someone opens your page, which page will be seen inside the IFrame. We have our set for Google. Also you can reconfigure here the width and height of the IFrame itself.
</ul>
<iframe id="tabiframe" src="URL Goes Here" width="98%"* height="350px"></iframe>
* Notice in the above the use of the % for the width. Reason being is quite simple. Not everyone's monitor is the same size, therefore by using the % as opposed to a defined px size (as seen in the height), the effect will appear to be the same width (relatively) in all size monitors.
W
e have one other effect very similar to this but instead of using "Tabs", it uses a "Drop-down Menu". If you would like to see that effect, grab the below link and you are there.
[ Drop-Down Document Viewer ]
W
e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]