Scrollbalken iframe formatieren IE & Firefox kompatibel

Status
Nicht offen für weitere Antworten.

bobbydigital

Mitglied
Bitte ich brauche eure Hilfe.
Ich möchte einen Scrollbalken farblich ändern und das auch für Firefox und IE.
Habe schon viel probiert bzw. gesucht, aber nichts wiell funktionieren.

HTML:
 <table  width="100%" border="0" height="100%">
           <tr>
             <td width="5%"></td>
             <td width="45%" valign="middle"><iframe frameborder="0" src="ich_text.html"   width="100%" height="400px"></iframe></td>
             <td width="5%"></td>
             <td width="45%"><img src="images/rene.JPG" alt="" border="0"></td>
           </tr>
         </table>

Kann mir da bitte jemand einen guten Tip geben bzw. eine Lösung, brauche den Scrollbalken aber ohne Farbänderung versaut er die Website.....
 
Hi,

die CSS-Eigenschaft scrollbar zum Einfärben der Scroll-Leisten kommt aus dem Hause "Microsoft" und wird zunächst mal nur vom IE unterstützt. Falls das HTML-Dokument im Quirksmode übergeben wird, interpretieren auch Opera und Konqueror diese Eigenschaft.

Alle übrigen Webbrowser ignorieren diese Eigenschaft, da sie nicht zum Webstandard zählt, und das ist meiner Meinung nach auch gut so, denn bunte Scrollbalken haben in einem Webdokument nichts zu suchen, da sie ein Bestandteil des Browserfensters und nicht des HTML-Dokuments sind.

Ich bin in der Vergangenheit, als Firefox noch nicht geboren war, und der IE auf meinem System noch der "Standardbrowser" war, schon über Seiten gestolpert, in denen der Scrollbalken schier nicht greifbar war, da er der Seitenhintergrundfarbe angepasst wurde - alles andere als benutzerfreundlich, und somit für mich ein Grund, die Website im Fenster umgehend zu schliessen und sie zukünftig nicht mehr zu besuchen :rolleyes:

mfg Maik
 
Danke für deine Antwort,
aber ich habe nicht vor den Scrollbalken bunt zu machen.
Meine Website ist in Schwarz-weiß gehalten und ich möchte einen sehr unauffälligen Scrollbalken.
You Know?
Wirklich keine möglichkeit das browserübergreifend zu realisieren
 
Dann wirst du die Scroll-Leiste mit Hilfe von Javascript realisieren müssen, um sie browserübergreifend anbieten / nutzen zu können.

mfg Maik
 
Maik, kannst du mir bitte bei der Realisierung helfen? Habe bis jetzt nicht mit Javascript gearbeitet und keinen Plan, aber muss Montag die Seite abgeben (Auftrag).
 
Ich hab in den Tiefen meines Festplatten-Archivs aus längst vergangenen Tagen (März 2004) von Rod Moleros ein Scrollbar-Script in drei Variationen hervorgekramt, und die aktuellen Browsergenerationen einem Tauglichkeitstest unterworfen.

Meine Testumgebung ist WinXP Prof. SP2 und dies hier die Browser, die sich durchweg als "T1" erwiesen haben :)

  • FF 2 + 3
  • IE 6 + 7
  • Mozilla 1.8b
  • Netscape 9.x
  • Opera 9.5
  • Safari 3.1.2
  • SeaMonkey 1.1.6

Die Zip-Datei enthält die drei Varianten "scrollbar1", "scroller1" und "scroller2", die jeweils im Quirks- und Standardsmode vorliegen - also "scrollbar1_quirksmode.html" und "scrollbar1_standardsmode.html", usw., um die Funktionalität des Scripts in diesen beiden konträren Darstellungsmodi zu überprüfen.

Die zuletzt genannte Variante "scroller2" ist ein erweitertes Script-Konzept, in dem eine frei wählbare Anzahl von Ebenen dynamisch in den Scrollbereich geladen werden können.

