Antworten zum Thema „Eigenes Scrollbardesign“

MachineHead · 26.06.2007

Sers,

hab mich endlich mal wieder an ein neues Design für meine Homepage gemacht. Sie wird im Darkstyle ausfallen und dazu würde ich gerne eine selbstdesignte Scrollbar einbinden (Die Standard-Browserscrollbars kommen da garantiert nicht gut). Gibt es eine Möglichkeit bzw welche? Hab nicht sonderlich viel bock mit Flash rumzuwerkeln, deswegen bitte ich um Alternativlösungen.

Vielleicht noch Details zur Scrollbar:

Das Design hab ich mal vor nem Jahr angefangen, das Prinzip der Scrollbar ist gleich

Danke im Voraus.

Duddle · 26.06.2007

AW: Eigenes Scrollbardesign

Hmmm, nur Flash und JavaScript sind mögliche Kandidaten um eigene Scrollbalken zu machen. Da du Flash nicht magst, klassisches Ausschlussprinzip, bleibt nur JavaScript übrig.
Willst du selbst was skripten oder lieber eine vorgefertigte Lösung?

Duddle

MachineHead · 26.06.2007

AW: Eigenes Scrollbardesign

naja ... ne vorgefertigte Lösung die sich leicht an mein design anpassen lässt wär gut

ich hab davon im moment noch keinen plan deswegen hör ich mir gerne vorschläge von euch an

pitTti · 26.06.2007

AW: Eigenes Scrollbardesign

Auja Duddle, das wäre toll wenn du nen Beispiel posten könntest. So lang ist der Befehl glaube ich auch nicht, hab den letztens irgendwo gesehen aber vergessen mir den zu notieren ^^ :/

knispel · 26.06.2007

AW: Eigenes Scrollbardesign

Hi,

ich gehe mal davon aus, dass Du Dein Layout mit DIVs umsetzt.
Hier mal ein Beispiel mit zwei DIVs von Michael Praast:

im head:

HTML:

<script type="text/javascript" src="scrolldiv.js"></script>
<style type="text/css">
#scrollWindowDiv 
    {
    position:relative; 
    left:10px; 
    top:10px; 
    width:450; 
    height:255;
    clip:rect(0,450,255,0);
    layer-background-color:#C0C0C0;
    background-color:#C0C0C0;
    z-index:1 
    }
#scrollContentDiv 
    {
    position:absolute;
    left:25px;
    top:0px;
    font-family:verdana,helvetica;
    width:400;
    line-height:18px;
    font-size:12px;
    z-index:0;
    }
</style>

im body:

HTML:

<div id="scrollWindowDiv">
<a href="#" 
   onMousedown="weiter=1;scrollen(2)" 
   onMouseup="weiter=0"><img src="up.gif" /></a><br />
<img src="leiste.gif" /><br />
<a href="#" 
   onMousedown="weiter=1;scrollen(-2)" 
   onMouseup="weiter=0"><img src="down.gif" /></a><br />

  <div id="scrollContentDiv">
  <strong>Hier steht Dein Text</strong>...
  <a href="#" 
     onmousedown="gone();return false">
     <strong>top</strong></a>
  </div>

</div>

Die Gifs bastelst Du Dir selber...
CSS am besten noch auslagern.

Die Datei scrolldiv.js beinhaltet:

Code:

function doresize () 
    {location.reload();return false;}
if(document.layers)window.captureEvents(Event.RESIZE); window.onresize=doresize;

var  js10 = (document.images)?false:true; // NN2.x
var  js11 = (document.images) && ((window.screen)?false:true); // NN3.x
var  ie = ((document.all) && (window.offscreenBuffering)) ? true : false; // IE >= 4.x
var  isNS = ((document.captureEvents) && (!document.getElementById)) ? true : false; // NN4.x
var  mz = ((document.getElementById) && (!document.all) && (document.documentElement)) ? true : false; // NN6/MZ
var  op = ((document.getElementById) && (navigator.userAgent.indexOf('Opera') != -1)) ?true : false;
var isMacIE = ( (navigator.userAgent.indexOf("IE 4") > -1) && (navigator.userAgent.indexOf("Mac")  > -1) );

y=0; weiter=0;

function testen() 
{
br=0;
    if (ie)        
    {
    br=2;
    schicht='document.all["';stil='"].style';
    }
    if (isNS)            
    {
    schicht='document.layers.scrollWindowDiv.document.layers["';stil='"]';
    }
    if (mz)
    {
    schicht='document.getElementById("';stil='").style';
    }
    if(op) 
    {
    schicht='document.getElementById("';stil='").style';
    }
    /* elsewindow.location.href="controlling.html"; // nur NN und IE !!!*/
}

