Dev4Zwigge: XHTML

Posts mit dem Label XHTML werden angezeigt. Alle Posts anzeigen

Dienstag, 20. April 2010

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 2)

Hier noch eine weitere Variante, welche praktikabler bei Funktionsaufrufen ist. Auf die Größenangabe über den DIV-Selektor wurde hier verzichtet, weiterhin wird als Parent-Element der <SPAN>-Tag verwendet, was ein horizontales Aneinanderreihen der Grafiken erleichtert.
Die hier beschriebene Methode (ohne style-Attribut) ist von der Struktur her, etwas sauberer.

Beispiel


<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>      
</span>

Die CSS-Klasse svglink


.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 2)

Beispiel


<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>      
</span>

Die CSS-Klasse svglink


.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel

Mittwoch, 14. April 2010

HTML/Javascript: Framegröße an Inhalte anpassen

Das folgende Beispiel kann genutzt werden, wenn man die Framegröße automatisch an wechselnde Inhaltgrößen anpassen möchte. Ein Anwendungsfall wären die UFZ-Adventskalender, welche sich als Popup öffnen und Kalender unterschiedlicher Größe zeigen. Frames sind hier deshalb eingesetzt weil sich das Menü zum Wechseln der Kalender in einem solchen befindet (siehe Screenshots).

komplettes Beispiel

HTML/Javascript: Framegröße an Inhalte anpassen

komplettes Beispiel

Freitag, 9. April 2010

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 1)

Wer eine SVG wie im Post beschrieben einbettet, wird feststellen das man die Grafik nicht wie gewohnt verlinken kann (Beispiel 1). Auch die Verwendung eines onklick-Events führt nicht zum Erfolg (Beispiel 2).

Beispiel 1 (funktioniert nicht)


<a href="javascript:alert('Test')">
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</a>

Beispiel 2 (funktioniert nicht)


<object data="logo.svg" onlick="alert('Test')" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Abhilfe schafft hier das Schließen des Links (</a>) vor dem OBJECT-Tag und etwas CSS.

Beispiel 3 (funktioniert)


<div class="svglink" id="svg1">
  <a href="javascript:alert('Test')"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</div>

Der Parameter wmode ist hier nicht optional, sonst ist die Grafik im IE nicht anklickbar.

Die CSS-Klasse svglink


.svglink {
  position: relative;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Bei dem als Hintergrund verwendeten Bitmap, handelt es sich um eine 1 Pixel große GIF-Datei mit eingeschalteter Transparenz (sie ist auch Teil des unten angehängten Downloads).

Weitere CSS-Eigenschaften

Die Größe der Grafik sollte in em angegeben werden, um ein korrektes Skalieren zu ermöglichen. Deshalb ist hier ein weiterer DIV-Selektor notwendig, dieser korrigiert gleichzeitig das Fehlen der inherit CSS-Eigenschaft im IE6 und IE7.


/* IE7 kennt kein inherit,
daher der zusätzliche Selektor */
#svg1, #svg1 a  {  
  width: 10.4375em;  /* 167px / 16 = 10,4375em */  
  height: 4.8125em;  /*  77px / 16 =  4,8125em */ 
}

komplettes Beispiel

SVG: Im <OBJECT>-Tag anklickbar machen (Teil 1)

Beispiel 1 (funktioniert nicht)


<a href="javascript:alert('Test')">
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</a>

Beispiel 2 (funktioniert nicht)


<object data="logo.svg" onlick="alert('Test')" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Abhilfe schafft hier das Schließen des Links (</a>) vor dem OBJECT-Tag und etwas CSS.

Beispiel 3 (funktioniert)


<div class="svglink" id="svg1">
  <a href="javascript:alert('Test')"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</div>

Der Parameter wmode ist hier nicht optional, sonst ist die Grafik im IE nicht anklickbar.

Die CSS-Klasse svglink


.svglink {
  position: relative;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Bei dem als Hintergrund verwendeten Bitmap, handelt es sich um eine 1 Pixel große GIF-Datei mit eingeschalteter Transparenz (sie ist auch Teil des unten angehängten Downloads).

Weitere CSS-Eigenschaften


/* IE7 kennt kein inherit,
daher der zusätzliche Selektor */
#svg1, #svg1 a  {  
  width: 10.4375em;  /* 167px / 16 = 10,4375em */  
  height: 4.8125em;  /*  77px / 16 =  4,8125em */ 
}

komplettes Beispiel

Dienstag, 6. April 2010

SVG: Crossbrowser kompatibel & XHTML valide referenzieren

