# Schöner Scrollen



## samsara (16. Juni 2005)

Hallo Ihr Lieben, ich habe folgendes Problem:

Ich möchte in einer Tabelle einen Text einfügen, der länger ist, als der dafür 
vorgesehene Platz. Er soll also scrollbar sein, allerdings ohne diesen hässlichen
Scrollbalken, sondern durch Mouseover auf einer Up- bzw. Down-Grafik. Das 
Ganze ohne Flash. Ich bin noch nicht so fit in HTML, die Tipps/Anweisungen 
also bitte eher für langsam Denkende... Habe seit kurzem auch Dreamweaver, 
vielleicht geht es damit ja sogar einfacher? Keine Ahnung. Habe nur das Ziel vor 
Augen, wäre lieb wenn mir einer von euch den Weg erklären könnte...


----------



## Alexander Feil (23. Juni 2005)

Hi,

also ich finde meine Scrollbalken ganz niedlich . Im Ernst, deine Seite gstaltestest du sicherlich am benutzerfreundlichsten, wenn du auf solchen "Schnickschnack" verzichtest.

Mit JavaScript dürfte es dennoch möglich sein, deine Wünsche in die Tat umzusetzen.

Gruß
Aleks


----------



## grasman (23. Juni 2005)

leg doch einfach einen schönen style auf deine scrollbalken - so zB:


```
body, html {
scrollbar-base-color: #2D373E;
scrollbar-3d-light-color: #2D373E;
scrollbar-arrow-color: #2D373E;
scrollbar-darkshadow-color: #2D373E;
scrollbar-face-color: #FF7200;
scrollbar-highlight-color: #2D373E;
scrollbar-shadow-color: #2D373E;
scrollbar-track-color: #2D373E; }
```


----------



## Gumbo (23. Juni 2005)

> leg doch einfach einen schönen style auf deine scrollbalken


Ein Hoch auf die Browser, die soetwas mit sich nicht machen lassen!


----------



## T3ch (23. Juni 2005)

Hi;

hier mal ein Ansatz->


```
function scroll(){

for(var i=0;i<1200;i++){
   eval("window.scrollTo(0,"+i+")");
   }

}
```

Das Script lässt deine Seite langsam nach unten scrollen (bis 1200px); du kannst es z.B. per mouseover-Event aufrufen.

Greetz


----------



## samsara (27. Juni 2005)

Hallo Zusammen, erst mal vielen Dank für eure Antworten!

@Alexander Feil 
Ich weiß, dass es ohne solchen Schnickschnack am benutzerfreundlichten ist, 
aber ich möchte trotzdem gerne wissen wie es geht    
Javascript? OK - danke!

@grasman
Danke für den Code aber wie schon oben erwähnt, ich hätt’s gerne mit Mouseover 
und nicht „nur“ farbig...    

@T3ch
Danke! Ich werde es mal ausprobieren, aber ich befürchte, das ist auch nicht das 
richtige, denn ich will ja nur einen kleinen Teil scrollen...

Hier ist mal ein Beispiel:

http://www.ra-raabe.net/content/profil/

Vielleicht kann mir ja doch noch jemand helfen. Javascript ist, glaube ich, wirklich 
der richtige Weg. Leider kenne ich mich da noch nicht so gut aus. Das Script 
der Beispielseite scheint offensichtlich auf dem Server zu liegen...
Vielleicht gibt es ja auch einen anderen, einfacheren Weg. 

Geschickt wäre es wahrscheinlich auch, ich würde meine Frage direkt bei
Forum @ tutorials.de ? Webmaster ? Javascript stellen. Gibt es einen Weg 
von dort hierher zu linken oder soll ich ich die Frage noch mal neu stellen?

Liebe Grüße und Danke nochmal
samsara


----------



## Alexander Feil (28. Juni 2005)

Hi,

dann schau doch einfach mal in den Quelltext der Seite:

	<link rel="stylesheet" type="text/css" href="/libary/css/styles.css">
-->>  <script src="/libary/js/scroller.js" type="text/javascript"></script>
        </head>

Dann rufst du das Ding einfach mal auf:
http://www.ra-raabe.net/libary/js/scroller.js

Schwubdiwub hast du dein Vorbild.
Viel Spaß 

Gruß
Aleks


----------



## samsara (30. Juni 2005)

Hi Aleks,
nochmal Danke! 

Ich werde es mal ausprobieren.
Mal  sehen, ob ich klar komme 

Bis dann, liebe Grüße
samsara


----------



## Rebets (18. Juli 2005)

hi

bin beim stöbern duchs Forum auf diese Diskussion hier gestoßen und würd solche Pfeile als Scrolleiste auch gern auf meiner Seite einbauen, allerdings hab ich viel zu wenig Ahnung davon wie man sowas macht.
1. Wie bindet man das des scroller.js script in seine seite ein?
2. Wie weist man dem Script nen Text zu der gescrollt werden soll?
3. Was muss man dabei am Script selber ändern?

Schon mal danke fürs posten

