Archiv

In den vergangenen Jahren haben sich bei mir zahlreiche JavaScript-Codeschnipsel angesammelt, die immer wieder Verwendung haben. Bisher habe ich immer viel Zeit mit der Suche danach verschwendet. Deshalb habe ich mir gedacht eine eigene „Bausteine“-Seite bringt vieleicht nicht nur mir eine Erleichterung.

Um auch in Zukunft neue JavaScript-Bausteine bereitstellen zu
können bin ich auf Ihre Mithilfe angewiesen.
Senden Sie mir Ihren

JavaScript-Baustein

JavaScript Bausteine
SiteMap

JavaScript-Bausteine 1
Guten Tag - Wenn jemand die Seite öffnet erscheint ein "Guten Tag".
Letzte Änderung - Letzte Änderung der Webseite.
Frame Killer - Aus einem Frameset befreien!
Frame Maker - Ein Frameset hinzufügen!
Tagesdokument - Öffnet an jedem Tag des Jahres eine andere Seite.
Zentriere Mich! - Ein neues Fenster wird in die Mitte des Bildschirms gestellt.
Maximiertes Fenster - Das aktive Fenster wird auf Bildschirmgröße vergrößert.
ScrollDown - Der Fensterinhalt wird auf Button-Klick gescrollt.
Statuszeilentext - Einmal etwas anderes als der nervige Statuszeilenticker :-)
Fenster mit Format öffnen (1)
Fenster mit Format öffnen (2)
Lesezeichen/Favoriten für I. Explorer und Firefox setzen
Alert Box
Hintergrund - Hintergrundfarbe, Textfarbe, Hintergrundbild mit JavaScript ändern.
Neues Fenster
Fragefenster - Dieses Script fragt den Namen des Besuchers ab, und schreibt ihn auf die HTML-Seite.
Nachrichten
Umleitung - Umleitung je nach Browser
Zwei Frames - Zwei Frames gleichzeitig ändern.
Bildschirmgröße - Öffnet ein neues Fenster mit der größe Ihres Bildschirmes.
Webseite automatisch aktualisieren - Die Seite wird automatisch alle 20 Sekunden aktualisiert.
Zurück zur Adresse - Dieses Script prüft nun von welcher Seite jemand gekommen ist.
Dateipfad - Damit können Sie Ihren Besuchern anzeigen, wo er sich gerade befindet.
No-Banner-EX - Das Script erzeugt ein Fenster in Bannergröße...
Goodbye - Wenn jemand die Seite verläßt erscheint ein "Goodbye".

[IE|M|O] = Browsertest! Erfolgreich getestet mit: Internet Explorer, Mozilla Firefox, Opera.
» Wichtige Information zur Kompatibilität der Webbrowser bei JavaScript und CSS

• Guten Tag [IE|M|O]

Wenn jemand die Seite öffnet erscheint ein "Guten Tag".

 <body onLoad="alert('Guten Tag')">

Mit dem Event-Handler onLoad="" kann auch etwas sinnvolles gemacht werden,
zum Beispiel ein JavaScript starten <body onLoad="demo();">

• Letzte Änderung [IE|M]

oder:

<script type="text/javascript">
// Letzte Änderung
var  modDate = document.lastModified
var  Tag = modDate.slice(3,5);
var  Monat = modDate.slice(0,2);
var  Jahr = modDate.slice(6,10);
 modDate = "Letzte Änderung am  " + Tag + "." + Monat + "." + Jahr;
 document.write(modDate);
</script>

oder:

<script type="text/javascript">
// Letzte Änderung
var theDate = document.lastModified
document.write("Last Update " + theDate);
</script>

Tipp: Lesen Sie dazu auch das JavaScript

Datei Erstellt am...
oder

Letzte Aktualisierung mit vergangener Tagesanzeige

• Frame Killer [IE|M|O]

<script type="text/javascript">
// Frame Killer
if (top.frames.length > 0) {
 top.location.href=self.location;
}
</script>

Wenn die Seite einzeln steht, sie aber in einem Frame soll,
benutzen Sie das folgendes Script:

• Frame Maker [IE|M|O]

<script type="text/javascript">
// Frame Maker
if (top.frames.length < 1) {
 top.location.href="frameset.htm";
}
</script>

Tipp:

Frameset automatisch nachladen

• Tagesdokument [IE|M|O]

Öffnet an jedem Tag des Jahres eine andere Datei nach dem Muster:
am 17.8. die Datei 17-8.htm

<script type="text/javascript">
// Tagesdokument
var jetzt = new Date();
var tag = jetzt.getDate();
var monat=jetzt.getMonth();

var dateiname = tag + "-" + (monat + 1) + ".htm";
document.location.href=dateiname;
</script>

• Zentriere Mich! [IE|M|O]

Ein neues Fenster wird in die Mitte des Bildschirms gestellt.

