[Script] EM <--> PX Rechner :: JavaScript Klasse

Dieses Thema im Forum "Webentwicklung" wurde erstellt von onip, 23. Juni 2008 .

  1. 23. Juni 2008
    EM <--> PX Rechner :: JavaScript Klasse

    hallo liebe gemeinde,

    anbei hab ich euch mal ne kleine klasse zum umrechnen von em in px und px in em geschrieben.
    für mich ist das ein sehr nützliches tool, da ich meist mein css in em werte schreibe.
    das ist natürlich für barrierefreie seiten gedacht.
    ich weiß das es solche tools massen im netz gibt, aber lokal ist das doch auch nett.
    außerdem ist das auch ein kleines TUTORIAL zum erstellen und nutzen einer klasse.
    ich wünsche euch viel spass damit und hoffe das es einige von euch gefällt.

    gruß
    onip

    PS:
    der code ist 100% von mir und kann gerne erweiter werden.
    bitte teilt mir das einfach bei veränderung mit, damit ich auch was von der erweiterung habe.

    danke

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
    <head>
    <title>EM &lt;--&gt; PX Rechner</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    // klasse
    var ajaxEm = function(wert,px,em,er){
     // standard werte
     this.emwert = wert || 0.0625;
     this.formpx = px || "px";
     this.formem = em || "em";
     this.msgerror = er || "error";
     // umrechnung
     this.onMath = function (todo, zahl){
     switch (todo) {
     case "px":
     return zahl/this.emwert;
     default:
     return zahl*this.emwert;
     }
     }
     // in zahl umwandeln
     this.parseNumber = function ( number) {
     if( typeof( number) !== Number) {
     number = ( new String( number)).replace( /[.,](.*?)/g, '|$1').replace( /[^-\d|]/g, '').replace( /\|/, '.');
     if( number === '') {
     number = NaN;
     }
     number = Number( number);
     }
     return number;
     }
     // ausgabe
     this.onSuccess = function (form, todo, wert){
     var ist = this.onMath (todo, wert);
     document.getElementById(form).value = ist;
     document.getElementById(this.msgerror).innerHTML = "Der ermittelte Wert ist "+ist+" "+todo;
     }
     // fehlermeldung
     this.onError = function (txt){
     document.getElementById(this.msgerror).innerHTML = txt;
     }
     
    }
    
    window.onload = function(){
     // klasse
     var em = new ajaxEm();
     // px in em
     document.getElementById(em.formpx).onkeyup = function (){
     var zahl = em.parseNumber(document.getElementById(em.formpx).value);
     if (!isNaN(zahl)) {
     em.onSuccess (em.formem, "em", zahl);
     }else {
     em.onError("Das ist keine Zahl");
     }
     return false;
     }
     // em in px
     document.getElementById(em.formem).onkeyup = function (){
     var zahl = em.parseNumber(document.getElementById(em.formem).value);
     if (!isNaN(zahl)) {
     em.onSuccess (em.formpx, "px", zahl);
     }else {
     em.onError("Das ist keine Zahl");
     }
     return false;
     }
    }
    </script>
    <style type="text/css">
    * {
     margin: 0;
     padding: 0;
    }
    body {
     background: #fff;
     color: #000;
     font: 0.8em Lucida Grande,Verdana,Arial,Geneva,Helvetica, sans-serif;
     margin: 1em;
    }
    p {
     margin-bottom: 0.75em;
    }
    #site {
     margin: 0 auto;
    }
    fieldset {
     text-align: left;
     width: 18.75em;
     padding-bottom: 0.75em;
    }
    fieldset legend {
     font-weight: bold;
     text-transform: uppercase;
     color: #000;
     margin-left: 0.75em;
    }
    fieldset div {
     margin-left: 0.75em;
     margin-top: 0.75em;
    }
    fieldset label {
     float: left;
     display: block;
     width: 3.125em;
     text-align: right;
     margin-right: 0.625em;
    }
    fieldset input {
     width: 7.5em;
    }
    </style>
    </head>
    <body>
    <div id="site" align="center">
     <form action="" method="post">
     <fieldset>
     <legend>EM &lt;--&gt; PX Rechner</legend>
     <div id="error">Bitte ein Zahl eingeben</div>
     <div>
     <label>Pixel</label>
     <input type="text" name="px" id="px" /> px
     </div>
     <div>
     <label>EM</label>
     <input type="text" name="em" id="em" /> em
     </div>
     </fieldset>
     </form>
    </div>
    </body>
    </html>
    
    // code-update
    das css ist jetzt auch in em-werten umgerechnet, schöne barrierefreiheit
     
  2. 23. Juni 2008
    AW: EM <--> PX Rechner :: JavaScript Klasse

    nett nett dennoch solltest du dir mal durchlesen was AJAX bedeutet =)
     
  3. 23. Juni 2008
    AW: EM <--> PX Rechner :: JavaScript Klasse

    naja,eine verbindung, datenaustausch und auswertung findet nicht wirklich statt, daher hab ich das nicht als ajax definiert.
     
  4. 23. Juni 2008
    AW: EM <--> PX Rechner :: JavaScript Klasse

    ich mein wegen dem hier:
    Code:
    var ajaxEm = function
    und naja, find das ganze a weng übertrieben. ne funktion hätts auch getan
     
  5. 23. Juni 2008
    AW: EM <--> PX Rechner :: JavaScript Klasse

    da geb ich dir vollkommen recht, das ne function ausreichen würde.
    wollte jedoch auf neuer programmierweise das ganze umsetzen.
    vorteil liegt auf der hand: implemtierung ist vereinfacht.

    das ajaxEm ist ein überbleibsel aus einen gedankengang den ich hatte.
    werte per post an php, dann auswertung und zurück an JS.
    aber das wäre noch viel übertriebener.
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.