Desweiteren findest du in der ZIP-Datei zwei *.js-Dateien, die zu den beiden Varianten "scroller1" und "scroller2" gehören, und die du nur in dein entsprechendes Webverzeichnis zu kopieren, und in den HTML-Seiten den Pfad zu ihnen anzupassen brauchst, alles ganz easy ;)

Die Formatierung der Scrollbalken läuft in allen Varianten ausschliesslich über CSS :)

Ich hoffe, dir damit weiterhelfen zu können, und sollten Fragen auftauchen, einfach kräftig mit dem Finger schnippen ;)

mfg Maik
 

Anhänge

  • js-scrollbar.zip
    24 KB · Aufrufe: 606
hallo Maik,

hab es ausprobiert aber komme irgendwie nicht weiter.
Habe es bis jetzt nur geschafft, dass der Scrollcontainer und die Scrollleiste an der Stelle sind wo ich sie hinhaben möchte, aber Funktion nicht vorhanden. js-dateien sind aber im richtigen Ordner...

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>www.leise.de</title>
<meta name="author" content="Robert Klepsch">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
.clContent
{
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
}

#scrollContainer1
{
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 415px;
        background-color: #000000;
}

#scrollUp1
{
        position: relative;
        width: 10px;
        height: 10px;
        background-color: #ffffff;
        font-size: 1px;
}

#scrollDown1
{
        position: relative;
        width: 10px;
        height: 10px;
        background-color: #ffffff;
        font-size: 1px;
}

#scrollBar1
{
        position: relative;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 100px;
        background-color: #FF0000;
        font-size: 1px;
}

#scrollTrack1
{
        position: relative;
        width: 10px;
        height: 300px;
        background-color: #CCCCCC;
        font-size: 1px;
}
</style>

<script type="text/javascript" src="lib_basic.js"></script>
<script type="text/javascript" src="lib_common.js"></script>

<script type="text/javascript">
// scroller1 by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code