<script type="text/javascript">
// Zentriere Mich!
 var weite = 300;
 var hoehe = 200;
 fenster=window.open('seite1.htm','fenster','width=' + weite + ',height=' + hoehe);
 
 fenster.moveTo(((screen.availWidth-weite)/2),((screen.availHeight-hoehe-100)/2));
</script>

• Maximiertes Fenster [IE|M|O]

Das aktive Fenster wird auf Bildschirmgröße vergrößert.
Ideal, wenn man seine Seite optimiert hat.
Aber nichts für die Webseite, denn diese Funktion kann Besucher kosten!

<script type="text/javascript">
// Maximiertes Fenster
if (document.layers) {
 var w = screen.availWidth-10;
 var h = screen.availHeight-10;
}
else {
 var w = screen.availWidth+6;
 var h = screen.availHeight+6;
}
self.resizeTo(w,h);
self.moveTo(-2,-2);
</script>

• ScrollDown [IE|M|O]

Der Fensterinhalt wird auf Button-Klick gescrollt.

<script type="text/javascript">
// ScrollDown
function scrollit() { 
for (zaehler=1; zaehler <= 500; zaehler++) {
 scroll(1,zaehler)
 }
}
</script>

 <input type=button value="ScrollDown" onClick="scrollit();">

• Statuszeilentext [IE|M|O]

Einmal etwas anderes als der nervige Statuszeilenticker.
Dieses JavaScript funktioniert in modernen Browsern nicht mehr (wegen fehlender Statuszeile :)

<script type="text/javascript">
// Statuszeilentext
 window.defaultStatus = " [www.homepage-total.de] - Die Seite für Webworker ";
</script>

• Fenster mit Format öffnen (1) [IE|M|O]

<input type=button value="Fenster öffnen"  
onClick="window.open('', 'fensterln', 'directories=0, location=0, menubar=0, resizable=1,
scrollbars=1, status=0, toolbar=0, width=600, height=300').location.href='bausteine.htm'">

• Fenster mit Format öffnen (2) [IE|M|O]

