Javascript: Anzahl Stellen einer Zahl ermitteln

function countDigits(i)  {
  return (i + "").length;
}
var x = 10;
var count = countDigits(x);
// count ist 2

Javascript: Anzahl Stellen einer Zahl ermitteln

function countDigits(i)  {
  return (i + "").length;
}
var x = 10;
var count = countDigits(x);
// count ist 2

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

TEST

Javascript im HEAD:

// Startwert des Mouseevents speichern
var startY = 0;
// Starten und Beenden des Drag-Events
var start_drag = false;
// Dragobjekt
var slider = null;

window.onload = Init;

function Init()  {
  slider = document.getElementById("slidebar");
  slider.style.position = 'absolute';
  slider.style.top = '25px';
  slider.style.left = '1px';
  
  slider.onmousedown = StartDrag;
  document.onmousemove = Drag;
  document.onmouseup = StopDrag;
  
  // Standardevents ausschalten (Firefox)
  with(document.getElementById("slidebarwrapper"))
  { 
    onmousedown = function() { return false; };
    onmousemove = function() { return false; };
  }
}
function StartDrag(e)  {
  // Browserweiche
  if(!e)
    e = window.event;
  
  // Startwert merken  
  startY = e.screenY - parseInt(slider.style.top);
  start_drag = true;
}
function Drag(e)  {
  if(start_drag)  {
    // Browserweiche
    if(!e)
      e = window.event;
      
    // Mausposition - Startwert
    var posY = e.screenY - startY;
    // Schiebebereich einschraenken    
    if(posY > 25 && posY < 70)  {
      // Position zuweisen
      slider.style.top = posY + "px";
      // Schriftgroesse aendern
      document.getElementById("testword").style.fontSize = posY - 10 + "px";
    }
  }
}
function StopDrag(e)  {
  start_drag = false;
}

CSS im HEAD:

#slidebarwrapper  {
  position: relative;
  width: 127px;
  height: 106px;
}
#testword  {
  margin: 0;
}

HTML im BODY:

<div id="slidebarwrapper">
  <img src="html.gif" width="127" height="106" alt="HTML" />
  <img src="slider.gif" width="24" height="8"
  alt="Schriftgrösse regeln" id="slidebar" />
</div>
<p id="testword">TEST</p>

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

TEST

Javascript im HEAD:

// Startwert des Mouseevents speichern
var startY = 0;
// Starten und Beenden des Drag-Events
var start_drag = false;
// Dragobjekt
var slider = null;

window.onload = Init;

function Init()  {
  slider = document.getElementById("slidebar");
  slider.style.position = 'absolute';
  slider.style.top = '25px';
  slider.style.left = '1px';
  
  slider.onmousedown = StartDrag;
  document.onmousemove = Drag;
  document.onmouseup = StopDrag;
  
  // Standardevents ausschalten (Firefox)
  with(document.getElementById("slidebarwrapper"))
  { 
    onmousedown = function() { return false; };
    onmousemove = function() { return false; };
  }
}
function StartDrag(e)  {
  // Browserweiche
  if(!e)
    e = window.event;
  
  // Startwert merken  
  startY = e.screenY - parseInt(slider.style.top);
  start_drag = true;
}
function Drag(e)  {
  if(start_drag)  {
    // Browserweiche
    if(!e)
      e = window.event;
      
    // Mausposition - Startwert
    var posY = e.screenY - startY;
    // Schiebebereich einschraenken    
    if(posY > 25 && posY < 70)  {
      // Position zuweisen
      slider.style.top = posY + "px";
      // Schriftgroesse aendern
      document.getElementById("testword").style.fontSize = posY - 10 + "px";
    }
  }
}
function StopDrag(e)  {
  start_drag = false;
}

CSS im HEAD:

#slidebarwrapper  {
  position: relative;
  width: 127px;
  height: 106px;
}
#testword  {
  margin: 0;
}

HTML im BODY:

<div id="slidebarwrapper">
  <img src="html.gif" width="127" height="106" alt="HTML" />
  <img src="slider.gif" width="24" height="8"
  alt="Schriftgrösse regeln" id="slidebar" />
</div>
<p id="testword">TEST</p>

Google Syntaxhighlighter: Falsche Darstellung

Listengrafik vor jeder Codezeile

Bei meinem Bloggertemplate kommt es zu dieser unschönen Grafik vor jeder Zeile. Durch eine zusätzliche Zeile (20) in der SyntaxHighlighter.css kann man sie entfernen:

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
 margin: 0;
 padding: 0;
 border: none;
 background-image: none !important;
}

Google Syntaxhighlighter

Google Syntaxhighlighter: Falsche Darstellung

Listengrafik vor jeder Codezeile

Bei meinem Bloggertemplate kommt es zu dieser unschönen Grafik vor jeder Zeile. Durch eine zusätzliche Zeile (20) in der SyntaxHighlighter.css kann man sie entfernen:

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
 margin: 0;
 padding: 0;
 border: none;
 background-image: none !important;
}

Google Syntaxhighlighter

<fieldset> Bug im Firefox

Nur eine Seite beim Ausdruck!

Beim Firefox ab Version 3 wird beim Druck von durch <fieldset> eingefassten Inhalten, nur die erste Seite ausgedruckt.
Wir haben deshalb das Fieldset im Contentbereich unserer Seiten (u.a. www.ufz.de) entfernen müssen, da es momentan keinen Workaround gibt.
Bugzilla@Mozilla – Bug 471015

<fieldset> Bug im Firefox

Nur eine Seite beim Ausdruck!

Beim Firefox ab Version 3 wird beim Druck von durch <fieldset> eingefassten Inhalten, nur die erste Seite ausgedruckt.
Wir haben deshalb das Fieldset im Contentbereich unserer Seiten (u.a. www.ufz.de) entfernen müssen, da es momentan keinen Workaround gibt.
Bugzilla@Mozilla – Bug 471015