@samsara: Hast du des hingebracht? Ein zweites Anschauungsbeispiel würd mir glaub ich auch helfen

greetz rebets


----------



## T3ch (18. Juli 2005)

zu 1. 
	
	
	



```
<script type="text/javascript" src="scroller.js"></script>
```
zu 2.& 3. Das Objekt ist hier definiert:


```
//Makes the object
var loaded;
function scrollInit(){
	oCont=new makeObj('divCont')
	oScroll=new makeObj('divText','divCont')
	oScroll.moveIt(0,0)
	oCont.css.visibility='visible'
	loaded=true;
}
```

Du musst also die Namen 'divCont' und 'divText' ersetzen.

Greetz


----------



## Rebets (19. Juli 2005)

Merci!

Habs hingabracht!

Is des überhaupt erlaubt jemand anders einfach des script zu klauen?

Wenn so ne Frage nicht in dieses Forum gehört, dann bitte irgnorieren!

servus


----------



## BaLaYaR (19. Juli 2005)

Nah ich denke bei so einem kleinen Teil an Quellcode ist das nicht schlimm, denn es gibt bestimmt mehrere Menschen die genau diesen Code ausm Kopf schreiben würden.


----------



## Rebets (20. Juli 2005)

Hab mich wohl zu früh gefreut.

Schauts euch mal hier an wie weit ich gekommen bin:

http://www.tango-sierra.de/Untitled-2.htm

Wie bring ich des hin, dass der Text nur in der weißen Ebene sichtbar ist?

merci
Rebets


----------



## methodus (15. August 2005)

mit CSS: clip hilft dir weiter... funktioniert super!


----------



## futufry (30. Dezember 2006)

Hallo,

habe den Code mal bei mir eingebaut und festgestellt, dass er im IE super klappt jedoch im Firefox Probleme aufwirft.

Auf der Anwaltsseite oben klappt es aber mit Firefox. 

Auf folgender Seite habe ich den Code eingebaut:

http://www.fryed.de/Hiddensee/index.php

Der CSS Code der Ebenen lautet folgendermaßen:


```
<!--
#Copy {
	Z-INDEX: 1; WIDTH: 329px; POSITION: absolute; HEIGHT: 394px}
#divCont {
	Z-INDEX: 2; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 316px; CLIP: rect(0px,316px,394px,0px); POSITION: absolute; HEIGHT: 394px}
#inhalt {
	Z-INDEX: 3; POSITION: absolute;
}
#ScrollUp {
	Z-INDEX: 4; VISIBILITY: visible; WIDTH: 12px; POSITION: absolute; TOP: 126px;
}
#ScrollDown {
	Z-INDEX: 4; VISIBILITY: visible; WIDTH: 12px; POSITION: absolute; top: 505px;
}
-->
```

Ansonsten ist alles beim alten geblieben (siehe oben). 

Ich versteh das irgendwie nicht, warum es beim Fuchs nicht klappt  Könnt ihr mir da bitte weiterhelfen?!

Vielen Dank!

futu


----------



## Maik (30. Dezember 2006)

futufry hat gesagt.:
			
		

> Auf der Anwaltsseite oben klappt es aber mit Firefox.
> 
> [...]
> 
> Ich versteh das irgendwie nicht, warum es beim Fuchs nicht klappt  Könnt ihr mir da bitte weiterhelfen?!


Dann vergleiche mal die Doctype-Deklaration auf der "Anwalt-Seite" mit dem Dokumenttyp in deinem Dokument.


----------



## henne32 (22. April 2007)

hey!

bei mir ist die doctype erklärung gleich (das ist doch das ganz am anfang?!) aber es funktioniert im ff trotzdem nicht.

hoffe es kann mir wer helfen! danke schonmal für alle bemühungen...

mfg

henne32


----------



## Quaese (22. April 2007)

Hi,

wenn ich es richtig übersehe, hast Du die IDs falsch geschrieben - beide müssen mit einem Kleinbuchstaben beginnen:

```
<div id="divCont"><div id="divText">
```
Ciao
Quaese


----------



## henne32 (22. April 2007)

jo genau daran hats gelegen! Vielen Dank!

mfg

henne32


----------



## 5noOPY (23. April 2007)

Hallo futufry,

schau dir mal das hier an und scrolle bin ganz nach unten.. ist das nicht irgendwie komisch, daSs mit dem Bild?  

mfg

5noOPY


----------



## henne32 (23. April 2007)

du meinst dieses wetter-banner?! das erscheint im ff auch außerhalb des rahmens. liegt bestimmt daran, dass das ein flash-objekt ist. 

overflow:hide als css-befehl wird einen da wohl nicht weiter bringen...


----------



## Maik (23. April 2007)

Hi,

hier schaffen folgende Ergänzungen Abhilfe, damit das Flash-Objekt nicht über der Scroll-Box hinwegläuft:


