#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 <--> 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 <--> 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 + Multi-Zitat Zitieren
#2 23. Juni 2008 AW: EM <--> PX Rechner :: JavaScript Klasse nett nett dennoch solltest du dir mal durchlesen was AJAX bedeutet =) + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren