Wer kann CSS, HTML und JS programmieren?

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?

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

Kommentare

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!“

Timm09.04.0812:17

Auf JavaScript Seite ist soweit alles korrekt, der "Fehler" liegt in der Darstellungsschicht.

evilalex09.04.0812:28

CSS und HTML werden nicht "programmiert".

Bernd09.04.0813:04

TIMM, bitte was soll das bedeuten?

Bernd09.04.0813:05

evilalex

CSS und HTML werden nicht &x22;programmiert&x22;.

OK CSS und HTML werden geschrieben – besser?

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.

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>

Arclite09.04.0815:23

mit mootools ist das ganz einfach.

Das in den Head packen:

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.

Bernd09.04.0815:28

ICh danke Euch allen!

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!

larsvader10.04.0810:10

sieht smoooth aus!

Kommentieren

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

Parallels führt x86-Windows auf M-Macs aus – Te...

Kurztest MacBook Pro M4

Neuer Mac: Vorbereitung für den Umzug vom alten...

Baldige Überarbeitung: Welche Macs, iPhones und...

iOS 18.3 mit Hinweisen auf neue Apple-Hardware

Mac OS X: 25 Jahre Aqua, 25 Jahre Dock

Weitere Berichte zur neuen Kamera des iPhone 17...

Tim Cooks Jahresgehalt – und die Vergütung der ...