JavaScript Buttons 2 - Website X5 Hilfe - Die Helpsite

Website hundertprozent CO2 neutral mit Host Europe
Direkt zum Seiteninhalt

Hauptmenü

JavaScript Buttons 2

Scripte > Snipped


Buttons und Textlinks mit JavaScript.

JavaScript

Achtung: Ohne Aktivierung JavaScript sind die folgenden Code nicht ausführbar.
  Standardeinstellung in den Browsern ist aktiv.


Die „Browser”-Symbole [IE|M|O|S|G|K]:

IE = Internet Explorer
M = Mozilla Firefox
O = Opera

S = Safari
G = Google Crome
K = Konqueror*




Alle JavaScripte und CSS-Anweisungen sind Browser getestet. Eine 100%ige Kompatibilität zu jeder Browser-Version ist nicht gewährleistet.
* Ein Kompatibilitätstest zu dem Browser Konqueror (Linux) ist leider nicht möglich, wegen fehlender Hard-, beziehungsweise Software.
Entsprechende Hinweise zu den genannten Browsern werden gerne entgegen genommen.
Viele JavaScripte die mit dem Internet Explorer und Mozilla Firefox laufen, gehen auch mit Safari und Google Chrome.
Inzwischen gibt es ein dutzend verschiedene Browser und ebenso viele Browserversionen. Eine Anpassung der Homepage an alle Browser ist daher unmöglich.



Startseite festlegen  [IE|M|O]


<a href="#"
onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.x5forum.home-wiekau.de');">
X5 Helpsite als Startseite festlegen</a>



E-Mail Button  [IE|M|O]



<input type="button" value="E-Mail schreiben"
onclick="location.href='mailto:kontakt@home-wiekau.de'">


E-Mail Button mit Textvorbelegung  [IE|M|O]



<input type="button" value="E-Mail an einen Freund" onclick="parent.location='mailto:?Subject=Webseitenempfehlung&amp;Body=Hallo, ich habe eine tolle Seite mit vielen erstklassigen Scripts und vielen Tipps, Tricks und Informationen gefunden. Die URL lautet http://www.x5forum.home-wiekau.de. Schau doch mal dort vorbei. Es lohnt sich! Bis bald.'">


Fenstergröße ändern [IE|M|O]
Die Fenstergröße lässt sich mit einem Klick auf den Button ändern. Funktioniert nicht bei Frames!
Ab „I.Explorer 7“ funktioniert die Anweisung body onLoad="window.resizeTo(640,480)" im Web nicht mehr.









<input type=button value="Fenster 640x480" onclick="window.resizeTo(640,480)">

<input type=button value="Fenster 800x600" onclick="window.resizeTo(800,600)">

<input type=button value="Fenster 1024x768" onclick="window.resizeTo(1024,768)">



Rahmen entfernen  
[IE|M]
Die gestrichelten Rahmen lassen sich ganz leicht entfernen.
Anwendbar auf Textlinks, Bilder mit Links und Image Maps.



mit Rahmen

     ohne Rahmen


<table cellpadding=10><tr><td align=center><input type="button" value="klick"><br><b> mit Rahmen</b></td>
<td align=center><input type="button" value="klick" onClick="this.blur()"><br><b> ohne Rahmen</b></td></tr></table>


Bestätigung mit Antwort [IE|M|O]



<script type="text/javascript">
function Geschenk() {
// Confirm
if (confirm("Bitte, schenkst Du mir Dein Auto?")==true) {
 alert("Das finde ich ja echt toll.");
 }
 else {
  alert("War mir klar, Du bist gemein.");
 }
}
</script>
 <input type=button value="Auto-Geschenk" onClick='Geschenk();'>



Button Zähler [IE|M|O]



<script type="text/javascript">
// Button Zähler
var nn=0, pause=100;
function zaehler() {
document.formel.Button.value=Math.floor(nn)+"%";
nn++;
if  (nn <= 99) {
 setTimeout("zaehler()",pause);
}
else {
 document.formel.Button.value="...fertig (Start)";
 nn=0;
}
}
</script>
<form name="formel">
<input type=button value="Start" name="Button"
onclick="this.blur(); zaehler()"
style="width:140px; text-align:center">
</form>



