Scrollbar!!!!!!

LiLSweetie · #1 (**permalink**) 07-10-04, 11:57 PM

How to makr a scrollbar Images??
Like this
http://pics.xs.to/pics/04070/scroll.gif

nekeno12 · #2 (**permalink**) 07-11-04, 03:35 PM

I'm pretty sure that's in flash. You're in the wrong forum if you need help with a scrollbar.

Try UltraShock.com

jasong · #3 (**permalink**) 07-11-04, 04:04 PM

Yeah, thats flash.
All you can do without flash is change the colors.

LiLSweetie · #4 (**permalink**) 07-11-04, 06:21 PM

Nope its not flash!!! I do have the code ya know but it didnt work with me. I asked for it cuz it might be different than the one I have!

nekeno12 · #5 (**permalink**) 07-11-04, 11:22 PM

Okay, why don't you show us where you found that scroll bar so we can evaluate what it's written in

Thanks!

It would be even more helpful, if you could post the code that makes it work!

Or leave it as a mystery and have no help

studenteye · #6 (**permalink**) 07-12-04, 04:07 AM

Hi,

this scrollbar is looking cool. you can make a scrollbar like this by using javascript.

i did work on it. my scroll bar is not fully working . when you mouse move on up arrow or down arrow then it is working good . but you can not use scrollbar from its middle.

tips:
if any one is intrested in it then few tips for you.
1 : make a frame with 100% width ( scrollbar = no)
=> by using frame we can hide orignal scrollbar of page

2 : make two scrollbar images ( *.jpg , *.gif). for up and down arrow

3 : display it on page by setting up its x and y position
=> e.g document.write("<table cellspacing='0' border='0' cellpadding='0' style='POSITION:absolute;TOP: 50px; left: 550px;'>")

4 : on mouse over of images increase or decrease y-axis of page

if your requirment is some thing like this then i will post you its whole code. but sorry this time i am out of city.

LiLSweetie · #7 (**permalink**) 07-12-04, 01:14 PM

Ok guys, this is the code!!!!!!!!! Now tell me how to get it working!

This code comes on the <head> tag

<script language="JavaScript">

</script>
<script language="JavaScript1.2">

</script>

<SCRIPT language=javascript1.2>
var scrollbar = "images/scroll_scroll.gif";
var uparrow = "images/scroll_arrow.gif";
var downarrow = "images/scroll_arrow.gif";
var barbg = "images/scroll_bar.gif";
</SCRIPT>
<SCRIPT language=javascript1.2>

ns4 = (document.layers)?true:false
ie4 = (document.all)?true:false
dom = (document.getElementById)?true:false

var mouseX
var mouseY
var id
var click
var clickDrag
var contentY
var contentH
var barY
var barSize = 16 //this you can change acording to your site
var scrollTimer = setTimeout("",500)
var btnSize = 16
var speed = 6
var height
var boxCSS = "<style type='text/css'>\n"
var boxHTML = "<span id='liatClip'><span id='liat'></span></span>\n"
hasScroll = true

boxes = new Array()