var scroller = {
        scrollables: 2, // set the number of scrollable scrollContent
        step: 30, // set the timeout between each scroll
        speed: 5, // set the scroll speed
        wheelSpeed: 15, // set the scroll speed when using the mouse wheel
        wheelScrolled: false,
        timer: 0,
        contentY: 0,
        dragY: 0,
        clickY: 0,

        mouseDown: function(e)
        {
                e = fixEvent(e);
                var canvas = new getViewport();
                var mouseY = e.clientY + canvas.scrollY;
                var target = (e.target.nodeType == 3 || e.target.tagName.toLowerCase() == 'img') ? e.target.parentNode : e.target;
                scroller.wheelScrolled = false;
                for (var i = 1; i <= scroller.scrollables; i++)
                {
                        if (target.id == scroller.bar[i].el.id)
                        {
                                scroller.bar[i].grab = true;
                                scroller.clickY = mouseY - scroller.bar[i].y;
                                e.preventDefault();
                        }
                        else if (target.id == scroller.track[i].el.id)
                        {
                                if (scroller.content[i].h > scroller.container[i].h)
                                {
                                        scroller.track[i].grab = true;
                                        scroller.dragY = e.layerY - (scroller.bar[i].h / 2);
                                        if (scroller.dragY < 0) scroller.dragY = 0;
                                        if (scroller.dragY > scroller.track[i].h - scroller.bar[i].h) scroller.dragY = scroller.track[i].h - scroller.bar[i].h;
                                        scroller.contentY = 0 - (scroller.dragY * (scroller.content[i].h - scroller.container[i].h) / Math.round(scroller.track[i].h - scroller.bar[i].h));
                                        scroller.content[i].moveTo(0, scroller.contentY);
                                        scroller.bar[i].moveTo(0, scroller.dragY);
                                        e.preventDefault(e);
                                }
                        }
                        else if (target.id == scroller.up[i].el.id)
                        {
                                scroller.up[i].grab = true;
                                scroller.scroll(i, scroller.speed);
                                e.preventDefault();
                        }
                        else if (target.id == scroller.down[i].el.id)
                        {
                                scroller.down[i].grab = true;
                                scroller.scroll(i, -scroller.speed);
                                e.preventDefault();
                        }
                }
        },

        mouseUp: function(e)
        {
                for (var i = 1; i <= scroller.scrollables; i++)
                {
                        scroller.bar[i].grab = false;
                        scroller.track[i].grab = false;
                        scroller.up[i].grab = false;
                        scroller.down[i].grab = false;
                }
                clearTimeout(scroller.timer);
        },

        mouseMove: function(e)
        {
                for (var i = 1; i <= scroller.scrollables; i++)
                {
                        if (scroller.bar[i].grab && scroller.content[i].h > scroller.container[i].h)
                        {
                                e = fixEvent(e);
                                var canvas = new getViewport();
                                var mouseY = e.clientY + canvas.scrollY;
                                scroller.dragY = mouseY - scroller.clickY;
                                if (scroller.dragY < 0) scroller.dragY = 0;
                                if (scroller.dragY > scroller.track[i].h - scroller.bar[i].h) scroller.dragY = scroller.track[i].h - scroller.bar[i].h;
                                scroller.contentY = 0 - (scroller.dragY * (scroller.content[i].h - scroller.container[i].h) / Math.round(scroller.track[i].h - scroller.bar[i].h));
                                scroller.content[i].moveTo(0, scroller.contentY);
                                scroller.bar[i].moveTo(0, scroller.dragY);
                                e.preventDefault();
                        }
                }
        },

        scroll: function(num, speed)
        {
                if (scroller.content[num].y < 0 || scroller.content[num].y > -scroller.content[num].h + scroller.container[num].h)
                {
                        scroller.contentY = scroller.content[num].y + speed;
                        if (scroller.contentY < -(scroller.content[num].h - scroller.container[num].h)) scroller.contentY = -scroller.content[num].h + scroller.container[num].h;
                        else if (scroller.contentY > 0) scroller.contentY = 0;
                        scroller.content[num].moveTo(0, scroller.contentY);
                        scroller.dragY = 0 - (scroller.content[num].y * Math.round(scroller.track[num].h - scroller.bar[num].h) / (scroller.content[num].h - scroller.container[num].h));
                        scroller.bar[num].moveTo(0, scroller.dragY);
                        if (!scroller.wheelScrolled) scroller.timer = setTimeout('scroller.scroll(' + num + ', ' + speed + ')', scroller.step);
                }
        },

        wheelScroll: function(e)
        {
                e = fixEvent(e);
                var el = e.target;
                if (el.id.slice(0, el.id.length - 1) != 'scrollContent')
                {
                        do el = el.parentNode;
                        while (el.tagName.toLowerCase() != 'div' || el.id.slice(0, el.id.length - 1) != 'scrollContent')
                }
                var i = el.id.charAt(el.id.length - 1);
                if (window.event.wheelDelta <= -120)
                {
                        scroller.wheelScrolled = true;
                        scroller.scroll(i, -scroller.wheelSpeed);
                }
                else if (window.event.wheelDelta >= 120)
                {
                        scroller.wheelScrolled = true;
                        scroller.scroll(i, scroller.wheelSpeed);
                }
                e.preventDefault();
        },

        init: function()
        {
                scroller.container = new Array();
                scroller.content = new Array();
                scroller.bar = new Array();
                scroller.up = new Array();
                scroller.down = new Array();
                scroller.track = new Array();
                for (var i = 1; i <= scroller.scrollables; i++)
                {
                        scroller.container[i] = new createObjectById('scrollContainer' + i);
                        scroller.content[i] = new createObjectById('scrollContent' + i);
                        scroller.bar[i] = new createObjectById('scrollBar' + i);
                        scroller.bar[i].grab = false;
                        scroller.track[i] = new createObjectById('scrollTrack' + i);
                        scroller.track[i].grab = false;
                        scroller.up[i] = new createObjectById('scrollUp' + i);
                        scroller.up[i].grab = false;
                        scroller.down[i] = new createObjectById('scrollDown' + i);
                        scroller.down[i].grab = false;
                        if (bw.ie6) addEvent(scroller.content[i].el, 'mousewheel', scroller.wheelScroll, false);
                }
                addEvent(document, 'mousemove', scroller.mouseMove, false);
                addEvent(document, 'mousedown', scroller.mouseDown, false);
                addEvent(document, 'mouseup', scroller.mouseUp, false);
        }
}

