Andreas Droesch » JS

JS: Stylesheet Datei wechseln

Andreas — Tue, 20 Oct 2009 21:08:01 +0000

Dieses Beispiel basiert auf der Fragen nach einem Wechsler für CSS Dateien, um den Besuchern die Möglichkeit zu geben, aus mehreren Stylesheets zu wählen. Die Auswahl wird dabei für 30 Tage in einem Cookie gespeichert und beim nächsten Anzeigen der Seite automatisch verwendet.

Demo anschauen

Die Demo wechselt zwischen zwei einfachen CSS Dateien, die erste mit einem weißen, die zweite mit einem gelben Hintergrund als Angabe im body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Style Datei wechseln</title>

<link type="text/css" rel="stylesheet" title="style_switch" href="style1.css" />



</head>

<body onload="check_style()">



<div style="text-align:center">



  <b>Styleheet Datei wechseln</b>



  <br /><br />



  <a href="#" onclick="switch_style('style1')">Style 1 (weiß)</a> -

  <a href="#" onclick="switch_style('style2')">Style 2 (gelb)</a>



</div>



</body>

</html>

Durch Klick auf einen der Links wird die Funktion switch_style() aufgerufen. Diese erwartet als Parameter den Namen der CSS Datei (kann auch mit Pfadangabe sein, jedoch immer ohne .css Erweiterung). Die gewählte Datei wird dann automatisch in diesen link-Tag eingefügt:

<link type="text/css" rel="stylesheet" title="style_switch" href="style1.css" />

Durch das title Attribut mit dem Wert “style_switch” wird sichergestellt, dass die CSS Datei auch wirklich nur in diesem und keinem anderen (falls mehrere CSS Dateien gleichzeitig eingebunden werden) gewechselt wird.

JS: Runden mit Nachkommastelle

Andreas — Tue, 13 Oct 2009 15:12:29 +0000

JavaScript bietet von sich aus keine Funktion zum Runden einer Dezimalzahl mit Nachkommastelle, sondern rundet immer auf eine Ganzzahl. Dafür gibt es hier nun drei kleine Funktionen zum kaufmännischen Runden, Aufrunden und Abrunden mit einer beliebigen Anzahl an Nachkommastellen:

// Kaufmännisches Runden mit Nachkommastelle

function round_f(value, prec) {

  var f = Math.pow(10, prec);

  return (Math.round(value * f) / f);

}



// Aufrunden mit Nachkommastelle

function ceil_f(value, prec) {

  var f = Math.pow(10, prec);

  return (Math.ceil(value * f) / f);

}



// Abrunden mit Nachkommastelle

function floor_f(value, prec) {

  var f = Math.pow(10, prec);

  return (Math.floor(value * f) / f);

}

Hier noch ein paar Beispielaufrufe:

// Beispielaufruf 1: Kaufmännisches Runden

var x = round_f(12.343, 0); // => 12

var x = round_f(12.343, 2); // => 12.34

var x = round_f(12.345, 2); // => 12.35




// Beispielaufruf 2: Aufrunden

var x = ceil_f(12.343, 0); // => 13

var x = ceil_f(12.345, 2); // => 12.35




// Beispielaufruf 3: Abrunden

var x = floor_f(12.343, 0); // => 12

var x = floor_f(12.345, 2); // => 12.34

JS: Einfacher Bilderwechsel / Diashow

Andreas — Mon, 28 Sep 2009 22:12:44 +0000

Die Tage tauchte in einem Forum die Frage nach einem JavaScript für einen einfachen, manuellen Bilderwechsel (ohne jegliche Effekte) auf. Nachfolgend der Beispielcode für eine mögliche Umsetzung:

Demo anschauen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Einfacher Bilderwechsel</title>







</head>

<body>



<div style="text-align:center">



  

  <img src="bild1.jpg" id="image_switch" alt="" />



  <br />



  

  <span id="image_desc">Bild 1: Die Erde</span>



  <br /><br />



  

  <img src="links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" />



  

  <img src="rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" />



</div>



</body>

Wird keine Bildbeschreibung erwünscht, so genügt es folgende 3 Codestücke zu entfernen:

// Genau wie bei images hier für jedes Bild die Bildbeschreibung in eine Zeile.

var image_descs = new Array(

  'Bild 1, die Erde',

  'Bild 2, abstraktes',

  'Bild 3, asteroiden',

  'Bild 4, Horizont'

);

// Bildbeschreibung austauschen

document.getElementById('image_desc').innerHTML = image_descs[current_index];



<span id="image_desc">Bild 1, die Erde</span>