Tutorial Horizontaler Scroll mit jQuery
Dieses auf jQuery basierende Skript habe ich in NOF wie folgt eingebaut. Seht Euch auch meinen Tipp zur Verwendung des Quelltextes an.
Zunächst müsst Ihr Euch die CSS Datei erstellen, die Ihr Euch auch hier zum Testen mal kopieren könnt. Diese CSS könnt Ihr natürlich Euren Bedürfnissen entsprechend anpassen. Bitte achtet auf meine blau markierten Bemerkungen.
Diese CSS habe ich hier direkt in die HTML von meinem Layout eingefügt.
> Layout markieren > Fenster “Layout-Eigenschaften” > “Zwischen Head Tags” einfügen
<style type="text/css">
html, body, ul, ol, li, form, fieldset, legend{
margin: 0;
padding: 0;
}
p{
margin-bottom:15px;
}
a{
color:#0073BF;
text-decoration:none;
}
#wrap{
/* hier die Breite einstellen */
width:890px;
margin:0 auto;
}
#content{
/* Schatten um die Box - wird nicht im IE8 oder älter angezeigt */
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
.contentbox-wrapper{
position:relative;
left:0;
/* Gesamtbreite aller DIV-Container, hier mindestens die Breite von #wrap x 4, da ich hier 4 DIV-Container verwende */
width:4000px;
/* Höhe der Box - oder auf 100% stellen, dann wird der höchste DIV-Container die Höhe bestimmen */
height:250px;
}
.contentbox{
/* Breite des Inhaltes der Box */
width:870px;
height:100%;
float:left;
padding:10px;
/* Hintergrundfarbe der Box */
background:#fff;
}
/* CSS für Navigation unten */
#nav {
margin-top:10px;
padding: 10px 10px;
}
#nav ul li{
display:inline;
margin-right:10px;
}
#nav a.active {
font-weight:bold;
}
</style>
Weiterhin fügt Ihr diese Javascript-Funktion ebenfalls in die Layout-HTML “Zwischen Head Tags” ein.
<script>
function goto(id, t){
// animate to the div id.
// 1000 ist hier die Geschwindigkeit des Scrollens, je höher, desto langsamer.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 1000);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
</script>
Fügt ebenfalls die Verlinkung zu der jQuery Datei “Zwischen Head Tags” ein.
Solltet Ihr die HTML-Ausgabe XHTML verwenden, müsst Ihr die NOF eigene (alte) jQuery Datei ersetzen, dies macht Ihr am einfachsten mit der Komponente “ReplaceJquery” von “SwissKnife for NOF”.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Nun zieht Ihr Euch ein Textfeld auf und fügt Eure DIV-Container in den HTML-Code Editor des Textfeldes ein.
> Textfeld aufziehen (Cursor blinkt im Textfeld) > mittlere Button oben im Fenster “Textfeld-Eigenschaften” > Button “HTML”
... und fügt die von Euch modifizierten DIV-Container ein. Bei mir sehen diese ungefähr so aus, unten blau markiert für die Navigation. Achtet dabei auf die richtige Zuordnung der “Anker” ID. Die gelb markierten Bereiche werden mit Eurem Inhalt gefüllt.
<div id="wrap">
<div id="content">
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<h3>Über uns</h3>
<p>Hier Deinen Quelltext einbauen ...</p>
</div>
<div id="work" class="contentbox">
<h3>Unsere Arbeit</h3>
<p>Hier Deinen Quelltext einbauen ...</p>
</div>
<div id="image" class="contentbox">
<h3>Foto</h3>
<p><center>Hier kann man natürlich auch ein Foto einfügen<br><br><img src="./assets/images/afrika005-thumb.jpg" title="Vogel"><br><br>...oder auch einen <a href=http://www.nof-schule.de/forum/ target=_blank><span>Link zu unserem NOF-Forum</span></a></center></p>
</div>
<div id="contact" class="contentbox">
<h3>Kontakt</h3>
<p>Hier Deinen Quelltext einbauen ...</p>
</div>
</div>
</div>
<div id="nav">
<ul>
<li ><a class="active" href="#" onClick="goto('#about', this); return false">Über uns</a></li>
<li><a href="#" onClick="goto('#work', this); return false">Unsere Arbeit</a></li>
<li><a href="#" onClick="goto('#image', this); return false">Foto</a></li>
<li><a href="#" onClick="goto('#contact', this); return false">Kontakt</a></li>
</ul>
</div>
</div>
Tipp:
Wenn Ihr noch unsicher mit HTML-Befehlen seid, dann könntet Ihr Euch auch ein möglichst leere Seite (ZeroMargins) erstellen und dort einfach Eure Textfelder mit den Formatierungen und Bilder oder was auch immer aufziehen. Am besten Ihr stellt dann diese Seite auf XHTML, damit Ihr nicht die ganzen von NOF generierten Tabellen habt.
... dann publiziert Ihr diese Seite lokal, geht mit der rechten Maustaste auf “Seiten-Quelltext anzeigen” und kopiert Euch die entsprechenden Zeilen raus und fügt sie dann in Euer Skript einfach wieder ein. Bei dem Beispiel der Seite oben (Screenshot) sieht der von NOF generierte Quelltext dann so aus.
<p>Das ist ein mit NOF geschriebener Text, alle Formatierungen kann man verwenden, wie z.B. <b>fett</b> oder <span style="color: rgb(0,0,255);">blau</span>, etc.</p>
<p style="text-align: left;">oben ein “harter” Umbruch<br />oder oben ein “weicher” Umbruch - oder auch ein zentriertes Bild</p>
<p style="text-align: center; margin-bottom: 0px;"><img id="Bild4" height="180" width="240" src="./assets/images/Loewe.jpg" vspace="0" hspace="0" align="top" border="0" alt="Löwe" title="Löwe"/></p>