Script DHTML - Frame: Graphic Scrollbar - Morpheusweb.it - webmaster resources: script, ASP.NET, C#, Visual Basic .Net, tutorial, asp, javascript, css, php, html, java, ADO, VBScript, forms, frames, Active Server Pages, Dynamic HTML, database

Graphic Scrollbar
A scroller that uses the divs, with graphic controls.


					
					<HTML>

					<HEAD>

					<title>Demo dhtml</title>

					<SCRIPT LANGUAGE="JavaScript">

					<!--

					n = (document.layers) ? 1:0

					ie = (document.all) ? 1:0

					// Scroll Bar Setup Variables

					scrollLeft = 50

					scrollTop = 50

					scrollNestLeft = 0 // left position of parent layer, 0 if none

					scrollNestTop = 0 // top position of parent layer 0 if none

					scrollWidth = 230

					scrollHeight = 280

					scrollBarWidth = 19

					scrollBoxHeight = 23

					scrollArrowHeight = 15

					scrollMarginLeft = 10

					scrollMarginRight = 10

					scrollMarginTop = 10

					scrollMarginBottom = 10

					scrollBorder = 2 // width of the border, set to 0 for no border

					scrollBorderColor = "#F47A00"

					scrollBarColor = "#FFD1BB"

					scrollBoxColor = "none" // use "none" for transparent

					scrollArrowColor = "#F47A00"

					scrollTextBGColor = "#A8E8DE"

					scrollFirstPage = "testo.html"

					// Scroll Bar Miscellaneous Variables

					scrollLoaded = 0

					scrollActive = 0

					scrollArrowActive = 0

					scrollDownActive = 0

					scrollYold = 0

					scrollClickY = 0

					scrollBarHeight = scrollHeight-2*scrollBorder-scrollBoxHeight-scrollArrowHeight

					function init() {

					// attemped bug fix for IE

					if (ie) document.all["scrollBoxDiv"].onmouseout = mouseUp

					document.onmousedown = mouseDown

					document.onmousemove = mouseMove

					document.onmouseup = mouseUp

					if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

					}

					function mouseDown(e) {

					if ((n && e.which == 1) || ie) {

					if (n) {var x=e.pageX; var y=e.pageY}

					if (ie) {var x=event.x; var y=event.y}

					scrollMouseDown(x,y)

					}

					}

					function mouseMove(e) {

					if (n) {var x=e.pageX; var y=e.pageY}

					if (ie) {var x=event.x; var y=event.y}

					if (scrollLoaded && scrollActive) {

					scrollMouseMove(x,y)

					}

					if (scrollActive || scrollArrowActive) return false

					}

					function mouseUp(e) {

					scrollActive = 0

					scrollArrowActive = 0

					scrollDownActive = 0

					}

					function scrollMouseDown(x,y) {

					if (scrollLoaded && scrollFactor<0 && x>=scrollLeft+scrollNestLeft+scrollWidth-scrollBarWidth-scrollBorder && x<(scrollLeft+scrollNestLeft)+scrollWidth-scrollBorder && y>=(scrollTop+scrollNestTop)+scrollBorder && y<(scrollTop+scrollNestTop)+scrollHeight-scrollBorder)
					{

					if (y>=scrollTop+scrollNestTop+scrollBorder+scrollbox.y && y<(scrollTop+scrollNestTop)+scrollBorder+scrollBoxHeight+scrollbox.y)
					{ // scrollbox

					scrollClickY = y-scrollbox.y

					scrollYold = y

					scrollActive = 1

					} 

					else if (y<scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight) { // up
					arrow

					scrollArrowActive = 1

					scrollArrowDir = 1

					scrollArrowSlide()

					}

					else if (y>=scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight)
					{ // down arrow

					scrollArrowActive = 1

					scrollArrowDir = -1

					scrollArrowSlide()

					}

					else {

					if (y<=scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight+scrollBoxHeight/2)
					{ // jump top

					scrollbox.moveTo(0,scrollArrowHeight)

					}

					else if (y>scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight-scrollBoxHeight/2)
					{ // jump bottom

					scrollbox.moveTo(0,scrollBarHeight)

					}

					else { // jump middle

					scrollbox.moveTo(0,y-scrollTop-scrollNestTop-scrollBorder-scrollBoxHeight/2)

					}

					scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)

					scrollClickY = y-scrollbox.y

					scrollYold = y

					scrollActive = 1

					}

					}

					}

					function scrollMouseMove(x,y) {

					var diff = y-scrollYold

					if ((scrollbox.y>scrollArrowHeight && scrollbox.y<scrollBarHeight)
					|| (scrollbox.y==scrollArrowHeight && diff>=0) || (scrollbox.y==scrollBarHeight && diff<=0))
					{

					if ((scrollbox.y>scrollArrowHeight && scrollbox.y+diff<scrollArrowHeight)
					|| (scrollbox.y<scrollBarHeight && scrollbox.y+diff>scrollBarHeight))
					{

					if (scrollbox.y+diff<scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight)

					else if (scrollbox.y+diff>scrollBarHeight) scrollbox.moveTo(0,scrollBarHeight)

					scrollYold = scrollbox.y+scrollClickY

					}

					else {

					scrollbox.moveTo(0,y-scrollClickY)

					scrollYold = y

					}

					scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)

					}

					}

					function scrollArrowSlide() {

					if (scrollArrowActive) {

					if ((scrollArrowDir==1 && scrolltext.y<scrollMarginTop-5) || (scrollArrowDir==-1 && scrolltext.y>-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight-5)))
					{

					scrolltext.moveBy(0,scrollArrowDir*5)

					scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)

					setTimeout("scrollArrowSlide()",20)

					}

					else {

					if (scrollArrowDir==1) scrolltext.moveTo(scrolltext.x,scrollMarginTop)

					else if (scrollArrowDir==-1) scrolltext.moveTo(scrolltext.x,-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight))

					scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)

					}

					}

					}

					function loadSource(page) {

					scrollLoaded = 0

					if (n) document.scrollWindow.document.scrollTextWindow.src = page

					if (ie) parent.scrollTextFrame.document.location = page

					}

					function scrollResize() {

					scrolltext = new dynLayer("scrollTextDiv","scrollWindow.document.scrollTextWindow","scrollTextFrame")

					scrollbox = new dynLayer("scrollBoxDiv","scrollWindow.document.scrollBar")

					scrollFactor = -(scrolltext.height+scrollMarginTop+scrollMarginBottom-scrollHeight+2*scrollBorder)/(scrollBarHeight-scrollArrowHeight)

					scrollbox.moveTo(0,scrollArrowHeight)

					scrollLoaded = 1

					}

					// Dynamic Layer Object with width and height and frameref (for IE)

					function dynLayer(id,nestref,frameref) {

					if (n) {

					if (nestref) {

					this.css = eval("document." + nestref + ".document." + id)

					this.ref = eval("document." + nestref + ".document." + id
					+ ".document")

					}

					else {

					this.css = document.layers[id]

					this.ref = document.layers[id].document

					}

					this.x = this.css.left

					this.y = this.css.top

					this.width = this.ref.width

					this.height = this.ref.height

					}

					else if (ie) {

					if (frameref) {

					this.css = parent.frames[frameref].document.all[id].style

					this.ref = parent.frames[frameref].document

					}

					else {

					this.css = document.all[id].style

					this.ref = document

					}

					this.x = this.css.pixelLeft

					this.y = this.css.pixelTop

					this.width = this.ref.all[id].offsetWidth

					this.height = this.ref.all[id].offsetHeight

					}

					this.obj = id + "Object"

					eval(this.obj + "=this")

					this.moveBy = dynLayerMoveBy

					this.moveTo = dynLayerMoveTo

					this.show = dynLayerShow

					this.hide = dynLayerHide

					}

					function dynLayerMoveBy(x,y) {

					this.x += x

					this.css.left = this.x

					this.y += y

					this.css.top = this.y

					}

					function dynLayerMoveTo(x,y) {

					this.x = x

					this.css.left = this.x

					this.y = y

					this.css.top = this.y

					}

					function dynLayerShow() {

					if (n) this.css.visibility = "show"

					else if (ie) this.css.visibility = "visible"

					}

					function dynLayerHide() {

					if (n) this.css.visibility = "hide"

					else if (ie) this.css.visibility = "hidden"

					}

					//-->

					</SCRIPT>

					<STYLE TYPE="text/css">

					#scrollBarTop {position:absolute; left:0; top:15; width:19;}

					#scrollBarBottom {position:absolute; left:0; top:257; width:19;}

					</STYLE>

					</HEAD>

					<BODY onLoad="init()">

					<SCRIPT LANGUAGE="JavaScript">

					document.writeln('<STYLE TYPE="text/css">');

					document.writeln('<\!--');

					document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+';
					width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}');

					document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+';
					height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+';
					layer-background-color:'+scrollBorderColor+';}');

					document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+';
					width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0);
					background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');

					document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+';
					height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+';
					layer-background-color:'+scrollBorderColor+';}');

					document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+';
					top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0);
					background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');

					if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+';
					top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+';
					height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0);
					background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');

					document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+';
					top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+';
					clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+';
					layer-background-color:'+scrollBarColor+';}');

					if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute;
					left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}');

					else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+';
					width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);
					background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}');

					document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+';
					height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0);
					background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');

					document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+';
					width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0);
					background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');

					document.writeln('-->');

					document.writeln('</STYLE>');

					</SCRIPT>

					<DIV ID="scrollWindow">

					<DIV ID="scrollBar">

					<DIV ID="scrollBoxDiv"><IMG SRC="scrollbox.gif" WIDTH=19
					HEIGHT=23 ALT="Scroll Me" BORDER=0></DIV>

					<DIV ID="scrollArrowUpDiv"><IMG SRC="scrollarrowup.gif" WIDTH=19
					HEIGHT=15 BORDER=0></DIV>

					<DIV ID="scrollArrowDownDiv"><IMG SRC="scrollarrowdown.gif" WIDTH=19
					HEIGHT=15 BORDER=0></DIV>

					<DIV ID="scrollBarTop"><IMG SRC="scrollbartop.gif" WIDTH=19
					HEIGHT=4 BORDER=0></DIV>

					<DIV ID="scrollBarBottom"><IMG SRC="scrollbarbottom.gif" WIDTH=19
					HEIGHT=4 BORDER=0></DIV>

					</DIV>

					<DIV ID="scrollBorderTop"></DIV>

					<DIV ID="scrollBorderBottom"></DIV>

					<DIV ID="scrollBorderLeft"></DIV>

					<DIV ID="scrollBorderRight"></DIV>

					<SCRIPT LANGUAGE="JavaScript">

					if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+'
					TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+'
					CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')

					if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME
					NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+'
					HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>')

					</SCRIPT>

					</DIV>

					</BODY>

					</HTML>
Download the code...
A colpo d'occhio

Script C#

Manuale C#

Script VB.Net

Manuale VB.Net

Seo

Manuale CSS

Be Responsive

HTML 5

CSS 3

jQuery

dhtml