```
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" 
ID=deutschland WIDTH=151 HEIGHT=178>
<PARAM NAME=movie VALUE="http://wetter.rtl.de/extern/generell/generator/deutschland/wetter_home.swf?id=120647&key=ab0c2c654fcb02d430bab7321c6ff0e1">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#87a1cd>
<param name="wmode" value="opaque">
<EMBED wmode="opaque" src="http://wetter.rtl.de/extern/generell/generator/deutschland/wetter_home.swf?id=120647&key=ab0c2c654fcb02d430bab7321c6ff0e1" 
quality=high menu=false bgcolor=#87a1cd width="151" height="178" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED></OBJECT>
```


----------



## xloouch (28. April 2007)

Hallo zusammen

Hab fast das gleiche Problem wie auch schon erwähnt. Das Scrollen will und will einfach nicht.

Hab alles so übernommen, wie es sein sollte.. Grummel

Hier der Link
http://rast.gnadirap.info

Dort müsst ihr eintreten, dann auf "Über uns".. Ich bin langsam am verzweifeln.. weiss nicht mehr weiter. Danke für eure Hilfe im voraus


----------



## Maik (28. April 2007)

Hi!


xloouch hat gesagt.:


> Hab alles so übernommen, wie es sein sollte.. Grummel


Nicht ganz, denn im Script besitzt das relevante DIV die ID *divText*, im HTML-Code rufst du aber die ID *inhalt* auf.


```
//Makes the object
var loaded;
function scrollInit(){
        oCont=new makeObj('divCont')
        oScroll=new makeObj('divText','divCont')
        oScroll.moveIt(0,0)
        oCont.css.visibility='visible'
        loaded=true;
}
```


```
<!---------- START divCont ---------->
<DIV id="divCont">
<!---------- START inhalt ---------->
<div id="inhalt">
```
Zudem muß das Dokument im Quirksmode übergeben werden, damit das Script funktioniert, was über die Doctype-Deklaration geschieht:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```
Und entferne nach dem *<body>*-Tag das doppelt vorhandene DIV *divCont*:


```
<body>
<DIV id="divCont"></DIV>
```


----------



## xloouch (28. April 2007)

ok.. danke schön. werde es nun probieren hineinzu "quetschen"

Danke für eure Hilfe


----------



## futufry (11. September 2008)

Maik hat gesagt.:


> Dann vergleiche mal die Doctype-Deklaration auf der "Anwalt-Seite" mit dem Dokumenttyp in deinem Dokument.



Hallo,

ich hab mal dieses alte Thema rausgekramt, da ich kein neues anfangen wollte. Handelt sowieso wieder vom gleichen Problem 

In dem Thema hier ging es um die Div Container mit der jeweiligen Scroll-Funktion. Ich hatte damals die falschen DOCTYPE Werte in meiner index.php Datei. Momentan bin ich dabei eine neue Webseite zu erstellen und nutze dabei die Dropline Funktion von CSS Play (siehe Link)

Um das ganze auf den Punkt zu bringen. Damals hatte ich das Problem, dass in Firefox die Scrollleiste nicht ging, im IE jedoch ging sie. Nun habe ich in derselben Datei die Dropline eingebaut. Bei dem derzeitige Doctype würde jedoch im IE die Dropline nicht mehr angezeigt, im FF jedoch würde alles funktionieren. Welche Doctype müsste ich da verwenden, bzw muss ich da anders an die Sache rangehen? Würde mich über Hilfe von euch sehr sehr freuen 

Derzeitige Doctype in der neuen index.php (Im IE geht Scrollbar und Dropline, in FF nur Dropline):


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

Damalige Hinweise in dem Thema, alte index.php hatte dann folgenden Doctype (Im IE geht nur Scrollbar, in FF geht Scrollbar und Dropline):


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
```

Ich hoffe ich konnte mein Problem annähernd erklären


----------



## Maik (11. September 2008)

Hi,

Stu Nicholls' CSS-Menüs funktionieren lediglich  im standardkonformen Modus - da lässt sich also schon mal nix dran ändern.

Dafür aber beim Scrolling-Script, denn eine Variante, die ebenfalls im Darstellungsmodi "Standards Mode" läuft, findest du beim tutorials.de-User con-f-use: http://christoph.ist-stylish.de/tut/scrolllayer.html.

mfg Maik


----------



## futufry (12. September 2008)

Maik hat gesagt.:


> Hi,
> 
> Stu Nicholls' CSS-Menüs funktionieren lediglich  im standardkonformen Modus - da lässt sich also schon mal nix dran ändern.
> 
> ...



Hi Maik,

hat bestens geklappt mit deinem Script! Vielen vielen lieben Dank! Gibt es im Script die Möglichkeit per Mouse Over zu scrollen? Momentan muss man klicken. Mit klicken gehts zwar auch super wollt nur nochmal schauen obs auch anders geht


----------



## Maik (12. September 2008)

Hi,

selbstverständlich lässt sich das Scrollen auch beim Überfahren des Links mit der Maus ausführen 


```
<a href="#" onmouseover="scrollDiv('content',8,this)">Hoch</a><br />
<a href="#" onmouseover="scrollDiv('content',-8,this)">Runter</a>
```
mfg Maik


----------

