[javascript] inhalt eines div-containers scrollen

moses_78 · 23.12.2005

n'abend,
für ein widget möchte ich den inhalt eines div-containers scrollen.
das soll so laufen, dass der absolute positionierte div-container
verschoben wird, der anzeigebereich mit clip aber so beschnitten
wird, dass ein realistischer scrolleffekt entsteht.

hier der quelli:

HTML:

<html>
<head>

<script type="text/javascript">
var quote_div_position = 28;
var scroll_counter = 0;
var overflow = true;

function scroll(richtung)
{
 var quote_div;

 if(richtung == "unten" && overflow)
  {
   scroll_counter++;

   quote_div_position -= 20;
   quote_div = document.getElementById('quote');

   quote_div.style.top = quote_div_position+"px";
   quote_div.style.clip = "rect("+(scroll_counter*20)+"px, 267px, "+((scroll_counter*20)+72)+"px, 0px)";

   //alert("rect("+(scroll_counter*20)+"px, 267px, "+((scroll_counter*20)+72)+"px, 0px)");
  }
}
</script>

<style>
#quote
{
position:absolute;
top:28px;
left:30px;
width:267px;
height:72px;
background-color:red;
overflow:/*auto*/hidden;
}
</style>

</head>
<body>
<div id='quote'>jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
</div>

<div style="position:absolute;top:120px;">
<a href="javascript:scroll('oben');">oben</a><br />
<a href="javascript:scroll('unten');">unten</a>
</div>

</body>
</html>

das script ist in der form aufs minimum reduziert, und es funktioniert
einigermaßen, der div-container wird einwandfrei nach oben verschoben,
nur der untere bereich, welcher den weiteren inhalt anzeigen soll, wird nicht angezeigt.

ich sitze jetzt seit einigen tagen daran, bekomme es aber einfach nicht
hin. danke im vorraus für eure hilfe und eine schöne weihnachtszeit,
moses

edit: dreck, ich sehe grade, falsches forum. will mich vielleicht jemand nach "internet-programmierung" schieben??

macnurse · 23.12.2005

Versuche es doch mal mit dem Tag oder der Anweisung <marquee></marquee>

mit direction="right" läuft der Text von links nach rechts

mit direction="left" von rechts nach links

mit direction="up" stellst du die Laufrichtung von unten nach oben

und mit direction="down" von oben nach unten.

Durch das Attribut scrollamount bestimmst du noch die Pixelanzahl zwischen den Scroll-Zuständen. Mit scrolldelay legst du die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest (amount = Zustand, delay = Verzögerung).

Mit behavior="alternate" erzwingst du den Wechseleffekt (behavior = Verhalten, alternate = wechselnd).

