Kleine Skript-Sammlung für Webdesigner

Beitragsseiten

Der Artikel beinhaltet eine kleine Skript-Sammlung für Webdesigner mit verschiedenen hilfreichen Skripten wie z.B. automatische Title und Alt Attribute für Bilder.

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&uuml;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:

  1. Alle Links zu einem Anker auf der Seite beginnen mit # und es findet keine Unterscheidung statt ob nun langsam gescrollt werden soll oder nicht.
  2. Es muss mindestens jQuery in der Version 1.10.2 in die Seite eingebunden sein.
  3. 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: http://www.domain.de/seite.htm");

http://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

  • Erstellt am .

Unsere Kompetenzen


Alexander´s Webdesign

Mosebergstraße 1
37441, Bad Sachsa

+49-(0)-5523-952 89 98
+49-(0)-160-932 435 66
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Montag - Freitag 09:00 - 18:00 Uhr

Kundenstimmen

So bewerten uns unsere Kunden.

4.9 / 5 bei 89 Stimmen


  • Folgen Sie uns

Copyright © 2003 - 2019 Alexander´s Webdesign - Alle Rechte vorbehalten.