Meldung mit Format [IE|M|O]





<input type=button value="Textmeldung o. Formatierung"
onClick="alert('Die Meldung: Hier ein Text nur zur Demonstration. Diese Funktion ist deshalb eingeschränkt.')">
<input type=button value="Textmeldung mit Formatierung"
onClick="alert(' Die Meldung: Hier ein Text, nur zur Demonstration. Diese Funktion ist deshalb eingeschränkt.')">

Formatiert wird die Ausgabe(der Text) mit:
\t = Tabulator
\r = Return (oder \n)



Wertübergabe in Javascript [IE|M]



<script type="text/javascript">
// Wertübergabe in Javascript
function Test(Name) {
alert("Sie haben Button " + Name + " gedrückt");
}
</script>
 <input type=button value="Button 1" onClick="Test('EINS')">
 <input type=button value="Button 2" onClick="Test('ZWEI')">



Blinkender Text [IE|M|O]


So blinkt der Text


<strong id="xx">So blinkt der Text</strong>
<script type="text/javascript">
// Blinkender Text

var aktiv = false;
function blink() {
var h = "0" + Math.round (Math.random () * 15).toString (16);
h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 2);
h = "0" + Math.round (Math.random () * 255).toString (16) + h.substring (h.length - 4);
document.getElementById("xx").style.color= '#' + h.substring (h.length - 6);
aktiv = window.setTimeout ("blink()", 600); // Blink-Geschwindigkeit
}

function blinkStop() {
if (aktiv) {
 window.clearTimeout(aktiv);
}
}
</script>
 <input type="button" value="Blink" onClick="blink();">
 <input type="button" value="Stopp" onClick="blinkStop();">



Objekte Anzeigen / Verstecken [IE|M|O]
Buttons, Texte, Bilder etc. können auf Klick angezeigt oder versteckt werden.



<input type="button" value="Anzeigen / Verstecken"
onclick="if(document.getElementById('hallo').style.visibility=='hidden')
document.getElementById('hallo').style.visibility='visible';
else document.getElementById('hallo').style.visibility='visible'">
<span id="hallo" style="visibility: hidden">
<br /><br />
<img src="images/button_demo-p.gif">
</span>

visibility: visible = Anzeige
visibility: hidden = Nichtanzeige mit Platzhalter
display: block = Anzeige
display: none = Nichtanzeige ohne Platzhalter



Seite scrollen [IE|M|O]
Scrollt die Seite bis zur angegebenen Position (I<=1050).



<script type="text/javascript">
// Seite scrollen
function scrollit() {
 for (var I=1; I<=1050; I++) {
  scroll(1,I);
 }
}
</script>
<input type=button value="Seite scrollen" onClick="scrollit()">


Aktuelle Fenstergröße ermitteln [IE|M|O]
Benötigt man, um den sichtbaren Bereich des Browser-Fensters zu ermitteln.



<script type="text/javascript">
// Die aktuelle Fenstergröße ermitteln
function Check() {
 alert("Die aktuelle Fenstergröße\n Breite: " +
document.body.offsetWidth+"  Höhe: "+document.body.offsetHeight + " Pixel")}
</script>
<input type="button" value="Fenstergröße ermitteln" onClick="Check()">


Aktuelle Datum anzeigen lassen ohne Button [IE|M|O]



<body onLoad="Datum();">
<script type="text/javascript">
function Datum() {
var Heute = new Date();
var Tag   = Heute.getDate();
var Monat = Heute.getMonth()+1;
var Jahr  = Heute.getFullYear();
document.date.datum.value= Tag + "." + Monat + "." + Jahr;
}
</script>
<body>
<form name="date">
<input type=text name="datum" size=10>
</form>


Aktuelle Datum Anzeigen lassen mit Button [IE|M|O]



<script type="text/javascript">
function bDatum() {
var Heute = new Date();
var Tag   = Heute.getDate();
var Monat = Heute.getMonth()+1;
var Jahr  = Heute.getFullYear();
document.bdate.bdatum.value= Tag + "." + Monat + "." + Jahr;
}
</script>
<body>
<form name="bdate">
<input type=text name="bdatum" size=10>
<input type=button value="Zeige Datum" onClick="bDatum()">
</form>


