Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Netzwerke>Wer kann CSS, HTML und JS programmieren?

Wer kann CSS, HTML und JS programmieren?

Bernd
Bernd09.04.0811:34
Ich bin grad dabei mir JS anzueignen BOAH sag ich euch!

Mein Ziel ist es hier von Bild zu Bild via Text Navi zu springen!
Allerdings mit "smooth scroll" Ich hab einiges im Internetgefunden, werde aber nicht schlau draus.

Mootools: das hab ich bereits erfolgreich umgesetzt [url] http://bernd.rammler.com/slide-test/slide.html[/url], aber die Adaption auf meinen LINK oben klappt nit.

Dann gits ja noch scriptaculo: aber da finde ich nur nen vertikalen Scroll

und iQuery gibts ja auch noch: das verstehe ich schon gleich gar nimmer!

Wer kann mir weiterhelfen? DANKE
0

Kommentare

Mr. Krabs
Mr. Krabs09.04.0811:52
Also wenn du dir JS aneignen willst, dann beginne lieber mit einfacheren Sachen und "Spielereien" mit dem DOM oder so. Wenn du damit dann umgehen kannst, ist der Umgang mit diesen Bibliotheken auch einfacher...
„Deux Strudel!“
0
Timm
Timm09.04.0812:17
Auf JavaScript Seite ist soweit alles korrekt, der "Fehler" liegt in der Darstellungsschicht.
0
evilalex
evilalex09.04.0812:28
CSS und HTML werden nicht "programmiert".
0
Bernd
Bernd09.04.0813:04
 TIMM, bitte was soll das bedeuten?
0
Bernd
Bernd09.04.0813:05
evilalex
CSS und HTML werden nicht &x22;programmiert&x22;.

OK CSS und HTML werden geschrieben – besser?
0
evilalex
evilalex09.04.0813:44
Bernd
evilalex
CSS und HTML werden nicht &x22;programmiert&x22;.

OK CSS und HTML werden geschrieben – besser?

Aber Hallo, viel viel besser sogar.
0
Timm
Timm09.04.0813:57
Ich habe keine Zeit dir deins jetzt zu korrigieren, aber hier einfach mal schnell der Quelltext von einem Dokument in dem ich das mal umgesetzt habe (könnte ich auch funktionsfähig mit Scripts zukommen lassen, auch mit Mootools realisiert).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>Slides</title>
      <script src="scripts/mootools.js" type="text/javascript"></script>
      <script src="scripts/animation.js" type="text/javascript"></script>
      <style type="text/css">
          * {
              margin: 0;
              padding: 0;
              outline: none;
          }
          body {
              font-size: 100.01%;
              font-family: Verdana;
          }
          ul#versionnav {
              list-style: none;
          }
          ul#versionnav li {
              display: inline;
          }
          div#history {
              height: 450px;
              font-size: 0.8em;
              overflow: hidden;
              width: 100%;
          }
          div#slides {
              height: 450px;
              width: 2500px;
          }
          div#slides div {
              float: left;
              height: 410px;            
              overflow: hidden;
              width: 500px;    
          }
      </style>
  </head>
  <body>
      <ul id="versionnav">
          <li id="anchv1"><a href="#v1"><span>Version 1</span></a></li>
          <li id="anchv2"><a href="#v2"><span>Version 2</span></a></li>
          <li id="anchv3"><a href="#v3"><span>Version 3</span></a></li>
          <li id="anchv4"><a href="#v4"><span>Version 4</span></a></li>
          <li id="anchv5"><a href="#v5"><span>Version 5</span></a></li>
      </ul>
      <div id="history">
          <div id="slides">
              <div id="v1">
                  <h2>Version 1</h2>
          </div>
              <div id="v2">
                <h2>Version 2</h2>
          </div>
              <div id="v3">    
                  <h2>Version 3</h2>
        </div>
              <div id="v4">
                  <h2>Version 4</h2>
              </div>
              <div id="v5">
                  <h2>Version 5</h2>
              </div>
          </div>
      </div>
  </body>
</html>
0
Arclite
Arclite09.04.0815:23
mit mootools ist das ganz einfach.

Das in den Head packen:
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function(){
        new SmoothScroll(); 
        });
</script>        

und dann hinter jedes bild nen html-anchor (<a name="katze"></a>) packen, und dann kannst du über links zu den anchors einfach hinscrollen (<a href="#katze">katze!</a>). Und das alles hübsch animiert.
0
Bernd
Bernd09.04.0815:28
ICh danke Euch allen!
0
Bernd
Bernd10.04.0810:01
Bevor ich es vergesse, hier das Ergebnis!
http://bernd.rammler.com/scripttest/smooth.html

Nachdem ich erst die Lösung von Mr. Krabs umgesetzt habe, hab ich mich dann doch für den Mootools Weg von Arclite entschieden! Denn die Mootools bieten einfach mehr Möglichenkeiten!

Danke Euch beiden für den MEGA Support!
0
larsvader
larsvader10.04.0810:10
sieht smoooth aus!

0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.