function moveIt(wen,wert) 
{
test=y;  // Hilfsvariable
y+=wert;
if (y < -251 || y > 1) 
    {
    y=test;
    eval(schicht+wen+stil+'.top="'+y+'"');
}
else 
    {
    eval(schicht+wen+stil+'.top="'+y+'"');
    }
}

function scrollen(wert) 
{
moveIt('scrollContentDiv',wert);
a=wert;
if ((weiter)&&(y<10)) setTimeout("scrollen(a)",1);
}

function gone()
{   
if(isNS)
    {   
    document.scrollWindowDiv.document.scrollContentDiv.moveTo(20,0); 
    y=0;
    }   
if(ie)   
    {   
    scrollContentDiv.style.pixelLeft=20;   
    scrollContentDiv.style.pixelTop=0;
    y=0;
    }   
if(mz)
    {   
    document.getElementById("scrollContentDiv").style.left="20px";    
    document.getElementById("scrollContentDiv").style.top="0px";
    y=0;
    }
if(op)
    {   
    scrollContentDiv.style.pixelLeft=20;   
    scrollContentDiv.style.pixelTop=0;
    y=0;
    }
}

Denke mal, dass man das als Basis verwenden kann.

hunter2000 · 26.06.2007

AW: Eigenes Scrollbardesign

Soviel ich weiß kann man explizit für den IE eine CSS Eigenschaft definieren, die eine einfache Gestaltung der Scrollleiste zuläßt. Aber frag mich nicht wie die heißt...

ZackBag · 26.06.2007

AW: Eigenes Scrollbardesign

ja stimmt das geht,
aber wie gesagt auch nur für den IE und auch nur eingeschränkt in die Wahl der Farben. Größe und Design können nicht verändert werden, leider.

MachineHead · 26.06.2007

AW: Eigenes Scrollbardesign

n Kollege von mir hat vorhin gemeint, dass eigene SCrollbardesigns (in javascript programmiert) nur im IE funktionieren ... is da was wahres dran?

harti · 26.06.2007

AW: Eigenes Scrollbardesign

im IE kann man die einzelnen bereiche der scrollbar mit CSS wunderbar verändern funktioniert mit firefox leider nicht. was eigendlich schade ist.

dazu in den head der datei einfach den link zu einer externen css datei einbauen

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

und in der externen css datei steht dann nur