Aktuelle Uhrzeit anzeigen lassen ohne Button [IE|M|O]



<body onLoad="window.setTimeout('Uhrzeit()',1000)">
<script type="text/javascript">
function Uhrzeit() {
var Heute = new Date();
var Stunde  = Heute.getHours();
var Minute  = Heute.getMinutes();
var Sekunde = Heute.getSeconds();
document.zeit.uhr.value= Stunde + ":" + Minute + ":" + Sekunde;
window.setTimeout('Uhrzeit()',1000);
}
</script>
<form name="zeit">
<input type=text name="uhr" size=9>
</form>


Aktuelle Uhrzeit anzeigen lassen mit Button [IE|M|O]



<script type="text/javascript">
function bUhrzeit() {
var Heute = new Date();
var Stunde  = Heute.getHours();
var Minute  = Heute.getMinutes();
var Sekunde = Heute.getSeconds();
document.bzeit.buhr.value= Stunde + ":" + Minute + ":" + Sekunde;
window.setTimeout('bUhrzeit()',1000);
}
</script>
<form name="bzeit">
<input type=text name="buhr" size=9>
<input type=button value="Zeige Uhrzeit" onClick="bUhrzeit()">
</form>


Ausgabe des HTML-Title-Tags [IE|M|O]
Hier wird der Seitentitel ausgegeben, der innerhalb des HTML-Titel-Tags <title>Der Seitentitel</title> steht.



<input type=button value="Seitentitel anzeigen!" onClick="alert(document.title);">



Window Zoom [IE|M|O]
Beim Drücken des Buttons, wird ein kleines Fenster geöffnet das sich langsam bis auf seine endgültige Größe zoomt.


Seite 1: Fenster Öffnen



Seite 2: Fenster Zoomen


Seite 1: Fenster Öffnen<br /><br />
<script type="text/javascript">
// Window Zoom
function Zoom() {
window.open("files/x5_demo-popup.html","fensterln","width=100,height=100")}
</script>
<input type=button value=" Z O O M " onClick="Zoom()">
Seite 2: Fenster Zoomen<br /><br />
<script type="text/javascript">
for(var i = 100; i < 800; i++)
self.resizeTo(i, 0)
 for(var i= 100; i < 600; i++)
self.resizeTo(800, i)
</script>


Buttonwechsel bei MouseOver [IE|M|O]


<a href="#"
onMouseOver="pic1.src='iages/button_demo-p.gif';"
onMouseout="pic1.src='images/button_demo-a.gif';">
<img name="pic1" src="images/button_demo-a.gif" border=0>
</a>


Funktionsaufrufe ohne Button [IE|M|O]


<a href="javascript:DerAufruf()">Der Anzeigetext</a>


Funktionsaufrufe mit Button [IE|M|O]



<input type="button" value="Der Anzeigetext" onClick="DerAufruf()">


Browser Online/Offline Status [IE|M|O]
Testet ob der Browser im Online- oder Offlinebetrieb ist.


=


<script type="text/javascript">
function Status() {
if (navigator.onLine == true) {
 document.formel3.anzeige.value="Online";
}
else {
 document.formel3.anzeige.value="Offline";
}
}
</script>
<form name="formel3">
<input type=button value="Browser Status" onClick="Status()"> =
<input type=text value="" name="anzeige" size=10>
</form>



Dokument Status [IE|M|O]
Testet wo diese Datei gespeichert ist. Lokal = PC, Extern = Server (Internet).


=


<script type="text/javascript">
function Source() {
if (window.location.protocol=="file:") {
 document.formel4.anzeige.value="Lokal";
}
if (window.location.protocol=="http:") {
 document.formel4.anzeige.value="Extern";
}
}
</script>
<form name="formel4">
<input type=button value="Dokument Status" onClick="Source()"> =
<input type=text value="" name="anzeige" size=7>
</form>


 
Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
 

© 2009 - 2012

Suche



  Besucher Statistik
 » 5 Online
 » 62 Heute
 » 608 Woche
 » 1691 Monat
 » 12263 Jahr
 » 26365 Gesamt
Rekord: 273 (24.04.2012)
Newsletter
Zurück zum Seiteninhalt | Zurück zum Hauptmenü