Scrollable Window In HTML Page - Code

This script will put a small, fixed, scrollable window into your page. You can change the height, width, background color and content of the window.

This is a nifty little script that allows you to put any content you want within a scrollable mini "window". This will allow you to save valuable screen space while making your page more "interactive".

This script uses two different techniques, one for Internet Explorer and one for Netscape, to create the scrollable window.

IE 4+ users will be able to use scrollbars to scroll the window, while Netscape users will have to use the "up" and "down" buttons instead (since Netscape does not support the adding of scrollbars to the "window" contents).

Tested and works on IE, Firefox, and Google Chrome.

Script Demo:

Demo

Dynamic HTML Code:

Insert this code into <head> tags

Insert this code into <body> tags

<ilayer name="scroll1" width=170 height=150 clip="0,0,170,150">

<layer name="scroll2" width=170 height=150 bgColor="white">

<div id="scroll3" style="width:170;height:150;background-color:yellow;overflow:scroll">

This is a nifty little script that allows you to put any content you want within a scrollable mini "window". This will allow you to save valuable screen space while making your page more "interactive".
<br><br>
This script uses two different techniques, one for Internet Explorer and one for Netscape, to create the scrollable window.
<br><br>
IE 4+ users will be able to use scrollbars to scroll the window, while Netscape users will have to use the "up" and "down" buttons instead (since Netscape does not support the adding of scrollbars to the "window" contents).

</div>
</layer>
</ilayer>

<script>

var nsstyle='display:""'
if (document.layers)
var scrolldoc=document.scroll1.document.scroll2
function up(){
if (!document.layers) return
if (scrolldoc.top<0)
scrolldoc.top+=10
temp2=setTimeout("up()",50)
}
function down(){
if (!document.layers) return
if (scrolldoc.top-150>=scrolldoc.document.height*-1)
scrolldoc.top-=10
temp=setTimeout("down()",50)
}

function clearup(){
if (window.temp2)
clearInterval(temp2)
}

function cleardown(){
if (window.temp)
clearInterval(temp)
}

</script>

<br><span style="display:none" style=&{nsstyle};>
<a href="#" onMousedown="up()"
onMouseup="clearup()" onClick="return false"
onMouseout="clearup()">Up</a> | <a href="#"
onMousedown="down()" onMouseup="cleardown()" onClick="return false"
onMouseout="cleardown()">Down</a> | <a href="#" onClick="if
(document.layers) scrolldoc.top=0;return false">Top</a> | <a href="#" onClick="if
(document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false">Bottom</a></span>

Instruction:

Webmaster » Web Programming » DHTML » Scrollable Window In Web Page - Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links