Member
Custom Scrollbars that works across all Browsers
Searching for days all over the net, including here for simplified ways to create custom scrollbars that works across all browsers is getting to me...
I found a French site with info and how-to however the codes are very large imo.
Can the brains of TalkGraphics show us a few simple ways to achieve this?
(image scrollbars and or colouring etc.)
Thanks in advance
Member
Re: Custom Scrollbars that works across all Browsers
Found this:
h**p://www.n-son.com/scripts/jsScrolling/index.html
How integrate any, (image scrollbar especially) into a page that will load into an iframe?
Thanks
replace ** with tt
Member
Re: Custom Scrollbars that works across all Browsers
Originally Posted by mljk
The samples are nice, but
...so do you need all the files?
how do you use this with XXP5?
sadicus - Win10 ● nvidia 32GB ● XDP17
Member
Re: Custom Scrollbars that works across all Browsers
Good question sadicus, i hope someone knows the answer
Member
Re: Custom Scrollbars that works across all Browsers
Can a Class be added to the body section?
for example: <body class="xyz">
if so then i can change appearance of the scrollbar to match whatever page colour (even if only in internet explorer)
if no then can someone help me out on this, 'cause i can see a little skin on the top of my head now.
to post below...
the pages i created appears within the iframe,
each page if made with a custom scrollbar i believe will show that custom style when needed.
However if the iframe can automatically have a specific color scrollbar (or imaged) - no matter what page opens within would make my day.
Last edited by mljk; 05 February 2010 at 06:27 PM. Reason: added image
Member
Re: Custom Scrollbars that works across all Browsers
Does it need to be in an iframe for some specific reason?
You could do a regular placeholder with your iframe code pointing to the example html. Just make the placeholder big enough that the size defined in that html page will fit and you should see it work just like it's supposed to.
Or, you could take the code from the example html and just paste it right into a properly sized placeholder in the "replace with HTML code" box of the dialog and it should work that way as well.
Each has it's reasons to need to be done. I just tried example 1 with my option 2 and all I needed to do was put the files that they supplied in the same folder structure and then export to there from xara and it worked fine. If you want to change the paths around, then in the replaced HTML, just make sure to do the src= in the <script> tag so that it points to the right referential place.
If you are asking if it can automatically replace the scrollbars themselves in a scrolling iframe, I'd say no.
By the way - thanks for linking these here. I'm sure they will come in handy, especially if I can easily "reskin" them, which I'm guessing I can.
Member
Re: Custom Scrollbars that works across all Browsers
Got this from a site that got it from DD
<script language="JavaScript1.2">
/*---------------[IE 5.5 Scrollbars colorer]--------------------*/
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme) // Predefined themes
{
case "blue":
var line="#78AAFF";
var face="#EBF5FF";
break;
case "orange":
var line="#FBBB37";
var face="#FFF9DF";
break;
case "red":
var line="#FF7979";
var face="#FFE3DD";
break;
case "green":
var line="#00C600";
var face="#D1EED0";
break;
case "neo":
var line="#BC7E41";
var face="#EFE0D1";
break;
}
}
with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#F3F3F3";
}
}
/*------------------[Pointer coordinates catcher]---------------*/
function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w||y-3>h) scrollBar('#000080','#BFDFFF'); // Your colors
else scrollBar(null,null,"neo"); // A predefined theme
}
if (document.all){
scrollBar(null,null,"neo");
document.onmousemove=colorBar;
}
function offscreen(){
scrollBar(null,null,"neo");
}
document.onmouseout=offscreen;
//-->
</script>
place this in the body via placeholder, mod the color and such.
not my work, i can't code.
Posting Permissions
Reply With Quote
Bookmarks