function scrollBox(x, y, w, h, i){
l = boxes.length
boxes[l] = this
this.x = x
this.y = y
this.w = w
this.h = h
this.i = i
this.upY = y
this.downY = y + (h - btnSize)
this.downX = x + (w - btnSize)
boxCSS += "#"+i+"Clip {position:absolute;top:"+y+";left:"+x+";height:"+h +";width:"+w+";clip:rect(0,"+w+","+h+",0);overflow :hidden;z-index:10}\n"
boxCSS += "#"+i+" {position:absolute;left:0;top:0;width:"+(w-btnSize)+";}\n"
boxCSS += "#"+i+"barBg {position:absolute;top:"+y+";left:"+(x+(w-btnSize))+";height:"+h+";width:"+btnSize+";backgro und-image:url('"+ barbg +"');layer-background-image:url('"+ barbg +"');z-index:11}"
boxHTML += "<span id="+i+"barBg> </span>"
boxCSS += "#"+i+"verscrollbar {position:absolute;top:"+(y+btnSize)+";left:"+(x+( w-btnSize))+";height:16;width:15;z-index:15}\n"
boxHTML += "<span id='"+i+"verscrollbar'><img src='"+ scrollbar +"' width='15' height='16' border='0'></span>\n"
boxCSS += "#"+i+"UpBtn {position:absolute;top:"+y+";left:"+(x+(w-btnSize))+";height:16;width:15;z-index:15}\n"
boxHTML += "<span id='"+i+"UpBtn'><img src='"+ uparrow +"' width='15' height='16' border='0'></span>\n"
boxCSS += "#"+i+"DnBtn {position:absolute;top:"+(y+(h-btnSize))+";left:"+(x+(w-btnSize))+";z-index:13}\n"
boxHTML += "<span id='"+i+"DnBtn' style=''><img src='"+ downarrow +"' width='15' height='16' border='0'></span>\n"
}

function scrollCSS(){
boxCSS += "</style>\n"
document.open()
document.write(boxCSS)
document.close()
}

function scrollHTML(){
document.open()
document.write(boxHTML)
document.close()
for (l = 0;l < boxes.length; l++){
i = boxes[l].i
if (dom){
document.getElementById(i).contentH = document.getElementById(i).offsetHeight
document.getElementById(i).style.top = 0
document.getElementById(i+"verscrollbar").y = boxes[l].y + btnSize
if (document.getElementById(i).contentH < boxes[l].h) document.getElementById(i+"verscrollbar").style.vi sibility = "hidden"
} else if (ie4){
document.all[i].contentH = document.all[i].offsetHeight
document.all[i].style.top = 0
document.all[i+"verscrollbar"].y = boxes[l].y + btnSize
if (document.all[i].contentH < boxes[l].h) document.all[i+"verscrollbar"].style.visibility = "hidden"
} else if (ns4){
document[i+"Clip"].document[i].contentH = document[i+"Clip"].document[i].document.height
document[i+"verscrollbar"].y = boxes[l].y + btnSize
if (document[i+"Clip"].document[i].contentH < boxes[l].h) document[i+"verscrollbar"].visibility = "hide"
}
}
}

function down(e){
getMouse(e)
for (i=0; i < boxes.length; i++) {
box = boxes[i]
if (mouseY > box.y && mouseY < (box.y + box.h) && mouseX > box.downX && mouseX < (box.downX + btnSize) ) {
id = box.i
height = box.h
barStop = (box.y + box.h) - (barSize + btnSize)
barT = box.y + btnSize
if (dom) dragTop = document.getElementById(id+"verscrollbar").y
if (ie4) dragTop = document.all[id+"verscrollbar"].y
if (ns4) dragTop = document[id+"verscrollbar"].y
if (mouseY > box.upY && mouseY < (box.upY+btnSize)){
click = true
return scrollUp()
}
if (mouseY > box.downY && mouseY < (box.downY+btnSize)){
click = true
return scrollDn()
}
if (mouseY < box.downY && mouseY > (dragTop + barSize)){
click = true
return scrollDn()
}
if (mouseY > (box.upY + btnSize) && mouseY < dragTop){
click = true
return scrollUp()
}
if (mouseY > dragTop && mouseY < (dragTop + barSize)){
clickDrag = true
return false
}
}
}
}

function move(e){
if(click && ie4) return false
if(clickDrag){
getMouse(e)
getPos()
barY = mouseY - (barSize / 2)
if (barY < barT) barY = barT
if (barY > barStop) barY = barStop
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
barPosition = (barY - barT) / (height - ((btnSize * 2) + barSize))
position = barPosition * (contentH - height)
contentY = -position
scroll()
if(ie4)return false
}
}

function up(){
clearTimeout(scrollTimer)
click = false
clickDrag = false
}

