Docked Panel Javascript

Javascripts > Misc Javascripts > Docked Panel

Script Title: Docked Panel

Description: This script allows you to easily create a panel that always remains visible in a predefined position. It can be useful for ads or navigation bars.

Example: Available

Copy the following code into your <HEAD></HEAD> tags.

<SCRIPT LANGUAGE="JavaScript"> var avCollections={ Panels: [] }; var avConstants={ BorderLeft: "1px solid buttonhighlight", BorderTop: "1px solid buttonhighlight", BorderRight: "1px solid buttonshadow", BorderBottom: "1px solid buttonshadow", BackgroundColor: "buttonface", TextColor: "black" }; var avTemplates={ Header01: '<DIV ID="', Header02: '" ONMOUSEENTER="avHandlers.Expand(this);" ONMOUSELEAVE="avHandlers.Collapse(this);" STYLE="position: absolute; top: 0px; left: 0px; border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; background-color: buttonface; color: black; font-family: Verdana, Arial, Helvetica; font-size: 8pt; padding: 2px; overflow: hidden; width: ', Header03: '; height: ', Header04: ';">', Footer01: '</DIV>' }; var avHandlers={ GetPanelObject: function(_el) { for(var i=0;i<avCollections.Panels.length;i++) { if(avCollections.Panels[i].id==_el.id) return avCollections.Panels[i]; } return null; }, EnsurePosition: function() { var i; var el; for(i=0;i<avCollections.Panels.length;i++) { el=document.getElementById(avCollections.Panels[i].id); el.style.left=document.body.clientWidth-el.offsetWidth+document.body.scrollLeft; el.style.top=document.body.scrollTop; } }, Expand: function(_el) { var pnl=avHandlers.GetPanelObject(_el); if(_el.scrollHeight>parseInt(_el.style.height)+1) _el.style.height=_el.scrollHeight+2; if(_el.scrollWidth>parseInt(_el.style.width)+1) _el.style.width=_el.scrollWidth+2; if(parseInt(_el.style.height)>pnl.maxheight) _el.style.height=pnl.maxheight; if(parseInt(_el.style.width)>pnl.maxwidth) _el.style.width=pnl.maxwidth; _el.style.overflow="auto"; avHandlers.EnsurePosition(); }, Collapse: function(_el) { var pnl=avHandlers.GetPanelObject(_el); _el.style.height=pnl.defheight; _el.style.width=pnl.defwidth; _el.style.overflow="hidden"; avHandlers.EnsurePosition(); } }; function avPanel(_id, _defwidth, _defheight, _maxwidth, _maxheight) { this.id=_id; this.defwidth=_defwidth; this.defheight=_defheight; this.maxwidth=_maxwidth; this.maxheight=_maxheight; this.innerHTML=""; avCollections.Panels[avCollections.Panels.length]=this; } avPanel.prototype.AddHTML=function(_html) { this.innerHTML+=_html; } avPanel.prototype.Render=function() { var str=""; str+=avTemplates.Header01; str+=this.id; str+=avTemplates.Header02; str+=this.defwidth; str+=avTemplates.Header03; str+=this.defheight; str+=avTemplates.Header04; str+=this.innerHTML; str+=avTemplates.Footer01; return str; } /////////////////////////////////////////////////////// if ( window.onresize != null ) { var avoldOnresize = window.onresize; window.onresize = function ( e ) { avoldOnresize( e ); avHandlers.EnsurePosition(); }; } else { window.onresize = avHandlers.EnsurePosition; } /////////////////////////////////////////////////////// if ( window.onload != null ) { var avoldOnload = window.onload; window.onload = function ( e ) { avoldOnload( e ); avHandlers.EnsurePosition(); }; } else { window.onload = avHandlers.EnsurePosition; } /////////////////////////////////////////////////////// if ( window.onscroll != null ) { var avoldOnscroll = window.onscroll; window.onscroll = function ( e ) { avoldOnscroll( e ); avHandlers.EnsurePosition(); }; } else { window.onscroll = avHandlers.EnsurePosition; } </SCRIPT>

Copy the following code between the <BODY></BODY> tags of your html page.

<SCRIPT> var pnl=new avPanel("myPanel", 200, 100, 300, 200); pnl.AddHTML("Put your text here."); document.write(pnl.Render()); </SCRIPT>

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!