GDev Resources.com - Bottom SlideIn

Top Navigation - Include

Home

Forums

Index

Terms

Developer Resources

DynamicScroller

Scripts

Javascripts
• Navigation
• Miscellaneous

DHTML
• Navigation
• Scrollers

Miscellaneous
Scripts-In-Action

MultiMedia

• Flash
• Music Loops

Recommends

• WebWiz Forums
• Macromedia HomeSite
• Jasc Paint Shop Pro
• Xara Products
• SWiSH

Shareware/Freeware

• Nonags
• Tucows
• ZDNet

Coding References

• ASCII Table
• CSS Property Table
• HTML Tag Attributes

Code Generators

• Cool Tools 1
• Cool Tools 2

Bottom Slide-in Info Box: IE4 Nav4 NS6
Created by: Ron Grafe
Version 1.1
Version Date: 2/12/2002

This slide-in box can be used as an Ad Box, Help Box, Link Information Box and more! It "slides-in" a text information box from the bottom of the page. You supply the text to an onmouseover event and add it to any tag that supports onmouseover. Then, when you hold your mouse over the tag the text will slide in from the bottom. You can override the info box's default width and height if you like (the defaults are the user's screen width and a height of 100px).

The text that you use is defined in the textArray in the HEAD code, and can contain HTML tags, images, and formatting. When you call the "setObj" function in the onmouseover just pass the number of the array element (text block) that you would like to appear.

Check out the Demo link to see some possibilities.

DEMO: Bottom Slide-in Info Box
There is also a non-sliding version of this script. See Bottom Pop-up Info Box.

Step 1: Select, Copy and paste the following code into the "HEAD" section of your HTML Page. Then change the elements in the "textArray" to your content.

SELECT ALL

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 leftPosition

var textArray = new Array

// CHANGE EACH ARRAY ELEMENT BELOW TO YOUR OWN CONTENT. MAKE SURE TO USE SINGLE QUOTES INSIDE DOUBLE QUOTES.
textArray[1]="<strong>Grafes Developer Resources</strong> is a resource for web programmers. It contains free Javascripts, DHTML scripts, links to developer resources........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><br>In this example textArray element number 1 is passed to the function to define the text I want; Default width and height are used."
textArray[2]="<h2>Page Help</h2>Using it this way would allow me 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 I want. Then I overrode the default width/height settings by passing the word 'override' and providing the new width and height values, then I set the position setting to align the box 'right'. (you can also pass a number to position the box a certain amount of pixels in from the left, default is left if position setting is left blank or 'left' is passed to the function)."
textArray[3]="<img src='../../../Graphics/Logo_mini.gif' width='100' height='81' border='0' align='left'> This example uses it like an Ad Box. You can add any graphics and text combination in the window.<br><br>In this example textArray element number 3 is passed to the function to define the text I want. Default width and height are used."

function setObj(elementpos,theswitch,inwidth,inheight,leftpos) {
	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)
				leftPosition=0
			}
			if(iens6&&!document.all) {
				winPositionFromTop=window.innerHeight
				winWidth=(window.innerWidth-(document.body.offsetLeft+20))
				leftPosition=0
			}
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
				if(iens6&&document.all) {
					if(leftpos=="right") {
						leftPosition=(document.body.clientWidth-winWidth)
					}else if(leftpos=="left" || leftpos=="" || leftpos==null) {
						leftPosition=0
					}else{
						leftPosition=leftpos
					}
				}
				if(iens6&&!document.all) {
					if(leftpos=="right") {
						leftPosition=(window.innerWidth-winWidth)-20
					}else if(leftpos=="left" || leftpos=="" || leftpos==null) {
						leftPosition=0
					}else{
						leftPosition=leftpos
					}
				}
			}
		theobj.style.width=winWidth
		theobj.style.height=startH
		theobj.style.left=leftPosition
			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
		leftPosition=0
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
				if(leftpos=="right") {
					leftPosition=(window.innerWidth-winWidth)
				}else if(leftpos=="left" || leftpos=="" || leftpos==null) {
					leftPosition=0
				}else{
					leftPosition=leftpos
				}
			}
		theobj.moveTo(leftPosition,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(leftPosition,(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>

Step 2: Select, Copy and paste the following code into the BODY section of your HTML page. Then use the appropriate code snippet in whatever tag you choose.

SELECT ALL

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

onmouseover="setObj('replace textArray position number you want to appear')" onmouseout="clearTimeout(openTimer);stopIt()"

onmouseover="setObj('replace textArray position number you want to appear','override',your width here,your height here,enter 'left' 'right' or pixel value here)" onmouseout="clearTimeout(openTimer);stopIt()"

Site Generated and Maintained using Macromedia Homesite

• HtmlCodeTutorial.com
• DevGuru.com
• Builder.com
• WDVL.com
• WebDeveloper.com
• WebReference.com
• Pageresource.com
• W3C

Javascript Resources

• Website Abstraction
• JavaScript.com
• JavaScript Source

DHTML Resources

• Website Abstraction
• Dynamic Drive
• Jeff Rule's DHTML

Java Resources

• JavaBoutique.com
• Sun Download Center

ASP Resources

• ASP101
• LearnASP
• PowerASP
• ASPZone

ScriptKingdom.com
Script repository
and resource site

www.hotscripts.com