[javascript] inhalt eines div-containers scrollen

Diskutiere mit über: [javascript] inhalt eines div-containers scrollen im Web Page Design Forum

  1. moses_78

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.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??
     
    Zuletzt bearbeitet: 23.12.2005
  2. macnurse

    macnurse MacUser Mitglied

    Beiträge:
    194
    Zustimmungen:
    0
    Registriert seit:
    07.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 ...
     
  3. moses_78

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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 :)
     
  4. moses_78

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    keiner ne idee? *fleh*

    bis jetzt habt ihr alle meine probleme gelöst.... :(
     
  5. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    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?
     
  6. dms

    dms Gast

    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.
     
  7. moses_78

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.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....
     
  8. dms

    dms Gast

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

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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
     
  10. moses_78

    moses_78 Thread Starter MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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 :)
     
Die Seite wird geladen...
Ähnliche Themen - [javascript] inhalt eines Forum Datum
Wissenschaftliches Format bei JavaScript Eingabe Web Page Design 02.09.2011
Kleine JavaScript Herausforderung Web Page Design 31.08.2011
Email-Link Anti-Spam Schutz mit Javascript Web Page Design 24.06.2010
Javascript Scrollbar & Suchmaschinen Web Page Design 01.04.2010
Text-Höhe via JavaScript Web Page Design 07.01.2010

Diese Seite empfehlen

Benutzerdefinierte Suche