SimplytheBest DHTML bottom slide-in information box script

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list

Sponsored links

Download over 125,000 Fonts at Fonts.com

<font size=-1>

Home > Scripts > DHTML scripts & JavaScripts > Messages > Slide-in information box

Slide-in information box

AUTHOR: Submitted by Ron Grafe
TYPE: Freeware
BROWSERS: IE 4+, IE 5+, IE 6+, NS 4+, NS 6+

This slide-in box script can be used as an ad box or information box. It slides-in a text information box from the bottom of the page. You supply the text in an onMouseOver event in whatever tag you like. When you hold your mouse over the tag the text will slide in from the bottom. Even if you scroll down, the info box will stay on the bottom of the page.

EXAMPLES

SimplytheBest DHTML Scripts (with link, using default settings)

Information box (no link, overriding defaults)

As a box ad (with link, overriding defaults)

1) Insert this script in the <HEAD> section of the page.

then copy (CTRL-C) & paste (CTRL-V)

<script language="JavaScript1.2"> // Author: Ron Grafe grafer@columbus.rr.com http://www.gdevresources.com/Pages/Scripts/BottomSlider/bottomslider.htm // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/  iens6=document.all||document.getElementById ns4=document.layers  var thename var theobj var thetext var winHeight var winPositionFromTop var winWidth var startH=2 var openTimer   var textArray = new Array textArray[1]="<font face='Arial' size='2'><strong>SimplytheBest DHTML Scripts & Javascripts</strong><br>A collection of the best scripts on the Internet. You'll find ready-to- go DHTML Scripts & Javascript.<br><br>You get the message....you can put just about anything in here that describes the link. This has an active link, if you click it you will go to the site.<br>In this example textArray element number 1 is passed to the function to define the text we want. Default width and height are used.</font><br>" textArray[2]="<font face='Arial' size='2'><h2>Information</h2>Using it this way would allow you to enter any type of help/text information. \(i.e. menu help, form help, etc.. \).<br><br>In this example textArray element number 2 is passed to the function to define the text we want. Then we overrode the default width/height setting by passing the word 'override' and providing the new width and height values to the function.<br>" textArray[3]="<img src='http://planmagic.com/images/plmbiz.jpg' border='0' align='left' width='146' height='50'><font face='Arial' size='3'><b> PlanMagic Business<br> </font><font face='Arial' size='2'>Professional business planning software</b><br><br>This example uses it like an Ad Box. You can add any graphics and text combination in the window.<br>In this example textArray element number 3 is passed to the function to define the text we want. Width and height are defined.</font><br>"   function setObj(elementpos,theswitch,inwidth,inheight) { thetext=textArray[elementpos] if(iens6){ thename = "viewer" theobj=document.getElementById? document.getElementById(thename):document.all.thename winHeight=100 if(iens6&&document.all) { winPositionFromTop=document.body.clientHeight winWidth=(document.body.clientWidth-document.body.leftMargin) } if(iens6&&!document.all) { winPositionFromTop=window.innerHeight winWidth=(window.innerWidth-(document.body.offsetLeft+20)) } if(theswitch=="override") { winWidth=inwidth winHeight=inheight } theobj.style.width=winWidth theobj.style.height=startH if(iens6&&document.all) { theobj.style.top=document.body.scrollTop+winPositionFromTop theobj.innerHTML = "" theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>") } if(iens6&&!document.all) { theobj.style.top=window.pageYOffset+winPositionFromTop theobj.innerHTML = "" theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>" } } if(ns4){ thename = "nsviewer" theobj = eval("document."+thename) winPositionFromTop=window.innerHeight winWidth=window.innerWidth winHeight=100 if(theswitch=="override") { winWidth=inwidth winHeight=inheight } theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop)) theobj.width=winWidth theobj.clip.width=winWidth theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>") theobj.document.close() } viewIt() } function viewIt() { if(startH<=winHeight) { if(iens6) { theobj.style.visibility="visible" if(iens6&&document.all) { theobj.style.top=(document.body.scrollTop+winPositionFromTop)-startH } if(iens6&&!document.all) { theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH } theobj.style.height=startH startH+=2 openTimer=setTimeout("viewIt()",10) } if(ns4) { theobj.visibility = "visible" theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH)) theobj.height=startH theobj.clip.height=(startH) startH+=2 openTimer=setTimeout("viewIt()",10) } }else{ clearTimeout(openTimer) } } function stopIt() { if(iens6) { theobj.innerHTML = "" theobj.style.visibility="hidden" startH=2 } if(ns4) { theobj.document.write("") theobj.document.close() theobj.visibility="hidden" theobj.width=0 theobj.height=0 theobj.clip.width=0 theobj.clip.height=0 startH=2 } }  </script>

2) Insert the following code inside the <BODY> section of the page.

3) Insert the onMouseOver event inside the <A> </A> tag of any link on your page:

a) with URL link and default settings:

<a onmouseover="setObj(1)" onmouseout="clearTimeout(openTimer);stopIt()"
href="scripts/dhtml_scripts.html">SimplytheBest DHTML Scripts & Javascripts</a>

b) without URL link and with defined height and width:

<a href="Javascript:Void(0)" onmouseover="setObj(2,'override',300,200)"
onmouseout="clearTimeout(openTimer);stopIt()">Information box (no link)</a>

4) Define the content to appear inside the slide-in boxes in this section of the script (make sure to use single quotes inside double quotes):

textArray[1]="<font face='Arial' size='2'><strong>SimplytheBest DHTML Scripts & Javascripts</strong><br>A collection of the best DHTML scripts & javascripts on the Internet.</font>"

textArray[2]="<font face='Arial' size='2'><h2>Information</h2>Using it this way would allow you to enter any type of help/text information.</font>"

5) Define the style of the box windows in this section of the script (in the BODY section):

<layer name="nsviewer" bgcolor="#EAFFF4" style="border-width:thin;z-index:1"></layer>
<script language="JavaScript1.2">
if (iens6){
document.write("<div id='viewer' style='background-color:#EAFFF4;marginleft:0;visibility:hidden;position:absolute;width:0;height:0;z-index:1;overflow:hidden;border:2px ridge white'></div>")

For more information you can also visit Ron Grafe's web site.

[BACK] [TOP]

Copyright © 1997-2009 SimplytheBest Inc. Terms of Use and Legal Disclaimer.
All copyrights are acknowledged. All rights reserved.