Alle Standardbrowser können mehr oder weniger mit SVG-Grafiken umgehen. Der IE, im Moment nur über das Adobe SVG-Plugin (Adobe SVG-Viewer 3.03). Ab Version 9 des IE ist hier Besserung in Sicht und damit haben SVG-Grafiken eine gute Chance, sich weiter zu verbreiten.

SVG-Grafik


<object data="logo.svg" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Der erste eingebettete param-Tag dient den IE's als Referenz auf die Datei. Der Internet Explorer kann hier keine Dateien per HTTP referenzieren!? Deshalb wird die Beispieldatei hier auch nicht angezeigt. Das sollte aber in der Praxis nicht weiter stören.
Der Parameter wmode ist optional, gleicht aber das Verhalten der SVG's im IE, an dass, der anderen Browser an.
Der eingebettete img-Tag wird benutzt wenn der Browser keine SVG anzeigen kann.

SVG: Crossbrowser kompatibel & XHTML valide referenzieren

SVG-Grafik


<object data="logo.svg" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Montag, 11. Januar 2010

Javascript: Objektorientierung und Drag and Drop (Teil 2)

Vererbung

Im zweiten Teil geht es um die Vererbung, ich habe u.a. in den Kommentaren den Begriff Klassen verwendet (natürlich gibt es in Javascript keine Klassen in dem Sinne), da ich aber versucht habe Strukturen nachzubilden, wie sie aus Java bzw. C# bekannt sind, erklärt sich das Ganze so besser.

Ob eine Verkettung der drei definierten Klassen möglich ist, gilt es noch auszutesten!

Javascript im HEAD (u.a. Objektinstanzierung):


window.onload = Init;

function Init()  {
  // neues Objekt der Subklasse instanzieren
  var dragObj = new DragById("dragable_1");
  // weiterere moegliche Instanzierung
  //var dragObj = new DragInFrame(316, 92);  
  
  // Events öffentlichen Methoden aus
  // dem instanziertem Objekt zuweisen
  document.getElementById("dragpanel").onmousedown =
    dragObj.startDrag;
  document.getElementById("dragpanel").onmousemove =
    dragObj.Drag;
  document.getElementById("dragpanel").onmouseup =
    dragObj.endDrag; 
}

Javascript im HEAD (die Basisklasse):


function DragObj()  {
  // Variable zur Rückgabe
  // von öffentlichen Methoden (Pattern)
  var that = {};
  // Objektvariablen
  this.movie       = null;
  this.startX      = 0;
  this.startY      = 0;
  this.start_drag  = false;

  // öffentliche Methoden
  that.startDrag = function(e)  {
    // Browserweiche
    if(!e)  {  // IE
      e = window.event;
      this.movie = e.srcElement;
    }
    else
      this.movie = e.target;
     
    this.startY =
      e.screenY - parseInt(this.movie.style.top);
    this.startX =
      e.screenX - parseInt(this.movie.style.left);
  
  this.start_drag = true;
  }
  
  that.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;

      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      this.movie.style.left = newX + "px";   
      this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
  
  that.endDrag = function()  {
    this.start_drag = false;
  }
    
  return that;
}

Javascript im HEAD (die Subklassen):


function DragById(objId)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.startDrag = function(e)  {
    if(document.getElementById(objId))  {
      this.movie = document.getElementById(objId);
        
      this.startY =
        e.screenY - parseInt(this.movie.style.top);
      this.startX =
        e.screenX - parseInt(this.movie.style.left);
  
      this.start_drag = true;
    }
  }    
}
// Initialisierung der Vererbung
DragById.prototype = new DragObj();

// weitere abgeleitete Klasse definieren
function DragInFrame(frameWidth, frameHeight)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;
  
      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      if(newX > 0 && newX < frameWidth)
        this.movie.style.left = newX + "px";   
      if(newY > 0 && newY < frameHeight)
        this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
}
// Initialisierung der Vererbung
DragInFrame.prototype = new DragObj();

HTML im BODY:


<img src="html.gif"
style="position:absolute; top:0; left:0;"
onmousedown="return false;"
onmousemove="return false;"
width="129" height="108" id="dragable_1" />

Javascript: Objektorientierung und Drag and Drop (Teil 2)

Vererbung

Ob eine Verkettung der drei definierten Klassen möglich ist, gilt es noch auszutesten!

Javascript im HEAD (u.a. Objektinstanzierung):


window.onload = Init;