onload = scroller.init;
</script>
</head>
<body>
<table  bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" align="center" width="1220px" height="600px" >
    <tr><td  rowspan="4" width="468px" height="100%"><img src="images/versuch_grau.jpg" alt="" width="100%" height="600px"   border="0"></td>
        <td style="background-image:url(images/head.jpg); margin:0; padding:0" align="center" width="752px" height="130px" colspan="3"></td>
    </tr>
    <tr>
      <td height="10px" ><div class="ueberschrift">Navigation</div></td>
      <td align="center"><div class="ueberschrift">&nbsp;</div></td>
    </tr>
    <tr>
      <td height="470px" bgcolor="#363636" valign="top" align="left" width="135px">
        <ul class="menue">
          <li><a href="index.html">Startseite</a></li>
          <li><a href="ich.html">» über mich</a></li>
          <li><a href="bilder_gallery_test/album/index.html">Bilder</a></li>
          <li><a href="gb_rene.php">Gästebuch</a></li><br><br><br><br><br>
        </ul>
      </td>
      <td valign="middle" align="center" width="617px" height="470px">




         <table  width="100%" border="1" height="100%">
           <tr>
             <td width="5%"></td>
             <td width="45%">
              <div id="scrollContainer1">
<div id="scrollContent1" class="clContent">
<font color="#DFDFDF">Im Vorfeld möchte ich mich erst einmal kurz vorstellen, ich bin 33Jahre jung oder alt
Bin 1975 in der Weltstadt Lutherstadt Eisleben geboren und verbrachte dort meine Kindheit bis zum 13.Lebensjahr.
Mit 10 Jahren begann  ich mit der Sportart Ringen und durfte aufgrund meiner Leistungen die Sportschule in Halle/Saale besuchen.
mit dem 13.Lebensjahr besuchen. Dort absolvierte ich auch meinen Realschulabschluss .Ich bereue es ungemein, dass ich damals nicht
in Halle geblieben bin, naja es war halt Wendezeit und man hatte keinen richtigen Plan was man tun sollte, so zog ich wieder nach Eisleben und begann meine Lehre zum Karosserie und Fahrzeugbauer,
welche ich nach einem Jahr abrach, weil ich feststellte, das wenn ich weiter in der Firma bleibe ,das Ausbildungsziel nicht erreichen werde, Zu dieser Zeit war die Baubranche sehr gut bezahlt, also was tat ich ich lernte
Beton und Stahlbetonbauer, gearbeitet habe ich aber nach meiner Ausbildung nie.Ich absolvierte im Anschluss noch einen Exsistenzgründerlehrgang welcher 1,5 Jahre dauerte.
Danach arbeitete ich bei meinem Bruder in der Firma , als Maler. Im Jahr 2000 bekam ich dann meine Einberufung mit 25Jahren,na Klasse dachte ich ,  und wie kam es dann ich verbrachte 8 Jahre bei der Bundeswehr
und durfte sogar 2 mal insgesamt 1Jahr nach Jugoslawien.</font>
</div>
</div>




             </td>
             <td width="5%"><div id="scrollUp1"></div>
<div id="scrollDown1"></div>
<div id="scrollTrack1"><div id="scrollBar1"></div></div>
</td>
             <td width="45%"><img src="images/rene.JPG" alt="" border="0"></td>
           </tr>
         </table>
        </td>
        </tr>
         <tr>



           <td bgcolor="#333333" height="20" width="752px" colspan="3"><div class="footer" align="right"><marquee>* * *&nbsp;  Meine Seite&nbsp;  * * *</marquee></div></td>
         </tr>
  </table>
  <p>&nbsp;</p>

</body>
</html>
 
Hi,

wenn du entgegen der Vorlage, in deiner Seite nur einen Scrollcontainer verwendest, muß auch im Script die Anzahl der scrollfähigen Container korrigiert werden:

Code:
<script type="text/javascript">
// scroller1 by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code

var scroller = {
        scrollables: 2, // set the number of scrollable scrollContent

...
</script>
mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück