Footer, also die Fußzeilen von Webpages, werden in dank Web 2.0 immer großzügiger gestaltet und sind mittlerweile bei vielen Websites schon zu einem gleich wichtigen Teil wie Header geworden. Sticky Footer sind eine Mischung aus static (normal, am Text- bzw. Elementfluss angepasst) und fixed (am viewport angepasst, bleibt immer am Rand des Browserfensters stehen) Footer. Bei viel Content bleiben sie unter diesem stehen aber wenn weniger Content vorhanden ist bleiben Sie am unteren Rand des Browserfensters hängen. Hier gibts auch eine Demo dazu: file.chris-blank.de/stick_footer/
Der HTML-Code:
Grafiken in Auswahlliste sind nicht nur nett anzuschaun sondern erhöhen die Benutzterfreundlichkeit.
Mit Hilfe von CSS ist dies kein Problem. Allerdings ensteht bei längeren Listen sehr viel Code.
Der HTML-Code zeigt noch keine Besonderheiten:
PDF-Dateien werden im WordWideWeb grundsätztlich verlinkt wie normale HTML Seiten.
<a href="http://website.tld/file.pdf">
Link zur PDF-Datei</a>
Es gibt allerdings eine Parameter die man dem Link anhängen kann um um die Anzeige der Dateien zu konfigurieren. Dies wird wie bei normalen Ankerverweisen gemacht. Hier mal eine Liste der wichtigsten Parameter:
page
Seite welche im Dokument als erstes angezeigt werden soll.
pagemode
Legt fest was in der Sitebar angezeigt werden soll. Möglicher Wert ist ‘thumbs‘, ‘bookmarks‘ oder ‘none‘.
scrollbar
Steuert die Anzeige der Scrollbalken. Der Wert ‘0‘ blendet sie aus, der Wert ‘1‘ ein.
search
Zugriff auf die Erweiterte Suche. Als Wert den Suchbegriff angeben.
toolbar
Blendet die Symbolleiste wahlweise ein oder aus. Verwendung wie scrollbar
zoom
Zoomfaktor des Dokuments als Zahlenwert, z.B. ‘200‘
Natürlich lassen sich alle Parameter gleichzeitg verwenden:
<a href="http://website.tld/file.pdf#
page=2&zoom=200&search=Suchbegriff">
Link zur PDF-Datei</a>
Da ich öfters gefragt werde wie man einen StyleSwitcher programmiert hab ich hier mal einen fertigen für euch ausgegraben.
In der styleswitcher.js steht das gesammt JavaScript:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