function Init()  {
  // neues Objekt der Subklasse instanzieren
  var dragObj = new DragById("dragable_1");
  // weiterere moegliche Instanzierung
  //var dragObj = new DragInFrame(316, 92);  
  
  // Events öffentlichen Methoden aus
  // dem instanziertem Objekt zuweisen
  document.getElementById("dragpanel").onmousedown =
    dragObj.startDrag;
  document.getElementById("dragpanel").onmousemove =
    dragObj.Drag;
  document.getElementById("dragpanel").onmouseup =
    dragObj.endDrag; 
}

Javascript im HEAD (die Basisklasse):


function DragObj()  {
  // Variable zur Rückgabe
  // von öffentlichen Methoden (Pattern)
  var that = {};
  // Objektvariablen
  this.movie       = null;
  this.startX      = 0;
  this.startY      = 0;
  this.start_drag  = false;

  // öffentliche Methoden
  that.startDrag = function(e)  {
    // Browserweiche
    if(!e)  {  // IE
      e = window.event;
      this.movie = e.srcElement;
    }
    else
      this.movie = e.target;
     
    this.startY =
      e.screenY - parseInt(this.movie.style.top);
    this.startX =
      e.screenX - parseInt(this.movie.style.left);
  
  this.start_drag = true;
  }
  
  that.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;

      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      this.movie.style.left = newX + "px";   
      this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
  
  that.endDrag = function()  {
    this.start_drag = false;
  }
    
  return that;
}

Javascript im HEAD (die Subklassen):


function DragById(objId)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.startDrag = function(e)  {
    if(document.getElementById(objId))  {
      this.movie = document.getElementById(objId);
        
      this.startY =
        e.screenY - parseInt(this.movie.style.top);
      this.startX =
        e.screenX - parseInt(this.movie.style.left);
  
      this.start_drag = true;
    }
  }    
}
// Initialisierung der Vererbung
DragById.prototype = new DragObj();

// weitere abgeleitete Klasse definieren
function DragInFrame(frameWidth, frameHeight)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;
  
      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      if(newX > 0 && newX < frameWidth)
        this.movie.style.left = newX + "px";   
      if(newY > 0 && newY < frameHeight)
        this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
}
// Initialisierung der Vererbung
DragInFrame.prototype = new DragObj();

HTML im BODY:


<img src="html.gif"
style="position:absolute; top:0; left:0;"
onmousedown="return false;"
onmousemove="return false;"
width="129" height="108" id="dragable_1" />

Freitag, 8. Januar 2010

AJAX: HTML-Element für Autovervollständigung

Nachdem ich nach einigem Suchen kein stabiles Element für eine AJAX-Autocomplete Funktion gefunden habe, hier mein Mix aus einem Text- und Listenfeld.

Zum Test einfach etwas eingeben (ohne Datenanbindung).


var charCode = 0;      // Tastencode aus beiden Steuerelementen
var optText  = null;   // Textfeld
var optList  = null;   // Listenfeld
var topOpt   = false;  // Hilfsvariable zum Steuern des Uebergangs
var oldText  = "";     // Vorwert aus Textbox merken