BODY
{scrollbar-DarkShadow-Color:#ffffff; scrollbar-Track-Color:#7FB9F2; scrollbar-Face-Color:#7FB9F2; scrollbar-Shadow-Color:#ffffff; scrollbar-Highlight-Color:#ffffff; scrollbar-3dLight-Color:#7FB9F2; scrollbar-Arrow-Color:#ffffff}

in diesem fall müsste das ganze hellblau werden also musst du die farben noch ein wenig ändern

ich hoffe mal das der html hier richtig angezeigt wird

pitTti · 27.06.2007

AW: Eigenes Scrollbardesign

MachineHead schrieb:
n Kollege von mir hat vorhin gemeint, dass eigene SCrollbardesigns (in javascript programmiert) nur im IE funktionieren ... is da was wahres dran?

Kann ich mir nicht vorstellen.

MachineHead · 27.06.2007

habs soeben versucht einzubinden, jedoch verschiebt sich die page, anscheinend haben die div-tags einen rand (in dreamweaver blau zu sehen) ... wenn ich diese anweisungen für den div tag ins css schreib, funktionierts auch nicht:

#scrollWindowDiv
{
height:36px;
width:17px;
z-index:1px;
border:none;
border-left:none;
boder-top:none;
border-left:none;
boder-right:none;
}

#scrollWindowDiv2
{
height:32px;
width:17px;
z-index:1px;
border:none;
border-left:none;
boder-top:none;
border-left:none;
boder-right:none;
}

hat jemand ne idee?
hier ein screenshot der page

*edit* ich hab jetzt für jeden button (da unterschiedliche größe) einen eigenen style definiert und einfach den passenden style in das div-tag des buttons implementiert

hier für den oberen button:

<div id="scrollWindowDiv">
<a href="#" onMousedown="weiter=1;scrollen(2)" onMouseup="weiter=0">
<img height="36px" width="17px" src="Bilder/index_15.jpg"/>
</a>
</div>

und für den unteren button:

<div id="scrollWindowDiv2">
<a href="#" onMousedown="weiter=1;scrollen(-2)" onMouseup="weiter=0">
<img height="32px" width="17px" src="Bilder/index_18.jpg"/>
</a>
</div>

vielleicht hilfts euch ja weiter?

pitTti · 27.06.2007

AW: Eigenes Scrollbardesign

Ja, setz im <img>-Tag noch nen border="0".

MachineHead · 27.06.2007

kk ... problem behoben ... hab die page einfach nochmal komplett neu gecoded ... dreamweaver hat wahrscheinlich irgendwas verbockt ... jetzt sitzt jeder bild an seinem richtigen platz

Die Scrollleiste funktioniert jedoch immer noch nicht.

hier mal der Quellcode (Teilquellcode), wär verdammt geil wenn ihr den Fehler finden könntet

<tr>
<td colspan="6" rowspan="4">
<div id="scrollContentDiv"> (da steht der Text drin, wie auf dem Bild zu erkennen)
<span class="Stil1">TESTSTSETSETSTESTESTSETSETSET<br>
TESTESTSETSETSETSETSETSETSETS
TESTSTSETSETSTESTESTSETSETSET<br>
TESTESTSETSETSETSETSETSETSETS<br>
TESTESTSETSETSETSETSETSETSETS<br>
TESTESTSETSETSETSETSETSETSETS<br>
TESTESTSETSETSETSETSETSETSETS<br>
TESTESTSETSETSETSETSETSETSETS</span><br>
</div>
</td>
<td>
<div id="scrollWindowDiv"> (Der obere Scrollpfeil)
<a href="#" onMousedown="weiter=1;scrollen(2)" onMouseup="weiter=0">
<img height="36px" width="17px" border="0" src="Bilder/index_14.jpg"/></a>
</div>
</td>
</tr>

<tr>
<td rowspan="2">
<div id="scrollWindowDiv2"> (der untere Scrollpfeil)
<a href="#" onMousedown="weiter=1;scrollen(-2)" onMouseup="weiter=0">
<img height="32px" width="17px" border="0" src="Bilder/index_16.jpg"/> </a> </div> </td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="36" alt=""></td>
</tr>

hier das css:

<script type="text/javascript" src="scrolldiv.js"></script>
<style type="text/css">
#scrollWindowDiv
{
position:relative;
height:36px;
width:17px;
z-index:1px;
border:none;
border-left:none;
boder-top:none;
border-left:none;
boder-right:none;
border-bottom:none;
clip:rect(0,450,255,0);
}

#scrollWindowDiv2
{
position:relative;
height:32px;
width:17px;
z-index:1px;
border:none;
border-left:none;
boder-top:none;
border-left:none;
boder-right:none;
border-bottom:none;
clip:rect(0,450,255,0);
}

#scrollContentDiv
{
position:absolute;
background-image:url(Bilder/index_13.jpg);
font-family:verdana,helvetica;
width:295;
height:312;
font-size:12px;
z-index:0;
border:none;
border-left:none;
boder-top:none;
border-left:none;
boder-right:none;
border-bottom::none;
top: 106px;
}

bitte um Hilfe

MachineHead · 29.06.2007

AW: Eigenes Scrollbardesign

kann mir jemand weiterhelfen?

knispel · 30.06.2007

AW: Eigenes Scrollbardesign

Hi,
vom Tabellenlayout mal abgesehen ;-)

solltest mal Dein CSS checken und aus Äpfeln und Birnen px machen.

filzlaus · 30.06.2007

AW: Eigenes Scrollbardesign

Code:

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

gehört in den Headbereich des Html Quellcodes nicht in die css Datei.

MachineHead · 30.06.2007

AW: Eigenes Scrollbardesign

Der Quellcode is von Photoshop bereits vorgegeben, da ich selber kaum ahnung von div's hab wäre es cool wenn ihr mir sagen könntet was ich alles verändern muss damits klappt. Ich weiß solangsam nervts, würde nur verdammt gerne dieses Feature in meine page einbauen.

rotzbua · 30.06.2007

AW: Eigenes Scrollbardesign

steht eh schon einen post über dir

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

gehört in den head bereich der homepage und nicht in die css

filzlaus · 01.07.2007

AW: Eigenes Scrollbardesign

Kannst du deine Page so wie du sie bis jetzt hast mal irgendwo hochladen damit man eventuelle Fehler sehen kann?