Durch das Attribut bgcolor erzwingst du, dass der gescrollte Text in einem andersfarbigen Rahmen erscheint (bgcolor = background color = Hintergrundfarbe). Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML. (#GGFFHH)

Mit align="top" erreichst du, dass der umgebende Text obenbündig zu dem Marquee-Text ausgerichtet wird. Mit align="middle" wird der umgebende Text mittig ausgerichtet, mit align="bottom" untenbündig (align = Ausrichtung, top = oben, middle = mittig, bottom = unten).

Mit height bestimmst du die Höhe des Marquee-Bereichs (height = Höhe). Diese Angabe ist vor allem interessant, wenn du für den Marquee-Bereich eine eigene Hintergrundfarbe bestimmen willst. Mit der Höhe des Marquee-Bereichs legst du dann die Höhe des andersfarbigen Kastens fest, in dem der Marquee-Text gescrollt wird. Die Angabe erfolgt entweder absolut in Pixeln, oder in Prozent relativ zur Höhe des Anzeigefensters.

Mit hspace bestimmst du den Abstand zwischen Marquee-Text und dem Text davor bzw. dahinter (hspace = horizontal space = horizontaler Abstand). Dieses Attribut ist nur von Bedeutung, wenn du den Marquee-Bereich mitten im Text definieren willst. Der Wert erfolgt in Pixeln. Der angegebene Abstand gilt sowohl für den Text davor als auch für den Text dahinter.

... und action ...

moses_78 · 23.12.2005

macnurse schrieb:
Versuche es doch mal mit dem Tag oder der Anweisung <marquee></marquee>....

die idee mit dem -wenn auch veralteten marquee- ist nicht schlecht, nur soll der
div-container nicht dauerhaft von oben nach unten laufen, sondern wie in etwa ein
iframe auf mouseklick weiteren inhalt anzeigen.

ich bin sicher, dass es sich nur um einen minimalen fehler in meinem script
handelt, aber ich finde ihn einfach nicht

trotzdem danke für die versuchte hilfestellung

moses_78 · 25.12.2005

keiner ne idee? *fleh*

bis jetzt habt ihr alle meine probleme gelöst....

ThaHammer · 26.12.2005

Probiere mal folgendes aus, verstecke den Text nach unten nicht, sondern ziehe ihn so lange wie er ist. Dann legst Du ein Div drüber um ihn zu verstecken. Wenn Du jetzt schiebst sollte er noch Inhalt haben, oder?

dms · 26.12.2005

Nicht das Clip verändern. Mache zwei Div's draus. Das erste bekommt das gewünschte Clip. Das zweite Div wird dann einfach verschoben (obj.style.top). Durch das Clip des übergeordneten Div's wird der anzuzeigende Bereich begrenzt.

moses_78 · 26.12.2005

danke für eure tips, vielleicht meint ihr es so??

HTML:

<html>
<head>

<script type="text/javascript">
var quote_div_position = 28;
var scroll_counter = 0;
var overflow = true;

function scroll(richtung)
{
 var quote_div;

 if(richtung == "unten" && overflow)
  {
   scroll_counter++;

   quote_div_position -= 20;
   quote_div = document.getElementById('quote');

   quote_div.style.top = quote_div_position+"px";

  }
}
</script>

<style>
#quote
{
position:absolute;
top:28px;
left:30px;
width:267px;
height:72px;
background-color:red;
overflow:/*auto*/hidden;
z-index:3;
}

#xxx
{
position:absolute;
top:0px;
left:30px;
width:267px;
bottom:0px;
/*background-color:gray;*/
clip:rect(28px, 267px, 100px, 0px);
z-index:2;
}
</style>

</head>
<body bgcolor="gainsboro">
<div id='xxx'></div>
 <div id='quote'>jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />jfhgdjhfgjdhfjghdj<br />
 </div>


<div style="position:absolute;top:120px;">
<a href="javascript:scroll('oben');">oben</a><br />
<a href="javascript:scroll('unten');">unten</a>
</div>

</body>
</html>

ein div-container namens "xxx" soll die komplette höhe des browserfensters
einnehmen, und der clip bereich ist auf die koordinaten von div-container #quote
beschränkt. da ersterer div eine ebene höher liegt, sollte er das zu scrollenden
div-element überdecken....geht aber auch nicht

vielleicht registriere ich mich in einem js-forum... meine aufgabenstellung muss mit
dem lösungsansatz in post#1 irgendwie zu lösen sein...kacke....

dms · 27.12.2005

Mach Dir doch nicht die Arbeit.

Such mal in Google nach "ASM Scroller". Ist ein gutes Script.

moses_78 · 27.12.2005

dms schrieb:
Mach Dir doch nicht die Arbeit. Such mal in Google nach "ASM Scroller". Ist ein gutes Script.

ich denke mal, ich werde dieses script verwenden, scheint auch gut zu sein.

aber jetzt, wo der thread sowieso "tot" ist: kann clip nicht nur den anzeigebereich
seines eigenen elements beschneiden kopfkratz

moses_78 · 07.01.2006

falls es noch irgendeine sau interessiert: ich habe mein problem gelöst. es lag darin,
dass ich den unteren, nicht anzuzeigenden bereich des layers nicht mit "clip"
beschnitten habe, sondern mit "height". da auch noch "overflow" auf "hide" gesetzt
war, konnte der bereich, der beim scrollen eigentlich sichtbar werden sollte, nicht an-
gezeigt werden. solche fehler kommen eben dabei raus, wenn man unüberlegt
zur späten tageszeit noch scriptet

hier eine korrigierte version:

HTML:

<html>
<head>

<script type="text/javascript">
var quote_div_position = 28;
var scroll_counter = 0;
var overflow = true;

function scroll(richtung)
{
 var quote_div;

 if(richtung == "unten" && overflow)
  {
   scroll_counter++;

   quote_div_position -= 20;
   quote_div = document.getElementById('quote');

   quote_div.style.top = quote_div_position+"px";
   quote_div.style.clip = "rect("+(scroll_counter*20)+"px,267px,"+((scroll_counter*20)+70)+"px,0px)";
  }
 else
  { 
   if(scroll_counter != 0)
    {
     scroll_counter--;
   
     quote_div_position += 20;
     quote_div = document.getElementById('quote');
   
     quote_div.style.top = quote_div_position+"px";
     quote_div.style.clip = "rect("+(scroll_counter*20)+"px,267px,"+((scroll_counter*20)+70)+"px,0px)";
    }  
  }
}
</script>

<style>
#quote
{
position:absolute;
top:28px;
left:30px;
width:267px;
clip:rect(0px, 267px, 70px, 0px);
background-color:red;
overflow:hidden;
}
</style>

</head>
<body bgcolor="gainsboro">
 <div id='quote'>
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  jfhgdjhfgjdhfjghdj<br />
  letzte reihe<br />
 </div>


<div style="position:absolute;top:120px;">
 <a href="javascript:scroll('oben');">oben</a><br />
 <a href="javascript:scroll('unten');">unten</a>
</div>

</body>
</html>

mein wundervolles script ist hiermit zum klauen freigegeben

gruß moses

[javascript] inhalt eines div-containers scrollen

moses_78

Aktives Mitglied

macnurse

Aktives Mitglied

moses_78

Aktives Mitglied

moses_78

Aktives Mitglied

ThaHammer

Aktives Mitglied

dms

moses_78

Aktives Mitglied

dms

moses_78

Aktives Mitglied

moses_78

Aktives Mitglied