This website mostly serves to present my work as an webdesigner. In my portfolio you will find an overview of my recent projects.

Anleitung zum löschen des Cache: cachemeifyoucan.com

markuslang.com

bigr-solutions.net

musikwerker.de

projekt-misside-guinea.de

feedyourfeeds.com

 

 

Tooltip with JavaScript

Mit dem folgenden kleinen Skript lassen sich unterschiedliche Tooltips mittels JavaScript realisieren.

Die JavaScript-Funktionen zur Erzeugung der Tooltips werden über eine ausgelagerte JavaScript-Datei eingebunden.

  1. // tt = tooltip
  2. // global variables
  3. var intOffset_X_Pointer = 20;
  4. var intOffset_Y_Pointer = 20;
  5.  
  6. // elements for tooltip
  7. var aryToolTipElements = Array('a','span');
  8.  
  9. // browser?
  10. var blnIE = document.all;
  11. var blnNS = document.getElementById && !document.all;
  12.  
  13. // tt-container
  14. document.write('<div id="my_tt"></div><br />');
  15.  
  16. var show_tt = false;
  17. var obj_tt = document.getElementById("my_tt");
  18.  
  19. // get tt-elements
  20. function generateToolTips() {
  21.   for (var x = 0; x != aryToolTipElements.length; x++) {
  22.     var objElement = document.getElementsByTagName(aryToolTipElements[x]);
  23.     if (objElement) {
  24.       for (var y = 0; y != objElement.length; y++) {
  25.         if (objElement[y].className == "tt") {
  26.           objElement[y].setAttribute("tt_content", objElement[y].title);
  27.           objElement[y].removeAttribute("title");
  28.           objElement[y].onmouseover = function() {
  29.             enable_tt(this.getAttribute("tt_content"),true);
  30.           };
  31.           objElement[y].onmouseout = function() { hide_tt(false); };
  32.         }
  33.       }
  34.     }
  35.   }
  36. }
  37.  
  38. function enable_tt(tt_content, blnShow_tt) {
  39.   show_tt = blnShow_tt;
  40.   obj_tt.innerHTML = tt_content;
  41. }
  42.  
  43. function hide_tt(blnShow_tt) {
  44.   show_tt = blnShow_tt;
  45.   obj_tt.style.width = '';
  46.   obj_tt.style.left = "-5000px";
  47.   obj_tt.style.visibility = "hidden";
  48. }
  49.  
  50. function tt_position(objThis) {
  51.   if (show_tt) {
  52.     // get ViewPortheight
  53.     var intcH = document.documentElement.clientHeight;
  54.     // differentiated values for IE and NS
  55.     if (blnIE) {
  56.       intcX = event.clientX; intcY = event.clientY + document.documentElement.scrollTop;
  57.       intsLeft = document.documentElement.scrollLeft;
  58.       var intBottom = intcH - event.clientY - 20;
  59.     } else {
  60.       intcX = objThis.clientX; intcY = objThis.pageY;
  61.       var intBottom = intcH - objThis.clientY - 20;
  62.       intsLeft = 0;
  63.     }
  64.     // set tt-pos
  65.     obj_tt.style.left = intcX - intOffset_X_Pointer + "px";
  66.     if (intBottom < obj_tt.offsetHeight) {
  67.       obj_tt.style.top = intcY - obj_tt.offsetHeight - 10 + "px";
  68.     } else {
  69.       obj_tt.style.top = intcY + intOffset_Y_Pointer + "px";
  70.     }
  71.     obj_tt.style.visibility = "visible";
  72.   }
  73. }


Im Kopfbereich der HTML-Seite sind nur wenige Änderungen notwendig. Das ausgelagerte JavaScript (tooltip.js) sowie zwei Anweisungen zur initialisieren müssen eingebunden werden.

  1. <script type="text/javascript" src="tooltip.js"></script>


  1. window.onload = function() {
  2.   generateToolTips();
  3.   document.onmousemove = tt_position;
  4. }


Nun können unterschiedliche Element mit einen Tooltip versehen werden. Dafür muss dem Element die CSS-Klasse "tt" zugeordnet, sowie der Inhalt des Tooltips in das Attribut "title" geschrieben werden.

  1. <a href="http://www.knoxmic.net" class="tt"
  2.   title="<p>get this tooltip script now</p>">tooltip #1</a>


Das vorgestellte Beispiel kann wieder im Browser betrachtet oder heruntergeladen werden.

Posted in programmers-corner |Comments2 Comments »

Fun with Google Code Search

Vor wenigen Tagen hat Google ein neues Tool freigegeben. Was man in Quelltext so alles entdecken kann: http://www.google.com/codesearch?q=d'oh

Ebenso: http://www.google.com/codesearch?q=easteregg


Posted in software |CommentsNo Comments »

CSS hacks 2 go

Damit eine Website in unterschiedlichen Browsern richtig dargestellt werden kann, bedarf es nicht selten ein paar Tricks. Die folgenden selbst eingesetzten CSS-Snippets sollen eine eigene kleine Sammlung dieser Tricks darstellen:


So läßt sich zum Beispiel ein Bug bei der Implementierung einer CSS-Anweisung (voice-family) im Business Browser IE 4/5 zum verbergen von CSS-Anweisungen ausnutzen.


  1. span {
  2.   font-size:x-small;
  3.   voice-family:"\"}\"";
  4.   voice-family:inherit;
  5.   font-size:small;
  6. }

Um den IE 4/5/6 ganz vor der Tür stehen zu lassen, genügt der Gebrauch eines Kindselektors:


  1. html>body p { margin:0; }

Alle in dem Container, erste und letzte Zeile im Codebeispiel, enthaltenen Anweisungen sind für den Netscape 4 unsichtbar.


  1. /*/*/a{}
  2. body {
  3.   margin:0;
  4. }
  5. /* */

Seit nicht allzu langer Zeit, tendiere ich allerdings dazu, CSS-Anweisungen die ich für den IE korrigieren muss, über Conditional Comments darzustellen. Genau das würde ich auch allen Besuchern empfehlen, mit der weiteren Verbreitung des IE 7 sollten auch einige css hacks der Vergangenheit angehören.


  1. <!--[if IE]>
  2.   <style type="text/css" media="screen">
  3.     p {
  4.       padding:0;
  5.       margin:0;
  6.     }
  7.   </style>     
  8. <! [endif]-->

Posted in programmers-corner, webdesign |CommentsNo Comments »