function scrollUp(){
getPos()
if (mouseY > barY){
return up()
} else {
if (contentY < 0){
contentY = contentY + speed
if (contentY > 0) contentY = 0
barY = barY - (speed / (contentH - height)) * ((height - (btnSize*2)) - barSize)
if (barY < barT) barY = barT
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
scroll()
scrollTimer = setTimeout("scrollUp()",25)
}
}
return false
}

function scrollDn(){
getPos()
if (mouseY < (barY + barSize)){
return up()
} else {
if (contentY > (-contentH + height)){
contentY = contentY - speed
if (contentY < (-contentH + height)) contentY = (-contentH + height)
barY = barY + (speed / (contentH - height)) * ((height - (btnSize*2)) - barSize)
if (barY > barStop) barY = barStop
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
scroll()
scrollTimer = setTimeout("scrollDn()",25)
}
}
return false
}

function scroll(){
if (dom){
document.getElementById(id+"verscrollbar").style.t op = barY
document.getElementById(id).style.top = contentY
} else if (ie4){
document.all[id+"verscrollbar"].style.top = barY
document.all[id].style.top = contentY
} else if (ns4){
document[id+"verscrollbar"].top = barY
document[id+"Clip"].document[id].top = contentY
}
}

function getPos(){
if (dom){
contentY = parseInt(document.getElementById(id).style.top)
barY = document.getElementById(id+"verscrollbar").y
contentH = document.getElementById(id).contentH
} else if (ie4){
contentY = parseInt(document.all[id].style.top)
barY = document.all[id+"verscrollbar"].y
contentH = document.all[id].contentH
} else if (ns4){
contentY = document[id+"Clip"].document[id].top
barY = document[id+"verscrollbar"].y
contentH = document[id+"Clip"].document[id].contentH
}
return true
}

function getMouse(e){
if (ie4){
mouseY = event.clientY + document.body.scrollTop
mouseX = event.clientX + document.body.scrollLeft
} else if (ns4 || dom){
mouseY = e.pageY
mouseX = e.pageX
}
}

