GDev Resources.com - Scrolling Pulldown

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

Scrolling Pulldown: IE4 Nav4 NS6
Created by: Ron Grafe
Version 1.0
Version Date: 10/4/2001

A pulldown list that scrolls!. To expand the pulldown place your mouse over "Dn". To scroll the links down click and hold your mouse button down on "Dn". To scroll the links up click and hold your mouse button down on "Up". To jump to the top of the link list click on "T". To close/collapse the pulldown click on "C".

DEMO: Scrolling Pulldown

Step 1: Select, Copy and paste the following code into the HEAD section of your HTML Page.

SELECT ALL

var scrollspeed = 60

function openBox(){
	if (iens6) {
	obj.style.height=200
	}else{
	obj.clip.height=200
	}
}
function closeBox(){
	if (iens6) {
	obj.style.height=0
	}else{
	obj.clip.height=0
	}
}

function scrolldown() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(iens6&&parseInt(contentobj.style.top)>=(contentheight*(-1)+100)){
		contentobj.style.top=parseInt(contentobj.style.top)-step
	}else if(ns4&&contentobj.top>=(contentheight*(-1)+100)){
		contentobj.top-=step
	}
	scrolltimerdown = setTimeout("scrolldown()",scrollspeed)
}

function scrollup() {
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
	if(iens6&&parseInt(contentobj.style.top)<=0){
		contentobj.style.top=parseInt(contentobj.style.top)+step
	}else if(ns4&&contentobj.top<=0){ 
		contentobj.top+=step
	}
	scrolltimerup = setTimeout("scrollup()",scrollspeed)	
}

function stopall() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
}

function shifttotop(){
	stopall()
	if (iens6) {
		contentobj.style.top=0
	}else{
		contentobj.top=0
	}
}

function getcontent_height(){
	if (iens6)
	contentheight=contentobj.offsetHeight
}
</script>

Step 2: Select, Copy and paste the following code into the BODY section of your HTML Page (where you would like it to appear).

SELECT ALL

<table width="158" cellpadding="2" cellspacing="1" border="1">
<tr><td width="100%" align="left" valign="bottom" bgcolor="#cccccc">
<font face="times" size="2" style="color:black"><b>Your Menu</b></font>  
<a href="Javascript:void(0)" onclick="shifttotop()"><font face="times" size="1" style="color:black">T</font></a> |
<a href="Javascript:void(0)" onclick="closeBox()"><font face="times" size="1" style="color:black">C</font></a> |
<a href="Javascript:void(0)" onmousedown="scrollup()" onmouseup="stopall()"><font face="times" size="1" style="color:black">Up</font></a> |
<a href="Javascript:void(0)" onmouseover="openBox()" onmousedown="scrolldown()" onmouseup="stopall()"><font face="times" size="1" style="color:black">Dn</font></a>
</td></tr></table>
<script language="JavaScript1.2">

if (iens6){
document.write('<div id="outer" style="position:absolute"><div id="container" style="position:relative;width:157;height:0px;overflow:hidden;border:2px ridge white;background-color:white">')
document.write('<div id="content" style="position:absolute;width:157;left:0;top:0;background-color:white">')
}
</script>
<ilayer name="nscontainer" width="157" height="200" clip="0,0,157,0" bgcolor="white">
<layer name="nscontent" width="157" height="200" bgcolor="white">

•<a href="http://builder.cnet.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Builder.com</font></a><br>
•<a href="http://www.wdvl.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">WDVL</font></a><br>
•<a href="http://www.pageresource.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Pageresource.com</font></a><br>
•<a href="http://www.dannyg.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Danny Goodman</font></a><br>
•<a href="http://www.webdeveloper.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">WebDeveloper.com</font></a><br>
•<a href="http://javaboutique.internet.com" target="_blank"  onclick="closeBox()"><font face="times" size="2" style="color:blue">JavaBoutique.com</font></a><br>
•<a href="http://builder.cnet.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Builder.com</font></a><br>
•<a href="http://www.wdvl.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">WDVL</font></a><br>
•<a href="http://www.pageresource.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Pageresource.com</font></a><br>
•<a href="http://www.dannyg.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">Danny Goodman</font></a><br>
•<a href="http://www.webdeveloper.com" target="_blank" onclick="closeBox()"><font face="times" size="2" style="color:blue">WebDeveloper.com</font></a><br>
•<a href="http://javaboutique.internet.com" target="_blank"  onclick="closeBox()"><font face="times" size="2" style="color:blue">JavaBoutique.com</font></a><br>

</layer></ilayer>
<script language="JavaScript1.2">
var step=1
var obj
if (iens6){
	document.write('</div></div></div>')
	var contentobj=document.getElementById? document.getElementById("content") : document.all.content
	var contentheight=contentobj.offsetHeight
	if (document.getElementById&&!document.all){
   		step=1
	}
}
else if(ns4){
	var contentobj=document.nscontainer.document.nscontent
	var contentheight=contentobj.clip.height
}

if (iens6) {
	obj=document.getElementById? document.getElementById("container") : document.all.container
}else{
	obj=document.nscontainer
}
window.onload=getcontent_height
</script>

Step 3: Once the above code is copied and pasted into your document replace the HTML code between the "INSERT CONTENT HERE" and "END CONTENT" with your own links.

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