Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: IFrame scroller/Change scrollbar style/colour?

  1. #1
    Join Date
    Sep 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default IFrame scroller/Change scrollbar style/colour?

    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.
    Last edited by tacbob; 10-12-2004 at 11:32 AM.

  2. #2
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  3. #3
    Join Date
    Dec 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to change Iframe scroll bar

    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

  4. #4
    Join Date
    Dec 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Dec 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!!

  7. #7
    Join Date
    Nov 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hmm ive been having a problem with this as well,

    this is the code i used to attach the styles sheet
    Code:
    <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
    Code:
    <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

  8. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hi d2daj86:
    Not sure if this helps: http://www.dynamicdrive.com/dynamicindex11/barcolor.htm

  9. #9
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  10. #10
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Exclamation

    <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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •