PDA

View Full Version : IFrame scroller/Change scrollbar style/colour?



tacbob
10-12-2004, 07:25 AM
I have an IFrame scroller, is it possible to change the colour from the default grey to see with the common browsers?
Ideally I would like a scroller where the arrows are a custom graphic with no bar inbetween. Is this possible?

Thank you.

cr3ative
10-12-2004, 01:54 PM
Custom scrollbars:

http://www.siteexperts.com/ie5/tips/ts04/page1.asp

cr3ative

TueyMpls
12-24-2004, 04:47 PM
I would also like to change the color of an iframe scroll bar. The article referenced (if I understand correctly) will change the characteristics of the scroll bars on the browser, but has no effect on the bars within the iframe. Perhaps I'm not applying this correctly, but I've not been able to do this. Any help would be appreciated. Thank you! Terry

TueyMpls
12-28-2004, 02:32 AM
I think I'm missing something here. I have successfully used these attributes to change the colors of the scrolls bars in the browser window, but it does not change the colors of the scroll bars in the inline frame. The main scroll bars are red (for example), but the scrolls bars on the inline frame remain gray.

I use Adobe GoLive to generate the html for my page. I inserted the example code into this page.

Thanks for your help. I really appreciate it.

--------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
</head>

<STYLE>
BODY {color: navy}
BODY {scrollbar-face-color: red}
</STYLE>

<body bgcolor="#ffffff">

<p>
<iframe src="file:///C:/Documents%20and%20Settings/Terry/Desktop/Web%20Designs%20II/web-content/Square%20on%20Load/squares%20on%20load.html" height="397" width="232">
</iframe>

</p>
</body>

</html>

madpeter
12-28-2004, 03:36 AM
the iframe uses the style of what ever its loading so the anything you want to load will need the iframe css inside of it.

this is where linked css files jump in that way you can change the color in 1 css file and have the site change.

someone else jump in if you know a way round this.

TueyMpls
12-30-2004, 02:42 AM
Yes! I got it. I assumed that if applied them to the main browser that the iframe would pick up the changes too. I applied to content of the iframe and presto!

I'm good to go! Thank you!!

d2daj86
11-09-2005, 01:10 PM
hmm ive been having a problem with this as well,

this is the code i used to attach the styles sheet

<link href="styles.css" rel="stylesheet" type="text/css" />

i put the link on the page that the iframe is linked to.


here is my styles sheet page

<STYLE>
BODY {SCROLLBAR-FACE-COLOR: red; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: black; SCROLLBAR-TRACK-COLOR: black; SCROLLBAR-DARKSHADOW-COLOR: black; SCROLLBAR-BASE-COLOR: black}
</STYLE>

can someone eather post a styles sheet that will change the color of an iframe or show me how to fix mine? eather one will work fine, i can edit the css of your code if needed,

thank you

ddadmin
11-09-2005, 07:45 PM
Hi d2daj86:
Not sure if this helps: http://www.dynamicdrive.com/dynamicindex11/barcolor.htm

fuzzicle
06-14-2006, 06:39 AM
hey, im working on a mac here and i wanna do cross browser customs, im using this code i found, im kinda new to the javascript thing so im gonna need some help. For some reason nothing is showing up at all.

-------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">
<script>

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function positionit(){
var dsocleft=document.all? document.body.scrollLeft : pageXOffset
var dsoctop=document.all? document.body.scrollTop : pageYOffset
var window_width=ieNOTopera? document.body.clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? document.body.clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)
</script>

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jennifer Cosmetics</title>
</head>



<body bgcolor="#000000"><center>
<img src="jennifer-cosmetics-main.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="46,77,127,110" href="file:///Macintosh%20HD/Matts%20Projects/news.htm" target="main">
</map>
<div id="Layer1" style="position:absolute; width:495px; height:566px; z-index:1; left: 284px; top: 134px;">

<iframe src="news.htm" height="556" width="523" frameborder="0" name="main"><script language="JavaScript" type="text/JavaScript">
<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=1" onmouseout="myspeed=0"><img
src="arrows_up.gif" border="0"></a><br>
<a href="javascript:" onmouseover="myspeed=1" onmouseout="myspeed=0"><img
src="arrows_dn.gif" border="0"></a>
</div>
</script>

</iframe></div>



</body>
</html>

boxxertrumps
06-14-2006, 10:38 PM
<style type="text/css">
body {
background-color=#777777;
scrollbar-base-color:#44444;
scrollbar-face-color:#777777;
scrollbar-arrow-color:#bbbbbb;
</style>

Change the colors to anything.
just mess around with it.

blindaje
11-29-2006, 10:38 PM
it works!

you have to apply the style in the page showing inside the iframe, thanks everybody!