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 1 of 1
  1. #1
    Junior Member
    Join Date
    Jan 2012
    Posts
    7
    Member #
    30530

    I'm trying to create my own style custom horizontal scrollbar...
    For I want is change this code to Horizontal Scrolling only,,,,but I can't find to correct these codes

    Thanks for any idea!!!

    Here css code:
    body {
    background:#eee;
    margin:0;padding:0;
    }

    .example {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background:#FFF;
    border:1px #000 solid;
    height:600px;
    margin:20px auto;
    padding:15px;
    position:relative;
    width:800px;
    }

    #main_content {
    height:50%;
    left:5%;
    overflow:auto;
    position:absolute;
    top:5%;
    width:90%;
    }

    .ssb_down {
    background:transparent url(../images/icon-arrow-down.png);
    bottom:0;
    cursorointer;
    position:absolute;
    right:0;
    }

    .ssb_sb {
    background:transparent url(../images/middle.png);
    cursorointer;
    position:absolute;
    right:0;
    }

    .ssb_sb_down {
    background:transparent url(../images/middrag.png);
    }

    .ssb_sb_over {
    background:transparent url(../images/midhover.png);
    }

    .ssb_st {
    background:transparent url(../images/back.png);
    cursorointer;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    }

    .ssb_up {
    background:transparent url(../images/icon-arrow-up.png);
    cursorointer;
    position:absolute;
    right:0;
    top:0;
    }

    .parent {
    font-family:verdana;
    height:100%;
    padding:10px;
    position:relative;
    }

    Here JS code:
    var ssb = {
    aConts : [],
    mouseY : 0,
    N : 0,
    asd : 0, /*active scrollbar element*/
    sc : 0,
    sp : 0,
    to : 0,

    // constructor
    scrollbar : function (cont_id) {
    var cont = document.getElementById(cont_id);

    // perform initialization
    if (! ssb.init()) return false;

    var cont_clone = cont.cloneNode(false);
    cont_clone.style.overflow = "hidden";
    cont.parentNode.appendChild(cont_clone);
    cont_clone.appendChild(cont);
    cont.style.position = 'absolute';
    cont.style.left = cont.style.top = '0px';
    cont.style.width = cont.style.height = '100%';

    // adding new container into array
    ssb.aConts[ssb.N++] = cont;

    cont.sg = false;

    //creating scrollbar child elements
    cont.st = this.create_div('ssb_st', cont, cont_clone);
    cont.sb = this.create_div('ssb_sb', cont, cont_clone);
    cont.su = this.create_div('ssb_up', cont, cont_clone);
    cont.sd = this.create_div('ssb_down', cont, cont_clone);

    // on mouse down processing
    cont.sb.onmousedown = function (e) {
    if (! this.cont.sg) {
    if (! e) e = window.event;

    ssb.asd = this.cont;
    this.cont.yZ = e.screenY;
    this.cont.sZ = cont.scrollTop;
    this.cont.sg = true;

    // new class name
    this.className = 'ssb_sb ssb_sb_down';
    }
    return false;
    }
    // on mouse down on free track area - move our scroll element too
    cont.st.onmousedown = function (e) {
    if (! e) e = window.event;
    ssb.asd = this.cont;

    ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
    this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;
    this.cont.sb.onmousedown(e);
    }

    // onmousedown events
    cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; }
    cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; }

    //onmouseout events
    cont.su.onmouseout = cont.su.onmouseup = ssb.clear;
    cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;

    // on mouse over - apply custom class name: ssb_sb_over
    cont.sb.onmouseover = function (e) {
    if (! this.cont.sg) this.className = 'ssb_sb ssb_sb_over';
    return false;
    }

    // on mouse out - revert back our usual class name 'ssb_sb'
    cont.sb.onmouseout = function (e) {
    if (! this.cont.sg) this.className = 'ssb_sb';
    return false;
    }

    // onscroll - change positions of scroll element
    cont.ssb_onscroll = function () {
    this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;
    this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';
    }

    // scrollbar width
    cont.sw = 20;

    // start scrolling
    cont.ssb_onscroll();
    ssb.refresh();

    // binding own onscroll event
    cont.onscroll = cont.ssb_onscroll;
    return cont;
    },

    // initialization
    init : function () {
    if (window.oper || (! window.addEventListener && ! window.attachEvent)) { return false; }

    // temp inner function for event registration
    function addEvent (o, e, f) {
    if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }
    if (window.attachEvent) return o.attachEvent('on' + e, f);
    return false;
    }

    // binding events
    addEvent(window.document, 'mousemove', ssb.onmousemove);
    addEvent(window.document, 'mouseup', ssb.onmouseup);
    addEvent(window, 'resize', ssb.refresh);
    return true;
    },

    // create and append div finc
    create_div : function(c, cont, cont_clone) {
    var o = document.createElement('div');
    o.cont = cont;
    o.className = c;
    cont_clone.appendChild(o);
    return o;
    },
    // do clear of controls
    clear : function () {
    clearTimeout(ssb.to);
    ssb.sc = 0;
    return false;
    },
    // refresh scrollbar
    refresh : function () {
    for (var i = 0, N = ssb.N; i < N; i++) {
    var o = ssb.aConts;
    o.ssb_onscroll();
    o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';
    o.sb.style.height = Math.ceil(Math.max(o.sw * .5, o.ratio * o.offsetHeight) + 1) + 'px';
    }
    },
    // arrow scrolling
    arrow_scroll : function () {
    if (ssb.sc != 0) {
    ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;
    ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);
    ssb.sp = 32;
    }
    },

    /* event binded functions : */
    // scroll on mouse down
    mousedown : function (o, s) {
    if (ssb.sc == 0) {
    // new class name
    o.cont.sb.className = 'ssb_sb ssb_sb_down';
    ssb.asd = o.cont;
    ssb.sc = s;
    ssb.sp = 400;
    ssb.arrow_scroll();
    }
    },
    // on mouseMove binded event
    onmousemove : function(e) {
    if (! e) e = window.event;
    // get vertical mouse position
    ssb.mouseY = e.screenY;
    if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;
    },
    // on mouseUp binded event
    onmouseup : function (e) {
    if (! e) e = window.event;
    var tg = (e.target) ? e.target : e.srcElement;
    if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();

    // new class name
    if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb';
    document.onselectstart = '';
    ssb.clear();
    ssb.asd.sg = false;
    }
    }

    window.onload = function() {
    ssb.scrollbar('main_content'); // scrollbar initialization
    }

    Here html code:
    <div id="main_content">
    <iframe src="#.html"scrolling="no"></iframe>
    </div>

  2.  


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
  •  
All times are GMT -6. The time now is 01:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com