- Home Page
- > Script DHTML
- > Script DHTML Frame
- > Scrollbar Grafica
Scrollbar Grafica
Uno scroller che utilizza le div, in questo caso con controlli grafici.
<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>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.