azzhey

Thanks

I have many slides but got problem can't find the current number of slide! How to show current slide number? ex: ( 3 of 8 ) Thanks for any idea! Here is example : http://jsfiddle.net/VbHEB/18/

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>

Hello!!! I have many tables with tr and td, and I want to create Next/Previous to navigate these tables by id..... ex: ( <<Prev 3 of 5 Next>> ) Do you have any idea or tutorial to show me how to do with javascript? Thanks

I'm coding a simple website by my own. Now I have only way to manage contents manually, haha so now I want an iframe scrolling on horizontal only, no need vertical scrolling! Have any idea to fix this? thanks for help.

Thanks for trying to help me and soft ! !!!Sorry for crosspost and that failed upload the sample image in this forum For I want is......html, php, or mysql as admin to edit, add, and remove contents and the content upload by code(ex: <a href="#"><img src="#.jpg"></a>) not choose image file from computer! one more is have next/previous depend on much content! my english language is not good to explain,,,hahaha!!! Thanks for any help! happy weekend!

Dear! I'm an html beginner, and I want to create a form easy to edit, add, delete contents in a table. and the table have next/previous if have much contents. Do you have an idea or tutorial to show me how can connect my html with PHP admin content editor or else..? Thanks ^^ below is example images (thumbnail): [Mod Comment] Copied / pasted from now removed mostly identical post: here is example images: http://www.webdesign...ample-jpg.4680/