Scrollbar in Firefox!

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Nemesis Force, 15. Juni 2007 .

Schlagworte:
  1. 15. Juni 2007
    Hallo,
    es gibt ja Funktionen die, die Scrollleiste einfärben und diese sich somit farblich frei gestalten lässt. Nun will ich aber, da ich mit einem sehr langen Text in einem DIV-Tag arbeite, eine schöne Scrollbar hinzufügen. Ich mein die eigentliche Scrollbar ist ja schon da - leider ist das nur die Standardausführung. Ich will meine Scrollbar bissl kleiner haben und andere Farben verwenden, doch wie funktioniert das, denn im Firefox funktioniert mit den Befehlen:

    z.B.: scrollbar-face-color: #FFFFFF;


    nicht viel! X(
     
  2. 15. Juni 2007
    AW: Scrollbar in Firefox!

    mh shit! Kann ich es vlllt realisieren, das ich die scrollbar weglassen und dafür meinetwegen 2 Buttons hinbastle: "oben" und "unten" - wenn man auf "unten" klickt, dann scrollt der Text nach oben, also im Prinzip wie bei einer scrollbar ?(
     
  3. 15. Juni 2007
    AW: Scrollbar in Firefox!

    ja mit javascript ... den scrollbalken kriegst glaub mit
    Code:
    overflow:hidden;
    
    weg ... mit javascript kenn ich mich leider net aus ...
     
  4. 15. Juni 2007
    AW: Scrollbar in Firefox!

    man könnte die scrollbar mit javascript simulieren. mit css overflow:hidden; den zulangen text entfernen und mit javascript den ganzen content holen und eben nur immer eine zeile unten weg und oben dazu, oder anders rum.

    vlt versuch ich das mal zu machen^^

    so hier:
    HTML:
    <html>
    <head>
    <script language="javascript">
    <!--
    /*
    * javascriptscroller
    * made by murdoc
    */
    function scrollToLine(to)
    {
     var contents = document.getElementById('content');
     if(typeof(oldcontent) == "undefined") oldcontent = contents.innerHTML;
     if(typeof(line) == "undefined") line =0;
     var content = contents.innerHTML;
    
     if (window.navigator.userAgent.indexOf("MSIE ") > -1 && parseFloat(navigator.appVersion) >= 4) {
     //ie hat große breaks
     var old = oldcontent.split("<BR>");
     var now = content.split("<BR>");
     }
     else {
     //mozilla hat kleine breaks...
     var old = oldcontent.split("<br>");
     var now = content.split("<br>");
     }
    
    
     if(to == "up") {
     line = line-1;
     if(line <= 0) {
     line = 0;
     contents.innerHTML = oldcontent;
     }
     else {
     var set = "";
     for(i=line; i<old.length; i++) {
     set += old[i]+"<br>";
     }
     contents.innerHTML = set;
     }
     }
     else {
     line = line+1;
     if(line >= old.length) {
     line = old.length;
     contents.innerHTML = content;
     }
     else {
     var set = "";
     for(i=line; i<old.length; i++) {
     set += old[i]+"<br>";
     }
     contents.innerHTML = set;
     }
     }
    }
    // -->
    </script>
    <style type="text/css">
    .whatever {
    border: 1px solid black;
    height: 200px;
    width: 500px;
    overflow: hidden;
    font-size: 12px;
    }
    
    .scrolling {
    background-color: black;
    float:right;
    }
    
    .scrollbar div.scroll .button {
    background-color: white;
    border: 1px solid black;
    width: 20px;
    font-weight: bold;
    font-size: 14px;
    }
    
    .scrollbar #bottom {
    padding-top: 160px;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    .scrollbar #bottom {
    padding-top: 154px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="whatever">
     <div class="scrollbar">
     <div class="scrolling">
     <div class="scroll" id="top"><input type="button" value="/\" class="button" onclick="scrollToLine('up');" /></div>
     <div class="scroll" id="bottom"><input type="button" value="V" class="button" onclick="scrollToLine('down');"/></div>
     </div>
    <!--contents-->
    <span id="content">
    TESTESTETSETSTETS<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    TESTESTE<br>
    <br>
    <br>
    <br>
    TEST!<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    TEST!!ENDE
    </span>
    <!--/contents-->
    
     <div style="clear:both;"></div>
     </div>
    </div>
    </body>
    </html>
     
  5. 17. Juni 2007
    AW: Scrollbar in Firefox!

    also das ist ja schonmal nicht schlecht, bloß ist es immernoch eine scrollbar!

    ok... ich habe nen div-container, darunter will ich zwei buttons haben, einen mit nem plus-zeichen, den anderen mit nem minus. das script habe ich versucht schon so umzubasteln funktioniert aber nicht
     
  6. 17. Juni 2007
    AW: Scrollbar in Firefox!

    aber lass dir gesagt sein dass das script oben ein funscript is und eine echte scrollbar nicht ersetzen kann, nur die funktion is die selbe^^ bei sehr langen texten würd ich das nicht machen!!
     
  7. 17. Juni 2007
    AW: Scrollbar in Firefox!

    ja werd ich mir merken.

    mein problem:

    ich füge den code vom javascript ganz normal ein, dann die beiden buttons direkt unter dem code des div-containers. allerdings wenn ich dann nen button klicke, ändert sich das design:

    - bg-image verschwindet
    - div-container auch weg
    - beide buttons erscheinen nun in der mitte der seite

    also ich weiß echt nicht hier mal der code vom div-container:

    HTML:
    #index
    {
     font-family:Tahoma;
     font-size:10px;
     color:#FFFFFF;
     position:absolute;
     width:300px;
     height:80px;
     bottom:313px;
     left:500px;
     overflow:auto;
     line-height:15px;
    }
    
    dann der code in der index:

    HTML:
    <div id="index">
    bla index-text<br /><br /><br /><br /><br />
    bla index-text<br /><br /><br /><br /><br />
    bla index-text<br /><br /><br /><br /><br />
    bla index-text<br /><br /><br /><br /><br />
    </div>
    <input type="button" value="+" onclick="scrollToLine('up');" />
    <input type="button" value="-" onclick="scrollToLine('down');" />
    
    der code vom javascript ist wie bei dir... bloß das will einfach nicht - "class" muss ich ja da nicht angeben, bei die buttons, da dies ja nur die darstellung der buttons ändert
     
  8. 19. Juni 2007
    AW: Scrollbar in Firefox!

    du könntest, wenn ich mich nicht komplett irre, auch mit einem iframe arbeiten...

    dort gibt es das argument scrolling="no".

    dann hast du schon mal keine scrollbalken. wenn du jetzt noch mit internen links arbeitest (also <a name="hier_her"> an der stelle wo du hinspringen willst und mit dem link <a href="#hier_her">runter</a>, dann kommt man dahin^^)

    das ganze würde dann eben in der eingebundenen html/php datei verwirklicht. weiß nicht ob das jetzt auch so hinhauen könnte... aber müsste, wenn ich mich nicht zu 100% irre... sonst tut es mir leid.

    mfg
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.