Morpheusweb.it - Risorse per webmaster: script, ASP.NET, C#, Visual Basic .Net, tutorial, asp, javascript, css, php, html, java, ADO, VBScript, forms, frames, Active Server Pages, Dynamic HTML, database, gratis per webmaster e webdesigner

Scrollbar

Uno scroller che utilizza le div.

<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 = 400
scrollHeight = 180
scrollBarWidth = 12
scrollBoxHeight = 30
scrollArrowHeight = 12
scrollMarginLeft = 10
scrollMarginRight = 10
scrollMarginTop = 10
scrollMarginBottom = 10
scrollBorder = 1 // width of the border, set to 0 for no border
scrollBorderColor = "#000000"
scrollBarColor = "#B0C1D2"
scrollBoxColor = "#156FAA" // use "none" for transparent
scrollArrowColor = "#808080"
scrollTextBGColor = "#FFFFFF"
scrollFirstPage = "text1.html"
// Scroll Bar Miscellaneous Variables
scrollLoaded = 0
scrollActive = 0
scrollArrowActive = 0
scrollDownActive = 0
scrollYold = 0
scrollClickY = 0
scrollBarHeight = scrollHeight-2scrollBorder-scrollBoxHeight-scrollArrowHeight

function init()
{
  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+2scrollBorder+scrollMarginBottom-scrollHeight-5)))
    {
      scrolltext.moveBy(0,scrollArrowDir5)
      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+2scrollBorder+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+2scrollBorder)/(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>

</HEAD>

<BODY BGCOLOR="#C0C0C0" onLoad="init()">

<A HREF="javascript:loadSource('text1.html')">Prima pagina</A>
<A HREF="javascript:loadSource('text2.html')">Seconda pagina</A>
<A HREF="javascript:loadSource('text3.html')">Terza pagina</A>

<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-2scrollBorder)+'; height:'+(scrollHeight-2scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2scrollBorder)+','+(scrollHeight-2scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');
document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2scrollBorder)+',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-2scrollBorder-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"></DIV>
<DIV ID="scrollArrowUpDiv"></DIV>
<DIV ID="scrollArrowDownDiv"></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-2scrollBorder)+' HEIGHT='+(scrollHeight-2scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2scrollBorder)+','+(scrollHeight-2scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2scrollBorder)+' HEIGHT='+(scrollHeight-2scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>')
</SCRIPT>
</DIV>
</BODY>
</HTML>

Scarica il Codice...

Stampa la pagina

Inizio pagina