<script type="text/javascript">
// Fenster mit Format öffnen (2)
function openFenster(goURL, width, height) {
 window.open(goURL, 'fensterln', 'scrollbars=yes, status=no, menubar=no,
  resizable=no, location=no, toolbar=no, width=' + width + ', height=' + height);
}
</script>

 <a title="Neues Fenster" href="javascript:openFenster('seite1.htm', 620, 520)"> Seite 1 </a>
 <a title="Neues Fenster" href="javascript:openFenster('seite2.htm', 300, 600)"> Seite 2 </a>

• Lesezeichen/Favoriten für I. Explorer und Firefox setzen [IE|M]

// Internet Explorer
Meine Seite zu deinen 
<a href="javascript:window.external.addfavorite('http://www.homepage-total.de/','[ www.homepage-total.de ]')">
 Favoriten</a> hinzufügen.

// Firefox
Meine Seite zu deinen 
<a href="javascript:window.sidebar.addPanel('Homepage-Total.de','http://www.homepage-total.de/','');">
 Lesezeichen</a> hinzufügen.

// Internet Explorer
Meine Seite zu deiner 
<a href="javascript:history.go(0)" onClick="this.style.behavior='url(#default#homepage)';
 this.setHomePage('http://www.homepage-total.de');">
Startseite</a> machen.

Meine Seite zu deinen Favoriten hinzufügen.

Meine Seite zu deinen Lesezeichen hinzufügen.

Meine Seite zu deiner Startseite machen.

• Alert Box [IE|M|O]

<script type="text/javascript">
 alert("Hallo Welt!");
</script>

• Hintergrund ändern

Hintergrundfarbe, Textfarbe, Hintergrundbild mit JavaScript ändern.

<script type="text/javascript">
// Hintergrund ändern
  document.getElementsByTagName("body")[0].style.backgroundColor="#000000";
  document.getElementsByTagName("h1")[0].style.color="#FF0000";
</script>

• Neues Fenster [IE|M|O]

<script type="text/javascript">
 window.open("http://www.homepage-total.de",
"windowname","height=320,width=320,scrollbars,resizable");
</script>

• Fragefenster [IE|M|O]

<script type="text/javascript">
// Fragefenster
var NAME = prompt("Wie ist Ihr Name?","")
document.write( NAME + ", Willkommen auf dieser Homepage!");
</script>

Dieses Script fragt den Namen des Besuchers ab, und schreibt ihn auf die HTML-Seite.

• Nachrichten [IE|M|O]

<script type="text/javascript">
// Nachrichten
function NEWS() {
 setTimeout("document.news.news.value = ('Nachricht 1 ...')",0);
 setTimeout("document.news.news.value = ('Nachricht 2 ...')",3000);
 setTimeout("document.news.news.value = ('Nachricht 3 ...')",6000);
 setTimeout("NEWS()",9000);
}
</script>

<form name="news">
<input type="text" name="news" size="40"> 
  <a href="javascript:NEWS();">Nachrichten anzeigen</a>
</form>

•Umleitung [IE|M|O]

Umleitung je nach Browser (IExplorer / Netscape / Opera);
Verzweigt je nach Browser zu einer anderen Seite.
Dieses Script sollte nicht mehr verwendet werden,
der Webmaster sollte seine Seite so schreiben das sie
für alle Browser zugänglich ist!

<script type="text/javascript">
app = navigator.appName;
if (app == 'Netscape') {
 location.href="Netscape.html";
}

if (app == 'Microsoft Internet Explorer') {
 location.href="IExplorer.html";
}

if (app == "Opera") {
 location.href="opera.htm";
}
</script>

• Zwei Frames [IE|M|O]

Zwei Frames gleichzeitig ändern.
Ein weiteres Script finden Sie unter

Bausteine 4

<script type="text/javascript">
// Zwei Frames gleichzeitig ändern
function ZweiFrames(URL1 , F1 , URL2 , F2) {
 parent.frames[F1].location.href = URL1;
 parent.frames[F2].location.href = URL2;
}
</script>

<a href="javascript:ZweiFrames('seite1.htm',0,'seite2.htm',1)">

• Bildschirmgröße [IE|M]

Öffnet ein neues Fenster mit der größe Ihres Bildschirmes.

<script type="text/javascript">
// Öffnet ein neues Fenster mit der größe Ihres Bildschirmes
function Screen() {
 if(screen.width == 800) {
   window.open("INHALT.htm","fenster","toolbar=0,location=0,status=0,   // Zeilenumbruch!
resize=0,menubar=0,scrollbars=yes,width=800,height=600");
 }
 else if(screen.width == 1024) {
   window.open("INHALT.htm","fenster","toolbar=0,location=0,status=0,   // Zeilenumbruch!
resize=0,menubar=0,scrollbars=yes,width=1024,height=768");
 }
}
</script>

<a href="javascript:Screen()"> INHALT </a>

• Webseite automatisch aktualisieren [IE|M|O]

Die Seite wird mit diesem Script automatisch alle 20 Sekunden aktualisiert.

<body onload="setTimeout('window.history.go(0)', 20000);">

• Zurück zur Adresse [IE|M|O]

<script type="text/javascript">
// Zurück zur Adresse
var previousurl = "http://www.homepage-total.de/xyz.htm"
if (document.referrer != previousurl) {
 history.go(-1);
 alert("Zugriff verweigert, weil Du von der falschen Seite kommst!");
}
</script>

Dieses Script prüft nun von welcher Seite jemand gekommen ist.
Wird nun die Seite nicht von www.homepage-total.de/xyz.htm aufgerufen,
dann wird die Seite nicht gezeigt.

• Dateipfad [IE|M|O]

Damit können Sie Ihren Besuchern anzeigen, wo er sich gerade befindet.
Aufgelistet wird der gesamte Pfad zu der jeweiligen Datei und man kann
sich komfortabel zum Beispiel in übergeordnete Verzeichnisse zurückklicken.

<script type="text/javascript">
// Original:  Kevin Lynn Brown 
 var path = "";
 var href = document.location.href;
 var s = href.split("/"); 
 for (var i = 2; i< (s.length-1); i++) {
  path+="<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"/\">"+s[i]+"</A> / ";
 }
 i = s.length -1;
 path += "<A HREF=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+"</A>";
 var url = window.location.protocol + "//" + path;
 document.writeln(url);
</script>

Anmerkung: In jedem Verzeichnis muss eine index.htm-Datei vorhanden sein.
In dieser index.htm-Datei kann z.B.: eine Übersicht oder ein Vorwort stehen.

Sie befinden sich hier:

• No-Banner-EX [IE|M|O]

Das Script erzeugt ein Fenster in Bannergröße.
Wenn man versucht das Fenster zu schließen,
öffnet es sich nach 1 Minute wieder.
Außerdem schiebt es sich jede Minute in den
Vordergrund und in die Mitte des Bildschirms.

<script type="text/javascript">
// No-Banner-EX
function BannerOpen() {
 Banner = window.open("banner.htm", "bannerfenster","width=400 ,height=40");
 Banner.moveTo(((screen.availWidth-400)/2),((screen.availHeight-40-100)/2))
}

function BannerCheck() {
 if (Banner.closed == true) {
  BannerOpen();
 }
 Banner.focus();
 setTimeout("BannerCheck()", 60000);
}
</script>

</head>
<body onload="BannerOpen(),BannerCheck()">

• Goodbye [IE|M|O]

Wenn jemand die Seite verlässt erscheint ein "Goodbye".

 <body onUnload="alert('Goodbye')">

CSS Bausteine 1 [1] JavaScript Bausteine 2