Kleine Scriptsammlung für Webmaster
Kleine Skript-Sammlung für Webdesigner
Anbieten eines "Zurücklinks"
Wenn man seinen Usern die Möglichkeit bieten will zur vorher betrachteten Seite zu springen einfach folgenden Code an passender Stelle einfügen.
<a href="javascript:history.back()">zurück</a>
Gestrichelte Horizontale Linie einfügen in HTML seiten
Wenn man in eine HTML Seite eine gestrichelte horizontale Linie einfügen will dann kann man einfach folgenden Code einfügen.
<hr style="border:none; border-top:1px dashed black; height:1px; color:#000000; background:transparent">
In diesem Artikel beschreiben wir ein Beispiel zum Einfügen von "Smooth Scroll" auf der eigenen Webseite. Gerade beim Springen zu Ankerpunkten oder beim Einbinden eines "Nach oben" Buttons ist es wesentlich schöner wenn die Webseite sich zum entsprechenden Punkt Scrollt und nicht springt.
Der Folgende Beispielcode ist für das langsame Scrollen aller Links die zu einem Anker auf der Seite führen. Das Scrollen funktioniert in beide Richtungen also auch nach oben.
Zu Beachten ist dabei folgendes:
- Alle Links zu einem Anker auf der Seite beginnen mit # und es findet keine Unterscheidung statt ob nun langsam gescrollt werden soll oder nicht.
- Es muss mindestens jQuery in der Version 1.10.2 in die Seite eingebunden sein.
- Die Scrollgeschwindigkeit kann angepasst werden, wenn die "1000" geändert wird. Es handelt sich dabei um die Zeit in Millisekunden in denen der nächste Punkt erreicht wird.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Weiterführende Links
Ein Beispiel für langsames Scrollen: https://css-tricks.com/examples/SmoothPageScroll/
Automatische Title und Alt Attribute für Bilder
Dieses Script liest per Javascript den Dateinamen der Bilder aus und setzt diesen als Title und Alt Attribut ein.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
Divcontainer einfliegen lassen
In diesem kleinen Artikel findet sich der Quellcode inklusive der Anleitung um einen Divcontainer "einfliegen" zu lassen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box{
position: absolute;
left: 0;
top:0;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid #000;
background-color: #ccc;
}
</style>
<script>
var delay = 5;
var movepx = 2;
function init(_object,startx,starty,endx,endy){
var o = document.getElementById(_object);
o.style.left = startx + 'px';
o.style.top = starty + 'px';
fly(_object,endx,endy);
}
function fly(_object,xpos,ypos){
var o = document.getElementById(_object);
var posx = parseInt(o.style.left);
var posy = parseInt(o.style.top);
o.style.left = (posx<xpos) ? posx + movepx + 'px' : xpos + 'px';
o.style.top = (posy<ypos) ? posy + movepx + 'px' : ypos + 'px';
if(posx != xpos || posy != ypos){
setTimeout('fly('' + _object + '',' + xpos + ',' + ypos + ')', + delay);
}
}
</script>
</head>
<body onload="init('box',0,100,300,100)">
<div id="box">
Inhalt
</div>
</body>
</html>
Automatische Weiterleitung von Webseiten
In diesem Artikel wird kurz beschrieben wie eine automatische Weiterleitung von Webseite a zu Webseite b eingerichtet werden kann.
Möglichkeit 1 JavaScript
Um die Weiterleitung mittels Javascript einzurichten muss im Quellcode folgendes eingebunden werden.
<script language="JavaScript" type="text/javascript">
setTimeout("location.href='seite.htm'", 5000);
</script>
seite.htm muss natürlich durch die Adresse der Zielseite ausgetauscht werden.
5000 gibt die Zeit in Millisekunden an nach der der Besucher weitergeleitet wird.
Möglichkeit 2 Meta-Refresh
<meta http-equiv="refresh" content="5, url=seite.htm">
seite.htm muss natürlich durch die Adresse der Zielseite ausgetauscht werden.
Die 5 gibt die Zeit in Sekunden an nach der der Besucher weitergeleitet wird.
Möglichkeit 3 PHP Header
Der PHP Header funktioniert ausschließlich auf php Seiten und führt zur sofortigen Weiterleitung des Besuchers auf die angegeben Adresse.
header("Location: www.domain.de/seite.htm");
muss natürlich durch die Adresse der Zielseite ausgetauscht werden.
Verwenden von Browserweichen
Manchmal kann es notwendig Sein für verschiedene Browser verschiedenen Inhalte auf Webseite darzustellen. Hier wird nun eine kleine einfasche Möglichkeit dargestellt. Vorrausetzung für die Anwendung ist die Scriptsprache PHP.
Browserkürzel für den Quellcode
- Browser Opera: opera
- Browser Firefox: firefox
- Browser Internetexplorer: msi
- Browser Phoenix: phoenix
<?PHP
if(eregi("BROWSERKÜRZEL",$_SERVER['HTTP_USER_AGENT'])) {
echo "Browser: ABC";
} else {
echo "Es wird ein anderer Browser verwendet";
}
?>
Weiterführende Links
www.time4joomla.de/joomla-18/tipps-und-tricks-16/187-php-browserweiche.html
Comments
No Comments