Dynamic Drive DHTML Scripts- Floating iFrame

IE5+

Floating iFrame

Author: Dynamic Drive

Description: IFRAMEs are loved for their versatility in displaying any external content on the page painlessly. Well, this cool script creates a floating iframe, so it stays static and always in view even when the page is scrolled. Display content from a separate page prominently using it, whether it's a menu, important news, or an image. Furthermore, we did all the Math for you in easily displaying the iFRAME at any one of the four corners of the page. Note that this script is only visible in IE5+ and Opera 7+. A bug in NS6+ causing iframes to not follow the page disables the script from appearing in it.

Enjoy!

Demo: To your left IE5+/Opera 7+ users!

Directions:

Simply insert the below code in the <BODY> section of your page, and change the variables inside script as explained by the comments:

Select All
<script type="text/javascript"> /*********************************************** * Floating Iframe script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * Please keep this notice intact ***********************************************/ //Specify iframe to display. Change src and other attributes except "position" and "left/top": var iframetag='<iframe id="masterdiv" src="whatever.htm" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -500px; top: -500px;"></iframe>' //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")): var masterdivleft="10px" //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")): var masterdivtop="bottom" var ie=(document.all || window.opera) && document.getElementById var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body if (ie) document.write(iframetag) function positionit(){ masterdivobj=document.getElementById("masterdiv") var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20 window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight var dsocleft=ie? iebody.scrollLeft : pageXOffset var masterdivwidth=masterdivobj.width masterdivheight=masterdivobj.height masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft setInterval("repositionit()", 100) } function repositionit(){ if (ie){ dsoctop=ie? iebody.scrollTop : pageYOffset masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop } } if (window.attachEvent) window.attachEvent("onload", positionit) </script>

Now, you may wish to create a link somewhere inside the iframe that dismisses the iframe when clicked on (as illustrated in the demo). Use a code like the following for this:

<script>
function closeiframe(){
parent.document.getElementById("masterdiv").style.display="none"
}
</script>

<a href="javascript:closeiframe()">Close iframe</a>

If you wish to display this link outside of the iframe, remove parent. from within the function above.

Enjoy!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post