function Init(obj)  {
  if(optList)  // Falls noch andere Liste offen
    //CloseList(false);  // IE hängt sich auf
    optList.style.display = 'none';
    
  optText = obj;
  optList = GetSelect(optText);  // SELECT-Element ermitteln
  // geerbte Breite des Eingabefeldes an SELECT-Element weitergebn
  optList.style.width = optText.offsetWidth + "px";
  // Variable charCode setzen
  document.onkeydown = GetKeyCode;
}
function OpenList()  {  
  oldText = optText.value;  // Wert für Abbruch merken

  if(charCode == 27)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     return;
  }
  if(charCode == 13)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     // Event valuefixed auslösen
     return;
  }  

  if(optText.value.length > 0)  {  // ist etwas im Textfeld
    topOpt = true;  // Pfeiltaste nach oben soll Textfeld aktivieren
     
    with(optList)  {
      // bei diesen Tasten Liste anzeigen
      if(
          charCode ==   8 ||  // Backspace
          charCode ==  40 ||  // Pfeil nach unten
          charCode ==  46 ||  // Delete
         (charCode >=  48 && charCode <= 57) ||  // 0-9
         (charCode >=  65 && charCode <= 90) ||  // a-z
          charCode == 109 ||  // - 
          charCode == 190 ||  // .
          charCode ==  59 ||  // ü
          charCode == 192 ||  // ö          
          charCode == 219 ||  // ß
          charCode == 222     // ä
        )  {
      style.display = 'block';  // Liste anzeigen
      selectedIndex = -1;       // nichts auswaehlen
    }
    }
  }
  else
    CloseList(false);  // wurde z.B. alles geloescht, Liste schliessen
  
  // Übergang zur Liste bei...  
  if(charCode == 40 &&  // ... Pfeiltaste nach unten
     optList.style.display == 'block')  {  // und Liste offen
     
    optText.value = optList.options[0].value;  // Textbox aktualisieren
    optList.focus();                // Liste aktivieren
    optList.selectedIndex = 0;      // ersten Eintrag auswählen 
  }
}
function CloseList(setOpt)  { 
  if(setOpt && (optList.options.length != optList.selectedIndex + 1))  {
    optText.value = optList.value;  // Listenwert ins Textfeld
    // Event valuefixed auslösen
  }
  else  {
    optText.value = oldText;
    oldText = null;
  }  
  optText.focus();  // Textfeld aktivieren
  optList.style.display = 'none';  // Liste ausschalten
}
function CancelSelect()  {
  optList.style.display = 'none';  // Liste ausschalten 
  optText.value = oldText;  // gemerkten Text einsetzen
  optText.focus();  // Textfeld aktivieren
}
function CtrlList()  {

  if(charCode == 13)  // Enter
     CloseList(true);
  if(charCode == 27)  // ESC
     CancelSelect();        
  if((charCode == 38 || charCode == 40) &&  // Pfeiltaste oben unten
     optList.options.length != optList.selectedIndex + 1)  // nicht letzte Option
     optText.value = optList.value; 
      
  if(charCode != 38)  // nicht Pfeiltaste nach oben
    topOpt = false;
        
  // Pfeiltaste nach oben und oberster Eintrag ausgewaehlt  
  if(charCode == 38 && optList.selectedIndex == 0)  {
    if(topOpt)  {  // beim ersten Mal noch nichts machen
      optList.style.display = 'none';  // Liste ausschalten
      optText.focus();  // Textfeld aktivieren 
    }
    else
      topOpt = true;  // um beim zweiten Pfeiltaste nach oben      
  }                   // Steuerelement zu wechseln
}
function GetKeyCode(e) {
  if (!e)
    e = window.event;
  charCode = e.keyCode;
}
function GetSelect(obj)  {
  var count = 0;
  do  {    
    var elem = obj.nextSibling;
    obj = elem;
    
    count++;
    if(count > 3) break;
  } while(elem.type != "select-one")
  
  return elem;
}
function FixValue()  {
  // TODO: Event valuefixed auslösen
  // aktives Element oder Tastencodes prüfen
}

CSS im HEAD:


input.autocomplete  {
 width: inherit;
}
input.autocomplete  {
  display: block;
}
select.autocomplete  {
  display: none;
  position: absolute;
}
#autocomplete1  {
 float: left;
 width: 200px;
}
#autocomplete2  {
   float: left;
 width: 200px;
}
.lastopt  {
  background-color: lightgray;
}

HTML im BODY:


<div id="autocomplete1">
  <input type="text" name="autocomplete2" class="autocomplete" onclick="this.focus();" onfocus="Init(this)" onkeyup="OpenList();" onblur="FixValue();" tabindex="2" />
  <select size="4" class="autocomplete" onclick="CloseList(true);" onkeyup="CtrlList();">
    <option value="Peter">Peter</option>
    <option value="Peters">Peters</option>
    <option value="Petersen">Petersen</option>
    <option value="Petersohn">Petersohn</option>
    <option class="lastopt" title="Schließen">⇑</option>
  </select>
</div>

komplettes Beispiel

AJAX: HTML-Element für Autovervollständigung

Nachdem ich nach einigem Suchen kein stabiles Element für eine AJAX-Autocomplete Funktion gefunden habe, hier mein Mix aus einem Text- und Listenfeld.

Zum Test einfach etwas eingeben (ohne Datenanbindung).


var charCode = 0;      // Tastencode aus beiden Steuerelementen
var optText  = null;   // Textfeld
var optList  = null;   // Listenfeld
var topOpt   = false;  // Hilfsvariable zum Steuern des Uebergangs
var oldText  = "";     // Vorwert aus Textbox merken

