azzhey Posted January 25, 2012 Report Share Posted January 25, 2012 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; cursor:pointer; position:absolute; right:0; } .ssb_sb { background:transparent url(../images/middle.png); cursor:pointer; 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); cursor:pointer; height:100%; position:absolute; right:0; top:0; } .ssb_up { background:transparent url(../images/icon-arrow-up.png); cursor:pointer; 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.