Seiten

Freitag, 13. November 2009

Mittwoch, 11. November 2009

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

HTML Schriftgrösse regeln

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>

Freitag, 6. November 2009

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