I need to create a custom looking scrollbar for one of my pages. I know that it is possible because I have seen it before. Does anyone know how?
does anyone knows how to make custom scrollbar?
|
Hi, don't know what kind of effect you're after, but you'll likely find these are done in Flash (www.macromedia.com). This is a package that allows you to design interfaces etc from a drawn standpoint, rather than code. It's a great bit of kit!
simon
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
simon
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
IE5.5 now lets you change the colours of your scrollbars - yay!
--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
Hi.
Im the site developer of Davesa designs Intl.(davesadesigns.com), and I thought I could share some insight.
If you are unable to create a scrollbar using flash for reasons known to you only, here's the DHTML alternative:
(This is a sample, you may use your own variables)
1. Create 3 layers using <DIV> tags:
Name the first layer "divUp". In this layer you can place an 'up arrow' image or text saying "scroll up", or something.-Ideal width and height of layer could be W:243 H:12
Name the second layer "divCont". Insert another "sub layer" into "divCont". Call this sub layer 'divText', and place all you content or text into it. Tip: Place the 'divUp' layer on top, the 'divCont layer in the middle, and 'divDown(which is next), below.
Last, name the third layer 'divDown', and do the same thing as the first layer, accept put a text saying 'scroll down'.
-----------
OK, visual interface completed. Now for the code:
In the <head> section of your page, insert the following code:
------BEGIN COPYING HERE-----------------------
<style type="text/css">
#divUp{position:absolute; left:170; top:190}
#divDown{position:absolute; left:170; top:380}
#divCont{position:absolute; width:300; height:150; overflow:hidden; top:220; left:170; clip:rect(0,300,150,0); visibility:hidden}
#divText{position:absolute; top:0; left:0}
</style>
<script type="text/javascript" language="JavaScript">
<!--
//I like to use this as a default browser check
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 | | this.ie4 | | this.ns4 | | this.ns5)
return this
}
bw=new checkBrowser()
var speed=50
var loop, timer
//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:b
w.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all
[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//Call the init on page load
onload=scrollInit
-->
----------------------END COPYING HERE-------------------
OK, now in the 'divUp' layer, use this link for the text or image that illustrates "scroll up".
<a href="#" onMouseOver="scroll(-2)" onMouseOut="noScroll()">
-------
Then use the following link in the 'divDown' layer for the text or image that illustrates "scroll down".
<a href="#" onMouseOver="scroll(2)" onMouseOut="noScroll()">
Dont forget to close the <A> tags!!!
Thats it!!
Your DHTML scroll function
Check out a working example(IE) here:
http://www.davesadesigns.com/company/terms.php3
Cordially,
Caesar
Im the site developer of Davesa designs Intl.(davesadesigns.com), and I thought I could share some insight.
If you are unable to create a scrollbar using flash for reasons known to you only, here's the DHTML alternative:
(This is a sample, you may use your own variables)
1. Create 3 layers using <DIV> tags:
Name the first layer "divUp". In this layer you can place an 'up arrow' image or text saying "scroll up", or something.-Ideal width and height of layer could be W:243 H:12
Name the second layer "divCont". Insert another "sub layer" into "divCont". Call this sub layer 'divText', and place all you content or text into it. Tip: Place the 'divUp' layer on top, the 'divCont layer in the middle, and 'divDown(which is next), below.
Last, name the third layer 'divDown', and do the same thing as the first layer, accept put a text saying 'scroll down'.
-----------
OK, visual interface completed. Now for the code:
In the <head> section of your page, insert the following code:
------BEGIN COPYING HERE-----------------------
<style type="text/css">
#divUp{position:absolute; left:170; top:190}
#divDown{position:absolute; left:170; top:380}
#divCont{position:absolute; width:300; height:150; overflow:hidden; top:220; left:170; clip:rect(0,300,150,0); visibility:hidden}
#divText{position:absolute; top:0; left:0}
</style>
<script type="text/javascript" language="JavaScript">
<!--
//I like to use this as a default browser check
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 | | this.ie4 | | this.ns4 | | this.ns5)
return this
}
bw=new checkBrowser()
var speed=50
var loop, timer
//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:b
w.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all
[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
//Call the init on page load
onload=scrollInit
-->
----------------------END COPYING HERE-------------------
OK, now in the 'divUp' layer, use this link for the text or image that illustrates "scroll up".
<a href="#" onMouseOver="scroll(-2)" onMouseOut="noScroll()">
-------
Then use the following link in the 'divDown' layer for the text or image that illustrates "scroll down".
<a href="#" onMouseOver="scroll(2)" onMouseOut="noScroll()">
Dont forget to close the <A> tags!!!
Thats it!!
Your DHTML scroll function
Check out a working example(IE) here:
http://www.davesadesigns.com/company/terms.php3
Cordially,
Caesar
Thanks for that excellent info Caesar - good work.
Best wishes,
Matt
Elated
--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
Best wishes,
Matt
Elated
--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
Hi Caesar
does this work on Mac?
I don't seem to be seeing it...
does this work on Mac?
I don't seem to be seeing it...
Hi Dancingweb,
I have not tested it on a mac.
Which browswer are your viewing from?
My guess is that it works on Mac to , but
in IE only.
Good luck.
Caesar
I have not tested it on a mac.
Which browswer are your viewing from?
My guess is that it works on Mac to , but
in IE only.
Good luck.
Caesar
Hi Caesar
In Netscape it looks like the layers are all showing up in the wrong places - and I can see the scroll arrows
In IE, I see what looks like a regular blank template for the site (which is very nice by the way!) but no scroll arrows - do the arrows only show up if there is content that needs to scroll?
I have read somewhere recently that some DHTML does not work as well on Mac - so I am curious about instances where this is the case.
Thanks for sharing so much info Caesar
it is much appreciated!
-Christy
In Netscape it looks like the layers are all showing up in the wrong places - and I can see the scroll arrows
In IE, I see what looks like a regular blank template for the site (which is very nice by the way!) but no scroll arrows - do the arrows only show up if there is content that needs to scroll?
I have read somewhere recently that some DHTML does not work as well on Mac - so I am curious about instances where this is the case.
Thanks for sharing so much info Caesar
it is much appreciated!
-Christy
Hi Christy,
There's some talk round the office that Netscape might not like those "#" symbols... we're not sure though.
More likely to be NS than the mac platform we reckon.
If we hit on it we'll let you know here.
Simon
Elated
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
There's some talk round the office that Netscape might not like those "#" symbols... we're not sure though.
More likely to be NS than the mac platform we reckon.
If we hit on it we'll let you know here.
Simon
Elated
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
Works beautifully on our mac running IE5 here, but not Netscape at all..
Simon
Elated
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
Simon
Elated
--
ELATED : )
http://www.PageKits.com
Professional Website Templates
Hi Christy.
Thank you for your appreciation. Im glad to share my thoughts.
The reason there are errors in netscape, is because the "css.layers" property is still not supported by Netscape 4.6, although I havent tried it in 6.0. It just might work in that version. Im working my way to fix this problem.
About IE, you mentioned that the scroll bars to not show. This is because the "up" and "down" arrows are supposed to be images that are placed in the "divUp" and "divDown" layer. Again, these arrowed images are only an option. You can simply type text in these layers saying "scroll up", and "scroll down". Dont forget to add the onmouseover and onmouseout events to these links.
Good luck.
View the source code of my working example:(IE).It might help you.
http://www.davesadesigns.com/system/company/terms.php3
Cordially,
Caesar
Thank you for your appreciation. Im glad to share my thoughts.
The reason there are errors in netscape, is because the "css.layers" property is still not supported by Netscape 4.6, although I havent tried it in 6.0. It just might work in that version. Im working my way to fix this problem.
About IE, you mentioned that the scroll bars to not show. This is because the "up" and "down" arrows are supposed to be images that are placed in the "divUp" and "divDown" layer. Again, these arrowed images are only an option. You can simply type text in these layers saying "scroll up", and "scroll down". Dont forget to add the onmouseover and onmouseout events to these links.
Good luck.
View the source code of my working example:(IE).It might help you.
http://www.davesadesigns.com/system/company/terms.php3
Cordially,
Caesar
Thanks so much Caesar!
You are generous
-Christy
You are generous
-Christy
Hi - great work Caesar! I've been looking all over the place to get a non-flash solution to the problem.
I tried to check out the link you have posted but I'm guessing the page doesn't exist anymore. Any other links for working examples?
Thanks so much!
--
Sasha
www.sashaendoh.com
I tried to check out the link you have posted but I'm guessing the page doesn't exist anymore. Any other links for working examples?
Thanks so much!
--
Sasha
www.sashaendoh.com
New posts
Old posts
