Mit ‘HTML’ getaggte Artikel

Fenster/Seite neu laden mit Javascript

Montag, 21. November 2011

Wie eine neue Seite geladen wird, weiß jeder. Einfach die F5 Taste genügt, jedoch ist meistens so, dass die Besucher den Aktualisierungsbutton auf der Adressenleiste vom Internet Browser anklicken. Manchmal ist aber der Button nicht verfügbar, wenn beispielswiese das neue Fenster des Browsers gar keine Toolbox und Buttons hat (wenn das explizit so programmiert ist, beispielsweise ein Pop-up).

Problem

Sie möchten gerne einen Link einbinden, womit Ihre Seite/Pop-up neu geladen wird – hier ist Javascript die Lösung.

Lösung

Sie müssen einfach einen solchen Link imtegrieren, um Ihre Seite mit Javascript neu laden zu können:

<a href="javascript:void(0);" onclick="javascript:window.location.reload();" />Seite aktualisieren</a>

Bitte beachten Sie, dass bestehende Daten wieder abgeschickt werden. Dies trifft beispielsweise auf, wenn Sie gerade ein HTML Formular abgesendet haben. Alternativ, können Sie die Adresse der bestehenden Seite auslesen und einfach darauf verweisen. Somit ist es irrelevant, ob vorher ein Formular abgeschickt wurde.

Wir hoffen, dass Sie sich mit dieser Funktion einige Zeit sparen konnten. Falls Ihnen der Beitrag gefällt, so nutzen Sie bitte den Gefällt mir Facebook Button.
Brauchen Sie Hilfe, kommen Sie nicht weiter? Wir stehen Ihnen zur Verfügung – 02161 / 177747 oder E-Mail.

Div mit Javascript mittig setzen / auf Bildschirm zentrieren

Donnerstag, 05. August 2010

Die nächste interesante Javascript Programmieraufgabe, mit der wir uns beschäftigen wollen ist eine Div Ebene, abhängig von ihrer Breite und Größe und abhängig von der Browser Auflösung bei dem Benutzer, der die Javascript Funktion ausführt, auf dem Bildschirm zentrieren. Das brauchen wir oft wenn wir beispielsweise schnell eine Tabelle mit Elementen zeigen wollen, die verglichen werden oder allgemein in allen Fällen, wo wir unbedingt den kompletten Inhalt des Divs möglichst übersichtlich dem Besucher zeigen wollen. An der Stelle ist es für uns nicht relevant wo sich die Maus befindet zur Zeit der Öffnung von der Div Ebene, es wird einfach die Javascript Funktion ausgeführt.

Wir gehen davon aus, dass der zu zentrierende Div bereits vorbereitet und voll mit Daten ist. Nun gehen wir hin und zentrieren ihn.

Schritte

1. Die Div Ebene muss erstmal vom linken Rand genau in der Mitte des Bildschirms stehen. Das macht man so (unser Div heißt einfach div):

document.getElementById(div).style.left='50%';

50% bedeutet – setzte die Ebene genau in die Mitte des Bildschirms vom linken Rand her. An der Stelle ist es und noch egal wie breit der Div tatsächlich ist.

2. Ensprechend der Größe der Div Ebene, den Abstand zum linken Rand des Bildschirms verringern und zwar genau die Hälfte von der tatsächlichen Größe des Divs:

function CenterScreenDiv(div) {
div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Und fertig – die Ebene steht mittig wie ein Wunder, cross-browser-fähig!

Zusammenfassung der Funktion

Anbei die Funktion komplett:


document.getElementById('MyDiv').innerHTML = 'Hallo Welt';
CenterScreenDiv(document.getElementById('MyDiv'));

function CenterScreenDiv(div) {
div.style.left='50%';
div.style.marginLeft = "-" + parseInt(div.offsetWidth / 2) + "px";
div.style.marginTop = parseInt(div.offsetHeight / 2) + window.document.documentElement.scrollTop + "px";
}

Die Funktion können Sie auch bequem nutzen immer, wenn Sie dynamische Inhalte via AJAX nutzen. Es wird auch berücksichtigt, dass das Fenster auch mittig und sichtbar stehen soll, auch wenn der Benutzer nach unten gescrollt hat.

Strings und Substrings mit Javascript teilen

Montag, 02. August 2010

Javascript bietet eine schöne Range an Funktionen, die mit Zeichenketten/Strings arbeiten. Ähnlich zu der PHP Funktion substr, gibt es die Funktion substr() auch in Javascript, die es zulässt, eine Zeichenkette von vorne oder hinten abzuschneiden. Im Kombination mit AJAX wird diese Funktion sehr nützlich und sehr oft benutzt. Wir werden die Funktion vorstellen und später ein sehr interessantes Beispiel einer Javascript Funktion betrachten, die die Anzahl der Zeilen vom Wert einer Textarea zurückgibt.

Funktion

Syntax: ZEICHENKETTE.substr(nStart, nLaenge)

Beispielsfunktion:

var sString = "Hallo Welt!";
alert(sString.substr(6));

Resultat: “Welt!” – es wurde bei der Javascript Funktion vom ersten zum letzten Zeichen geschnitten.

Parameter

nStart - der Parameter ist erforderlich und gibt an ab welchem Zeichen die neue Zeichenkeitte starten soll.
nLaenge – der Parameter ist nicth erforderlich und gibt an wie lang in Zeichen die neue Zeichenkette sein wird. Sollten sie den Parameter nicht angeben – wie auf dem ersten Beispiel oben – so wird die Zeichenkette ab nStart zum Ende abgeschnitten.

Vertiefung der Funktion und Anwendungsbeispiele

Um die Funktionsweise zu vertiefen, werden wir eine Funktion zur Ermittlung der Anzahl der Zeilen einer Textarea betrachten, die wir nutzen, um programmiertechnisch den Wert des Attributes “rows” zu beeinflussen, so dass der in der Textarea eingegebene Text immer sichtbar ist ohne Scrollbalken, Facebook Style. Die Funktion werden wir in den nächsten Artikel näher betrachten.


function BerechneTextAreaHoehe(tarea) {    
    var nCounter = 1;
    var sNeedle = "\n";
    for (var i=0;i< tarea.value.length;i++) {
        if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
            nCounter++;
        }
    }    
    tarea.rows=nCounter;
}

Was passiert in der oberen Funktion?

 - es wird der zur Zeit eingegebene Wert einer als Parameter übergebenen Textarea Zeichen für Zeichen abgeschnitten
 - Sofern ein Abschnitt gleich der Zeichenkette “\n” (weicher Return) ist, so wird der Counter um eins erhöht.
 - Am Ende wird entweder 1 oder die größer 1 Zahl zurückgegeben.

Wenn diese Funktion bei jedem Tastendruck angewendet wird, so kann das Attribut rows manipuliert werden. Dazu aber in unseren nächten Artikeln.

Bei jäglichen Fragen stehen wir gerne zur Verfügung.