function init(){
}
if(ns4){
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
document.onmousedown = down
document.onmousemove = move
document.onmouseup = up

liat = new scrollBox(0,0,0,0,"liat")

</SCRIPT>
<SCRIPT language=JavaScript1.2>
content = new scrollBox(50,5,300,300,"content")
</SCRIPT>
<SCRIPT language=JavaScript1.2>
scrollCSS()
</SCRIPT>

This code comes after the <body> tag

<span id=contentClip>
<span id=content></span></span>

This code you put before the </body> tag

</span></span>
<script language=javascript1.2>
scrollHTML() </script>

you have to create a folder with the name "images" and in this folder you have to put those images (save them to your hard drive in a folder name "images")

============

Here is a samle of all the code

<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
<script language="JavaScript1.2">

</script>

<SCRIPT language=javascript1.2>
var scrollbar = "images/scroll_scroll.gif"; //my images
var uparrow = "images/scroll_arrow.gif";
var downarrow = "images/scroll_arrow.gif";
var barbg = "images/scroll_bar.gif";
</SCRIPT>
<SCRIPT language=javascript1.2>

ns4 = (document.layers)?true:false
ie4 = (document.all)?true:false
dom = (document.getElementById)?true:false

var mouseX
var mouseY
var id
var click
var clickDrag
var contentY
var contentH
var barY
var barSize = 16
var scrollTimer = setTimeout("",500)
var btnSize = 16
var speed = 6
var height
var boxCSS = "<style type='text/css'>\n"
var boxHTML = "<span id='liatClip'><span id='liat'></span></span>\n"
hasScroll = true

boxes = new Array()

function scrollBox(x, y, w, h, i){
l = boxes.length
boxes[l] = this
this.x = x
this.y = y
this.w = w
this.h = h
this.i = i
this.upY = y
this.downY = y + (h - btnSize)
this.downX = x + (w - btnSize)
boxCSS += "#"+i+"Clip {position:absolute;top:"+y+";left:"+x+";height:"+h +";width:"+w+";clip:rect(0,"+w+","+h+",0);overflow :hidden;z-index:10}\n"
boxCSS += "#"+i+" {position:absolute;left:0;top:0;width:"+(w-btnSize)+";}\n"
boxCSS += "#"+i+"barBg {position:absolute;top:"+y+";left:"+(x+(w-btnSize))+";height:"+h+";width:"+btnSize+";backgro und-image:url('"+ barbg +"');layer-background-image:url('"+ barbg +"');z-index:11}"
boxHTML += "<span id="+i+"barBg> </span>"
boxCSS += "#"+i+"verscrollbar {position:absolute;top:"+(y+btnSize)+";left:"+(x+( w-btnSize))+";height:16;width:15;z-index:15}\n"
boxHTML += "<span id='"+i+"verscrollbar'><img src='"+ scrollbar +"' width='15' height='16' border='0'></span>\n"
boxCSS += "#"+i+"UpBtn {position:absolute;top:"+y+";left:"+(x+(w-btnSize))+";height:16;width:15;z-index:15}\n"
boxHTML += "<span id='"+i+"UpBtn'><img src='"+ uparrow +"' width='15' height='16' border='0'></span>\n"
boxCSS += "#"+i+"DnBtn {position:absolute;top:"+(y+(h-btnSize))+";left:"+(x+(w-btnSize))+";z-index:13}\n"
boxHTML += "<span id='"+i+"DnBtn' style=''><img src='"+ downarrow +"' width='15' height='16' border='0'></span>\n"
}

function scrollCSS(){
boxCSS += "</style>\n"
document.open()
document.write(boxCSS)
document.close()
}

function scrollHTML(){
document.open()
document.write(boxHTML)
document.close()
for (l = 0;l < boxes.length; l++){
i = boxes[l].i
if (dom){
document.getElementById(i).contentH = document.getElementById(i).offsetHeight
document.getElementById(i).style.top = 0
document.getElementById(i+"verscrollbar").y = boxes[l].y + btnSize
if (document.getElementById(i).contentH < boxes[l].h) document.getElementById(i+"verscrollbar").style.vi sibility = "hidden"
} else if (ie4){
document.all[i].contentH = document.all[i].offsetHeight
document.all[i].style.top = 0
document.all[i+"verscrollbar"].y = boxes[l].y + btnSize
if (document.all[i].contentH < boxes[l].h) document.all[i+"verscrollbar"].style.visibility = "hidden"
} else if (ns4){
document[i+"Clip"].document[i].contentH = document[i+"Clip"].document[i].document.height
document[i+"verscrollbar"].y = boxes[l].y + btnSize
if (document[i+"Clip"].document[i].contentH < boxes[l].h) document[i+"verscrollbar"].visibility = "hide"
}
}
}

function down(e){
getMouse(e)
for (i=0; i < boxes.length; i++) {
box = boxes[i]
if (mouseY > box.y && mouseY < (box.y + box.h) && mouseX > box.downX && mouseX < (box.downX + btnSize) ) {
id = box.i
height = box.h
barStop = (box.y + box.h) - (barSize + btnSize)
barT = box.y + btnSize
if (dom) dragTop = document.getElementById(id+"verscrollbar").y
if (ie4) dragTop = document.all[id+"verscrollbar"].y
if (ns4) dragTop = document[id+"verscrollbar"].y
if (mouseY > box.upY && mouseY < (box.upY+btnSize)){
click = true
return scrollUp()
}
if (mouseY > box.downY && mouseY < (box.downY+btnSize)){
click = true
return scrollDn()
}
if (mouseY < box.downY && mouseY > (dragTop + barSize)){
click = true
return scrollDn()
}
if (mouseY > (box.upY + btnSize) && mouseY < dragTop){
click = true
return scrollUp()
}
if (mouseY > dragTop && mouseY < (dragTop + barSize)){
clickDrag = true
return false
}
}
}
}

function move(e){
if(click && ie4) return false
if(clickDrag){
getMouse(e)
getPos()
barY = mouseY - (barSize / 2)
if (barY < barT) barY = barT
if (barY > barStop) barY = barStop
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
barPosition = (barY - barT) / (height - ((btnSize * 2) + barSize))
position = barPosition * (contentH - height)
contentY = -position
scroll()
if(ie4)return false
}
}

function up(){
clearTimeout(scrollTimer)
click = false
clickDrag = false
}

function scrollUp(){
getPos()
if (mouseY > barY){
return up()
} else {
if (contentY < 0){
contentY = contentY + speed
if (contentY > 0) contentY = 0
barY = barY - (speed / (contentH - height)) * ((height - (btnSize*2)) - barSize)
if (barY < barT) barY = barT
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
scroll()
scrollTimer = setTimeout("scrollUp()",25)
}
}
return false
}

function scrollDn(){
getPos()
if (mouseY < (barY + barSize)){
return up()
} else {
if (contentY > (-contentH + height)){
contentY = contentY - speed
if (contentY < (-contentH + height)) contentY = (-contentH + height)
barY = barY + (speed / (contentH - height)) * ((height - (btnSize*2)) - barSize)
if (barY > barStop) barY = barStop
if (dom) document.getElementById(id+"verscrollbar").y = barY
if (ie4) document.all[id+"verscrollbar"].y = barY
if (ns4) document[id+"verscrollbar"].y = barY
scroll()
scrollTimer = setTimeout("scrollDn()",25)
}
}
return false
}

function scroll(){
if (dom){
document.getElementById(id+"verscrollbar").style.t op = barY
document.getElementById(id).style.top = contentY
} else if (ie4){
document.all[id+"verscrollbar"].style.top = barY
document.all[id].style.top = contentY
} else if (ns4){
document[id+"verscrollbar"].top = barY
document[id+"Clip"].document[id].top = contentY
}
}

function getPos(){
if (dom){
contentY = parseInt(document.getElementById(id).style.top)
barY = document.getElementById(id+"verscrollbar").y
contentH = document.getElementById(id).contentH
} else if (ie4){
contentY = parseInt(document.all[id].style.top)
barY = document.all[id+"verscrollbar"].y
contentH = document.all[id].contentH
} else if (ns4){
contentY = document[id+"Clip"].document[id].top
barY = document[id+"verscrollbar"].y
contentH = document[id+"Clip"].document[id].contentH
}
return true
}

function getMouse(e){
if (ie4){
mouseY = event.clientY + document.body.scrollTop
mouseX = event.clientX + document.body.scrollLeft
} else if (ns4 || dom){
mouseY = e.pageY
mouseX = e.pageX
}
}

function init(){
}
if(ns4){
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
document.onmousedown = down
document.onmousemove = move
document.onmouseup = up

liat = new scrollBox(0,0,0,0,"liat")

</SCRIPT>
<SCRIPT language=JavaScript1.2>
content = new scrollBox(50,5,300,300,"content") //this you change acording your page size
</SCRIPT>
<SCRIPT language=JavaScript1.2>
scrollCSS()
</SCRIPT>

</head>

<span id=contentClip><span id=content>your text and html code here</span></span>
<script language=javascript1.2>
scrollHTML()
</script>

LiLSweetie · #8 (**permalink**) 07-13-04, 04:04 PM

Please Say Something!!!

MrKafaaski · #9 (**permalink**) 07-22-04, 06:01 PM

Why not use css?

CSS-file:

Code:

#scrollbar {
overflow: auto;
background-color: #fff;
color: #000;
}

HTML-file:

Code:

<div id="scrollbar">Lotsa text</div>