function Init(obj)  {
  if(optList)  // Falls noch andere Liste offen
    //CloseList(false);  // IE hängt sich auf
    optList.style.display = 'none';
    
  optText = obj;
  optList = GetSelect(optText);  // SELECT-Element ermitteln
  // geerbte Breite des Eingabefeldes an SELECT-Element weitergebn
  optList.style.width = optText.offsetWidth + "px";
  // Variable charCode setzen
  document.onkeydown = GetKeyCode;
}
function OpenList()  {  
  oldText = optText.value;  // Wert für Abbruch merken

  if(charCode == 27)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     return;
  }
  if(charCode == 13)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     // Event valuefixed auslösen
     return;
  }  

  if(optText.value.length > 0)  {  // ist etwas im Textfeld
    topOpt = true;  // Pfeiltaste nach oben soll Textfeld aktivieren
     
    with(optList)  {
      // bei diesen Tasten Liste anzeigen
      if(
          charCode ==   8 ||  // Backspace
          charCode ==  40 ||  // Pfeil nach unten
          charCode ==  46 ||  // Delete
         (charCode >=  48 && charCode <= 57) ||  // 0-9
         (charCode >=  65 && charCode <= 90) ||  // a-z
          charCode == 109 ||  // - 
          charCode == 190 ||  // .
          charCode ==  59 ||  // ü
          charCode == 192 ||  // ö          
          charCode == 219 ||  // ß
          charCode == 222     // ä
        )  {
      style.display = 'block';  // Liste anzeigen
      selectedIndex = -1;       // nichts auswaehlen
    }
    }
  }
  else
    CloseList(false);  // wurde z.B. alles geloescht, Liste schliessen
  
  // Übergang zur Liste bei...  
  if(charCode == 40 &&  // ... Pfeiltaste nach unten
     optList.style.display == 'block')  {  // und Liste offen
     
    optText.value = optList.options[0].value;  // Textbox aktualisieren
    optList.focus();                // Liste aktivieren
    optList.selectedIndex = 0;      // ersten Eintrag auswählen 
  }
}
function CloseList(setOpt)  { 
  if(setOpt && (optList.options.length != optList.selectedIndex + 1))  {
    optText.value = optList.value;  // Listenwert ins Textfeld
    // Event valuefixed auslösen
  }
  else  {
    optText.value = oldText;
    oldText = null;
  }  
  optText.focus();  // Textfeld aktivieren
  optList.style.display = 'none';  // Liste ausschalten
}
function CancelSelect()  {
  optList.style.display = 'none';  // Liste ausschalten 
  optText.value = oldText;  // gemerkten Text einsetzen
  optText.focus();  // Textfeld aktivieren
}
function CtrlList()  {

  if(charCode == 13)  // Enter
     CloseList(true);
  if(charCode == 27)  // ESC
     CancelSelect();        
  if((charCode == 38 || charCode == 40) &&  // Pfeiltaste oben unten
     optList.options.length != optList.selectedIndex + 1)  // nicht letzte Option
     optText.value = optList.value; 
      
  if(charCode != 38)  // nicht Pfeiltaste nach oben
    topOpt = false;
        
  // Pfeiltaste nach oben und oberster Eintrag ausgewaehlt  
  if(charCode == 38 && optList.selectedIndex == 0)  {
    if(topOpt)  {  // beim ersten Mal noch nichts machen
      optList.style.display = 'none';  // Liste ausschalten
      optText.focus();  // Textfeld aktivieren 
    }
    else
      topOpt = true;  // um beim zweiten Pfeiltaste nach oben      
  }                   // Steuerelement zu wechseln
}
function GetKeyCode(e) {
  if (!e)
    e = window.event;
  charCode = e.keyCode;
}
function GetSelect(obj)  {
  var count = 0;
  do  {    
    var elem = obj.nextSibling;
    obj = elem;
    
    count++;
    if(count > 3) break;
  } while(elem.type != "select-one")
  
  return elem;
}
function FixValue()  {
  // TODO: Event valuefixed auslösen
  // aktives Element oder Tastencodes prüfen
}

CSS im HEAD:


input.autocomplete  {
 width: inherit;
}
input.autocomplete  {
  display: block;
}
select.autocomplete  {
  display: none;
  position: absolute;
}
#autocomplete1  {
 float: left;
 width: 200px;
}
#autocomplete2  {
   float: left;
 width: 200px;
}
.lastopt  {
  background-color: lightgray;
}

HTML im BODY:


<div id="autocomplete1">
  <input type="text" name="autocomplete2" class="autocomplete" onclick="this.focus();" onfocus="Init(this)" onkeyup="OpenList();" onblur="FixValue();" tabindex="2" />
  <select size="4" class="autocomplete" onclick="CloseList(true);" onkeyup="CtrlList();">
    <option value="Peter">Peter</option>
    <option value="Peters">Peters</option>
    <option value="Petersen">Petersen</option>
    <option value="Petersohn">Petersohn</option>
    <option class="lastopt" title="Schließen">⇑</option>
  </select>
</div>

komplettes Beispiel

Mittwoch, 11. November 2009

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>

Freitag, 6. November 2009

<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