Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Feb 2010
    Posts
    15
    Member #
    21201
    Yesterday I figured out how to add a custom scroll bar to dreamweaver with java script. Iím having trouble positioning the scroll bar though. Iím specifically having trouble moving the scroll bar up in the text box. Because of this the text is positioned nicely in the box but the scroll bar is half way down the middle. Does anyone have any ideas?

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    Do you have code? Also, what do you mean by JavaScript scroll bar? Are you using a system default scroller, or a custom designed one?

  4. #3
    Junior Member
    Join Date
    Feb 2010
    Posts
    15
    Member #
    21201
    I'm using a custom designed one. The code I have is to long so I can't post it. Any suggestions or ideas would be greatly appreciated though.

  5. #4
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    It's not really possible to debug it without any code. Can you upload what you have anywhere, and post a link?

  6. #5
    Junior Member
    Join Date
    Feb 2010
    Posts
    15
    Member #
    21201
    I'm going to try to post the code in 2 separate posts.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>index.jpg</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">td img {display: block;}body {
    background-image: url(PaperProzacBG8.jpg);
    background-color: #FFFFFF;
    }
    html, body {
    margin-top: 0;
    padding-top: 0;
    }
    </style>
    <!--Fireworks 8 Generic target. Created Tue Feb 16 11:56:28 GMT-0500 ( ) 2010-->
    <script language="JavaScript1.2" type="text/javascript">
    <!--
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    //-->
    </script>
    </head>
    <body onload="MM_preloadImages('images/index_r1_c9_f2.jpg','images/index_r2_c9_f2.jpg','images/index_r3_c9_f2.jpg','images/index_r4_c1_f2.jpg','images/index_r4_c3_f2.jpg','images/index_r4_c6_f2.jpg','images/index_r4_c9_f2.jpg','images/index_r11_c1_f2.jpg');">
    <div align="center">
    <table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <!-- fwtable fwsrc="HomePage2.png" fwbase="index.jpg" fwstyle="Generic" fwdocid = "2006517954" fwnested="0" -->
    <tr>
    <td><img src="images/spacer.gif" width="27" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="197" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="25" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="187" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="195" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="28" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="2" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="197" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="28" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>

    <tr>
    <td rowspan="3" colspan="8"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="674" height="150" border="0" id="index_r1_c1" alt="" /></td>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r1_c9','','images/index_r1_c9_f2.jpg',1);"><img name="index_r1_c9" src="images/index_r1_c9.jpg" width="226" height="29" border="0" id="index_r1_c9" alt="" /></a></td>
    <td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r2_c9','','images/index_r2_c9_f2.jpg',1);"><img name="index_r2_c9" src="images/index_r2_c9.jpg" width="226" height="92" border="0" id="index_r2_c9" alt="" /></a></td>
    <td><img src="images/spacer.gif" width="1" height="92" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c9','','images/index_r3_c9_f2.jpg',1);"><img name="index_r3_c9" src="images/index_r3_c9.jpg" width="226" height="29" border="0" id="index_r3_c9" alt="" /></a></td>
    <td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c1','','images/index_r4_c1_f2.jpg',1);"><img name="index_r4_c1" src="images/index_r4_c1.jpg" width="224" height="29" border="0" id="index_r4_c1" alt="" /></a></td>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c3','','images/index_r4_c3_f2.jpg',1);"><img name="index_r4_c3" src="images/index_r4_c3.jpg" width="225" height="29" border="0" id="index_r4_c3" alt="" /></a></td>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c6','','images/index_r4_c6_f2.jpg',1);"><img name="index_r4_c6" src="images/index_r4_c6.jpg" width="225" height="29" border="0" id="index_r4_c6" alt="" /></a></td>
    <td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c9','','images/index_r4_c9_f2.jpg',1);"><img name="index_r4_c9" src="images/index_r4_c9.jpg" width="226" height="29" border="0" id="index_r4_c9" alt="" /></a></td>
    <td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="11"><img name="index_r5_c1" src="images/index_r5_c1.jpg" width="900" height="33" border="0" id="index_r5_c1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="33" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="11"><img name="index_r6_c1" src="images/index_r6_c1.jpg" width="900" height="1" border="0" id="index_r6_c1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="9"><img name="index_r7_c1" src="images/index_r7_c1.jpg" width="871" height="1" border="0" id="index_r7_c1" alt="" /></td>
    <td rowspan="2"><img name="index_r7_c10" src="images/index_r7_c10.jpg" width="28" height="386" border="0" id="index_r7_c10" alt="" /></td>
    <td rowspan="3"><img name="index_r7_c11" src="images/index_r7_c11.jpg" width="1" height="387" border="0" id="index_r7_c11" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2"><img name="index_r8_c1" src="images/index_r8_c1.jpg" width="27" height="386" border="0" id="index_r8_c1" alt="" /></td>
    <td rowspan="2" colspan="2"><html>
    <style rel="stylesheet" type="text/css" media="screen, projection">
    /*********************** SCROLLERS ***********************/
    .root {
    position:relative;
    height: 200px;
    width: 200px;
    margin: 0px 0px 8px 7px;
    }
    .root p {
    margin: 10px 10px 5px 10px;
    }
    .thumb {
    position: absolute;
    height: 200px;
    width: 15px;
    left: 10px;
    }
    .up, .dn {
    position: absolute;
    left: 10px;
    }
    .up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
    border: 0;
    }
    .scrollContainer {
    position:relative;
    left: 2px;
    top: 19px;
    width: 232px;
    height: 200px;
    clip: rect(0 467 200 0);
    overflow: auto;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid#FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
    background-color: ##FFFFFF;
    }
    .scrollContent {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    }

  7. #6
    Junior Member
    Join Date
    Feb 2010
    Posts
    15
    Member #
    21201
    /style>
    </head>
    <body>
    <!-- dom-drag.js -->
    <script type="text/javascript">
    /**************************************************
    * dom-drag.js
    * 09.25.2001
    * www.youngpup.net
    **************************************************
    * 10.28.2001 - fixed minor bug where events
    * sometimes fired off the handle, not the root.
    **************************************************/

    var Drag = {

    obj : null,

    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
    o.onmousedown = Drag.start;

    o.hmode = bSwapHorzRef ? false : true ;
    o.vmode = bSwapVertRef ? false : true ;

    o.root = oRoot && oRoot != null ? oRoot : o ;

    if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
    if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
    if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
    if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

    o.minX = typeof minX != 'undefined' ? minX : null;
    o.minY = typeof minY != 'undefined' ? minY : null;
    o.maxX = typeof maxX != 'undefined' ? maxX : null;
    o.maxY = typeof maxY != 'undefined' ? maxY : null;

    o.xMapper = fXMapper ? fXMapper : null;
    o.yMapper = fYMapper ? fYMapper : null;

    o.root.onDragStart = new Function();
    o.root.onDragEnd = new Function();
    o.root.onDrag = new Function();
    },

    start : function(e)
    {
    var o = Drag.obj = this;
    e = Drag.fixE(e);
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    o.root.onDragStart(x, y);

    o.lastMouseX = e.clientX;
    o.lastMouseY = e.clientY;

    if (o.hmode) {
    if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
    if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
    } else {
    if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
    if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
    }

    if (o.vmode) {
    if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
    if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
    } else {
    if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
    if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
    }

    document.onmousemove = Drag.drag;
    document.onmouseup = Drag.end;

    return false;
    },

    drag : function(e)
    {
    e = Drag.fixE(e);
    var o = Drag.obj;

    var ey = e.clientY;
    var ex = e.clientX;
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    var nx, ny;

    if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
    if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
    if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
    if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

    nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
    ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

    if (o.xMapper) nx = o.xMapper(y)
    else if (o.yMapper) ny = o.yMapper(x)

    Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
    Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
    Drag.obj.lastMouseX = ex;
    Drag.obj.lastMouseY = ey;

    Drag.obj.root.onDrag(nx, ny);
    return false;
    },

    end : function()
    {
    document.onmousemove = null;
    document.onmouseup = null;
    Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
    Drag.obj = null;
    },

    fixE : function(e)
    {
    if (typeof e == 'undefined') e = window.event;
    if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
    if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
    return e;
    }
    };
    </script>
    <!-- ypSimpleScrollC.js -->
    <script type="text/javascript" >
    /* ================================================== =====
    * ypSimpleScroll
    * 3/11/2001
    *
    * http://www.youngpup.net/
    * ================================================== ===== */

    // Modified by Sergi Meseguer (www.zigotica.com) 04/2004
    // Now it works with dragger and can use multiple instances in a page



    ypSimpleScroll.prototype.scrollNorth = function(count) { this.startScroll(90, count) }
    ypSimpleScroll.prototype.scrollSouth = function(count) { this.startScroll(270, count) }
    ypSimpleScroll.prototype.scrollWest = function(count) { this.startScroll(180, count) }
    ypSimpleScroll.prototype.scrollEast = function(count) { this.startScroll(0, count) }

    ypSimpleScroll.prototype.startScroll = function(deg, count) {
    if (this.loaded){
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.overrideScrollAngle(deg)
    this.speed = this.origSpeed
    this.lastTime = (new Date()).getTime() - this.y.minRes
    this.aniTimer = window.setTimeout(this.gRef + ".scroll('"+deg+"','"+count+"')", this.y.minRes)
    }
    }

    ypSimpleScroll.prototype.endScroll = function() {
    if (this.loaded){
    window.clearTimeout(this.aniTimer)
    this.aniTimer = 0;
    this.speed = this.origSpeed
    }
    }

    ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
    if (this.loaded){
    deg = deg % 360
    if (deg % 90 == 0) {
    var cos = deg == 0 ? 1 : deg == 180 ? -1 : 0
    var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
    }
    else {
    var angle = deg * Math.PI / 180
    var cos = Math.cos(angle)
    var sin = Math.sin(angle)
    sin = -sin
    }
    this.fx = cos / (Math.abs(cos) + Math.abs(sin))
    this.fy = sin / (Math.abs(cos) + Math.abs(sin))
    this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
    this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
    }
    }

    ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
    if (this.loaded) this.speed = speed
    }


    ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
    if (this.loaded){
    if (stopH != this.scrollLeft || stopV != this.scrollTop) {
    if (this.aniTimer) window.clearTimeout(this.aniTimer)
    this.lastTime = (new Date()).getTime()
    var dx = Math.abs(stopH - this.scrollLeft)
    var dy = Math.abs(stopV - this.scrollTop)
    var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
    this.fx = (stopH - this.scrollLeft) / (dx + dy)
    this.fy = (stopV - this.scrollTop) / (dx + dy)
    this.stopH = stopH
    this.stopV = stopV
    this.speed = d / aniLen * 1000
    window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
    }
    }
    }

    ypSimpleScroll.prototype.jumpTo = function(nx, ny) {
    if (this.loaded){
    nx = Math.min(Math.max(nx, 0), this.scrollW)
    ny = Math.min(Math.max(ny, 0), this.scrollH)
    this.scrollLeft = nx
    this.scrollTop = ny
    if (this.y.ns4)this.content.moveTo(-nx, -ny)
    else {
    this.content.style.left = -nx + "px"
    this.content.style.top = -ny + "px"
    }
    }
    }

    ypSimpleScroll.minRes = 10
    ypSimpleScroll.ie = document.all ? 1 : 0
    ypSimpleScroll.ns4 = document.layers ? 1 : 0
    ypSimpleScroll.dom = document.getElementById ? 1 : 0
    ypSimpleScroll.mac = navigator.platform == "MacPPC"
    ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0

    ypSimpleScroll.prototype.scroll = function(deg,count) {
    this.aniTimer = window.setTimeout(this.gRef + ".scroll('"+deg+"','"+count+"')", this.y.minRes)
    var nt = (new Date()).getTime()
    var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
    if (d > 0){
    var nx = d * this.fx + this.scrollLeft
    var ny = d * this.fy + this.scrollTop
    var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
    var yOut = (ny >= this.scrollTop && ny >= this.stopV) || (ny <= this.scrollTop && ny <= this.stopV)
    if (nt - this.lastTime != 0 &&
    ((this.fx == 0 && this.fy == 0) ||
    (this.fy == 0 && xOut) ||
    (this.fx == 0 && yOut) ||
    (this.fx != 0 && this.fy != 0 &&
    xOut && yOut))) {
    this.jumpTo(this.stopH, this.stopV)
    this.endScroll()
    }
    else {
    this.jumpTo(nx, ny)
    this.lastTime = nt
    }
    // (zgtc) now we also update dragger position:
    if(deg=='270') theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.stopV)+theThumb[count].minY) + "px"; //ok nomes down
    if(deg=='90') theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.scrollH)+theThumb[count].minY) + "px"; //ok nomes down
    }
    }

    function ypSimpleScroll(id, left, top, width, height, speed) {
    var y = this.y = ypSimpleScroll
    if (document.layers && !y.ns4) history.go(0)
    if (y.ie || y.ns4 || y.dom) {
    this.loaded = false
    this.id = id
    this.origSpeed = speed
    this.aniTimer = false
    this.op = ""
    this.lastTime = 0
    this.clipH = height
    this.clipW = width
    this.scrollTop = 0
    this.scrollLeft = 0
    this.gRef = "ypSimpleScroll_"+id
    eval(this.gRef+"=this")
    var d = document
    d.write('<style type="text/css">')
    d.write('#' + this.id + 'Container { left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; clip:rect(0 ' + width + ' ' + height + ' 0); overflow:hidden; }')
    d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; }')
    d.write('#' + this.id + 'Content { left:' + (-this.scrollLeft) + 'px; top:' + (-this.scrollTop) + 'px; width:' + width + 'px; }')
    // (zgtc) fix to overwrite p/div/ul width (would be clipped if wider than scroller in css):
    d.write('#' + this.id + 'Container p, #' + this.id + 'Container div {width:' + parseInt(width-10) + 'px; }')
    d.write('</style>')
    }
    }

    ypSimpleScroll.prototype.load = function() {
    var d, lyrId1, lyrId2
    d = document
    lyrId1 = this.id + "Container"
    lyrId2 = this.id + "Content"
    this.container = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
    this.content = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
    this.docH = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
    this.docW = Math.max(this.y.ns4 ? this.content.document.width : this.content.offsetWidth, this.clipW)
    this.scrollH = this.docH - this.clipH
    this.scrollW = this.docW - this.clipW
    this.loaded = true
    this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
    this.scrollTop = Math.max(Math.min(this.scrollTop, this.scrollH),0)
    this.jumpTo(this.scrollLeft, this.scrollTop)
    }
    </script>
    <!-- scroller.js -->
    <script type="text/javascript">


    // ================================================== ============
    // HANDLES SCROLLER/S
    // Modified from Aaron Boodman http://webapp.youngpup.net/?request=...mpleScroll.xml
    // mixed ypSimpleScroll with dom-drag script and allowed multiple scrolelrs through array instances
    // (c)2004 Sergi Meseguer (http://zigotica.com/), 04/2004:
    // ================================================== ============
    var theHandle = []; var theRoot = []; var theThumb = []; var theScroll = []; var thumbTravel = []; var ratio = [];

    function instantiateScroller(count, id, left, top, width, height, speed){
    if(document.getElementById) {
    theScroll[count] = new ypSimpleScroll(id, left, top, width, height, speed);
    }
    }

    function createDragger(count, handler, root, thumb, minX, maxX, minY, maxY){
    var buttons = '<div class="up" id="up'+count+'">'+
    '<a href="#" onmouseover="theScroll['+count+'].scrollNorth(\''+count+'\')" '+
    'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
    '<img src="TopArrow.gif" width="18" height="13"></a></div>'+
    '<div class="dn" id="dn'+count+'"">'+
    '<a href="#" onmouseover="theScroll['+count+'].scrollSouth(\''+count+'\')" '+
    'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
    '<img src="BottomArrow.gif" width="18" height="13"></a></div>'+
    '<div class="thumb" id="'+thumb+'" style="left: 135px; top: 15px;">'+
    '<img src="MiddleArrow4.gif" width="18" height="53"></div>';


    document.getElementById(root).innerHTML = buttons + document.getElementById(root).innerHTML;

    theRoot[count] = document.getElementById(root);
    theThumb[count] = document.getElementById(thumb);
    var thisup = document.getElementById("up"+count);
    var thisdn = document.getElementById("dn"+count);
    theThumb[count].style.left = parseInt(minX+15) + "px";
    thisup.style.left = parseInt(minX+15) + "px";
    thisdn.style.left = parseInt(minX+15) + "px";
    theThumb[count].style.border =0;
    theThumb[count].style.top = parseInt(minY) + "px";
    thisup.style.top = 0 + "px";
    thisdn.style.top = parseInt(minY+maxY) + "px";
    //thisdn.style.top = 15 + "px";

    theScroll[count].load();

    //Drag.init(theHandle[count], theRoot[count]); //not draggable on screen
    Drag.init(theThumb[count], null, minX+15, maxX+15, minY, maxY);

    // the number of pixels the thumb can travel vertically (max - min)
    thumbTravel[count] = theThumb[count].maxY - theThumb[count].minY;

    // the ratio between scroller movement and thumbMovement
    ratio[count] = theScroll[count].scrollH / thumbTravel[count];

    theThumb[count].onDrag = function(x, y) {
    theScroll[count].jumpTo(null, Math.round((y - theThumb[count].minY) * ratio[count]));
    }
    }

    // INITIALIZER:
    // ================================================== ============
    // ala Simon Willison http://simon.incutio.com/archive/200...6/addLoadEvent
    function addLoadEvent(fn) {
    var old = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = fn;
    }
    else {
    window.onload = function() {
    old();
    fn();
    }
    }
    }
    addLoadEvent(function(){
    if(theScroll.length>0) {
    for(var i=0;i<theScroll.length;i++){
    createDragger(i, "handle"+i, "root"+i, "thumb"+i, theScroll[i].clipW, theScroll[i].clipW, 15, theScroll[i].clipH-125);
    }
    }
    })
    </script>
    <script type="text/javascript">
    instantiateScroller(0, "scroll0", -6, -90, 175, 385,200);
    instantiateScroller(1, "scroll1", 600, 1000, 875, 1200, 500);
    </script>

    <div class="root" id="root0">
    <div class="scrollContainer" id="scroll0Container">
    <div class="scrollContent" id="scroll0Content">


    <p>Javascript is a different layer of the style and structure ones, and like CSS, it should
    not be required but optional, so that without its use the page should be accessible and usable.
    If the browser cannot interpret the code it will not execute it, but the contents will be
    accessible. This is generally called script degradation. Now, being more specific, what makes
    a piece of code unobtrusive?</p>

    <ol>
    <li><strong>Mix with structure</strong>: mainly, script behaviour not being mixed with
    page contents. This means there will be no intrinsec events inside the document and
    the file will be stored in a separate .js file.</li>

    <li><strong>Initialization</strong>: the ideal solution is the script being initialized
    automatically on page load</li>
    <li><strong>Assign actions with an event handler</strong>: because we have avoided the
    use of intrinsec events we will need a way to associate actions (execute functions) to
    events captured by different elements on the page. </li>

    <li><strong>Compatibility</strong>: browsers that dont understand the code must do without
    it throwing no error messages. </li>

    <li><strong>Capacities detection</strong>: to allow the previous point be true we will use
    object detection instead of browser detection.</li>
    </ol>
    <p>Ending example one.</p>
    </div>
    </div>
    </div></td>
    <td rowspan="2"><img name="index_r8_c4" src="images/index_r8_c4.jpg" width="13" height="386" border="0" id="index_r8_c4" alt="" /></td>
    <td rowspan="2" colspan="2">&nbsp;</td>
    <td rowspan="2"><img name="index_r8_c7" src="images/index_r8_c7.jpg" width="28" height="386" border="0" id="index_r8_c7" alt="" /></td>
    <td rowspan="2" colspan="2"><img name="index_r8_c8" src="images/index_r8_c8.jpg" width="199" height="386" border="0" id="index_r8_c8" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="385" border="0" alt="" /></td>
    </tr>
    <tr>
    <td><img name="index_r9_c10" src="images/index_r9_c10.jpg" width="28" height="1" border="0" id="index_r9_c10" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="11"><img name="index_r10_c1" src="images/index_r10_c1.jpg" width="900" height="36" border="0" id="index_r10_c1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="36" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="11"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r11_c1','','image s/index_r11_c1_f2.jpg',1);"><img name="index_r11_c1" src="images/index_r11_c1.jpg" width="900" height="39" border="0" id="index_r11_c1" alt="" /></a></td>
    <td><img src="images/spacer.gif" width="1" height="39" border="0" alt="" /></td>
    </tr>
    </table>
    </div>

    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

java scroll bar positioning thumb

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com