Archiv der Kategorie: Webentwicklung und Webdesign

Dieser Blog dient hauptsächlich für mich zum Lösen von immer wiederkehrenden, oft schwer lösbaren Webentwickler Problemen.

Outline (gestrichelte Linien) für Links und Mousebedienung abstellen, aber mit der Tab Taste trotzdem Sichtbar lassen.

Wer genaueres wissen will, kann sich hier erkundigen: http://www.tomislav.net/gestrichelte-linie-um-link-verstecken.htm

Nach längerem Überlegen bin ich zum Entschluss gekommen, dass man nur den Focus eines Links während onmousedown mit this.blur() verbieten müsste und beim verlassen des Links mit onmouseup, oder auch onmouseout wieder zu erlauben. Damit wäre die Outline per Mousebedienung unsichtbar, jedoch wenn man die Tastatur benutzt – also die Tab Taste, wieder ganz normal einsatzbereit und sichtbar. Hier der Core des Codes am besten nach onDocumentReady oder nach window.onload (biite nicht in body Tag ein onLoad rein, weil es sich zumindetens im IE nur schwer kontrollieren lässt, falls man die onLoad Anweisung aus dem Body Tag mit übernehmen will. Vielleicht hat da jemand eine Idee.

Sagen wir mal init ist die Funktion, die nach Laden der Site gestartet wird, dann sollte diese Init zumindestens so aussehen, wenn man sonst nix vor hat.

function init()
{
   var a=document.getElementsByTagName('a');

   for (var i=0;i<a.length;i++) {
      a[i].onmousedown = function()
      {
         this.onfocus = function()
         {
            this.blur();
         }
      }
      a[i].onmouseup = function()
      {
         this.onfocus = function(){}
      }
      a[i].onmouseout = a[i].onmouseup;
   }
}

Ich bin ganz stolz auf diese doch so einfache aber dennoch so wichtige Funktion, da die sogar von alice.dsl.de übernommen wurde (ist mittlerweile nciht mehr drin, da relauncht wurde) und meine Seite dort im Quellcode als Referenz stand…..

Rekursiv durch die Ordner Landschaft

Rekursiv ist immer ein Thema, dass ich versucht hatte zu umgehen und dann war ich froh, dass in PHP 5 Klassen hinzugekommen sind, die die Iteration und die Rekusrsive Iteration für mich übernehmen. Also kein Kopfzerbrechen mehr über Rekusrsive Funktionen, die die Arrays durchwandern.

Ein Fall:

zB habe ich ein Web zu portieren und muss dabei feststellen, dass Dateien vom PHP geschrieben wurden, die ich (da kein Root) nicht runterziehen kann, da ich der Gruppe nciht angehöre, die der Apache angehört und schon habe ich ein Problem.  Weder darf ich die Dateien runterladen per FTP, noch kann ich ein chmod auf diese anwenden.  Denn das darf nur einer aus der Gruppe. Also schreibe ich eine Rekursive Funktion, die mir alle Dateien vorerst auf 0777 setzt, damit ich die wenigstens runterladen kann.

Früher war das, wenn man es selbst machen wollte eine Last. Dank der heutigen Iterationsklassen, iteriert man alle Dateien und Ordner einfach durch – auch rekursiv – und schon kann man mit einem Aufruf alle Dateien und Ordner ab Punkt x auf 0777 setzen und diese dann per FTP runter laden.

Hier der Code:

<?php
$_GET[‚path‘] = !empty($_GET[‚path‘]) ? ($_SERVER[‚DOCUMENT_ROOT‘] . urldecode($_GET[‚path‘])) : $_SERVER[‚DOCUMENT_ROOT‘];
$pathname = $_GET[‚path‘];
$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($pathname), RecursiveIteratorIterator::SELF_FIRST);
//echo $pathname . ‚<br />‘;//Debuggen
chmod ($pathname , 0777);
foreach($iterator as $item) {
chmod ($item , 0777);
//echo $item . ‚<br />‘;//Debuggen
}

Wenn man diesen code als chmod.php im DOCUMENT_ROOT Verzeichnis abspeichert, werden alle dateien, die sich im Webspace befinden nach dem Aufruf die angegeben Rechte haben.

Wenn man jedoch einen Get Parameter Übergibt, in diesem Falle „path“, dann kann man bestimmen welchen Ordner samit Inhalt man rechtlich ändern will.

Beispiel:  www.meine-seite.de/chmod.php    // Hier werden alle Dateien im Webspace betroffen sein.

Beispiel www.meine-seite.de/chmod.php?path=/images  // Hier wird der Ordner „images“ im DOCUMENT_ROOT samt dadrin enthaltener Dateien und Ordner geändert.

Man könnte in diesem Script natürlich noch die Rechte als GET  Parameter einbauen und im falle der Übergab das Übergebene setzen, ansonsten einen Default Wert zB 0777 wählen.

Für die Rechte muss immer eine oktal Zahl eingegeben werden, da ansonsten die Werte sehr wahrscheinlich nicht dem entsprechen würden, was man sich erhofft zu erzielen.

Es sei denn, man weiß genau,  was man da macht.

Ich hoffe,  jemanden damit geholfen zu haben..

Tom

Rollover Backgroundbild ohne Ruckeln auch im IE6 ohne JavaScript

Es geht um ein Hoverbild, ein BG-Bild, das dann beim Hover das Motiv ändern soll, meinetwegen von Schwarzweißmotiv auf ein Farbmotiv.
Eigentlich ist es ganz einfach per CSS zu lösen;  man nimmt ein background Bild mit beiden Motiven untereinander und macht einen block
Container drum herum, der natürlich ein a-Tag sein muss, weil der IE6 nichts anderes per :hover ansprechen lässt, der genau die Höhe eines
Motives hat (wie gesagt: im Bild sind beide Motive übereinander in einem Bild drin, also auch doppelt so hoch) dann bestimmt man per css,
dass das BG Bild des Block Elements um die hälfte nach oben per background-position left -100px gezogen wird.

Also – wenn das Motiv 100px  hoch ist, wäre das gesamte Rolloverbild 200px hoch, das nähme man als Bg-Bild vom Block Element(in unserem Fall wäre es dann das a-Tag mit display:block  und verpasst ihm eine „BG-Position:left -100px;“    .. Leider Ruckelt aber bei dieser Methode im IE6 das Bild dennoch, weil es trotzdem nachgeladen wird, sobald man es „anfässt“. Um das „Anfassen“ des Bildes zu umgehen und auch den IE6 zufrieden zu stellen, muss man um den A-Tag einen Div, oder einen anderen Block Container bauen, der genau die gleichen Maße hat, wie das Motiv (also 100px hoch – halb so hoch, wie das eingebettete Bild, das beide Motive beinhaltet und uns so das Preloaden erspart).
Das A-Tag wiederrum bekommt wieder einen display:block verpasst, nun jedoch 200px hoch. Wenn man nun das BG-Bild
des a-Tags belassen würde, würde man es indirekt ja doch anfassen, wenn man on :hover den a-Tag mit einem margin-top:-100px versieht,
denn bewegt man den a-Tag und bewegt damit auch sein direktes style Attribut… Verabschieden wir uns also vom Gedanken des
BG-Bildes und platzieren das selbe Bild innerhalb des A-Tags mit dem style position:absolute; left:0;top:0 und verpassen dem a-Tag
ein Position:relative; nun bewegt man das A-Tag wie schon vorher angedacht on :hover um 100px nach oben per margin-top:-100px;
Da das Bild nicht mehr ein Attribut des A-Tags ist, weil es kein BG-Bild vom a-tagt mehr ist, „fühlt“ es sich auch nicht mehr angefasst
und das Bild wird nicht nachgeladen und es ruckelt auch nicht mehr. (dieses Problem hat aber auch nur der IE6, sogar bei caching On)
nicht einmal  seine Vorgänger hatten Probleme damit. Nun kann man den Link beliebig befüllen, da das Bild als absolut positionierter
Layer inne wohnt und die anderen Nodes nicht in der Position beeinträchtigt
(und das auch nur, wenn das Bild im a-Tag als letzter Tag platziert wird.)
Wenn man ganz sicher gehen will, packt man den restlichen (oberen) Inhalt auch in einen absoluten Layer und verpasst
diesem einen höheren z-index.

Fertig und überall ruckelfrei und absolut Javascript frei. im IE4 habe ich es nicht getestet, aber im IE5 funktioniert es noch wunderbar.

Download Beispiel (RAR)

Zentrierte Seiten müssen nicht Ruckeln

Es ist oft der Fall, dass man eine zentrierte Seite hat, die dann anfängt zu ruckeln, sobald der rechte Scroller erscheint, bzw verschwindet. Nur der IE ist so gebaut,  dass er den vertikalen Scroller bei nicht Bedarf ausgegraut lässt.

Eine Valide Lösung ist es im CSS den html Tag mit einer Höhe von 100% und einem padding-bottom von 1px zu stylen, so dass der scroller immer für einen Pixel Scrollen zur Verfügung steht, egal wie hoch der Content ist. Dem Firefox 2 konnte man noch sagen, dass der PaddingBottom nur 0.1px hoch ist, so dass da nix zu scrollen war. Seit FF3 hat sich das auch erledigt, wird gepflegt ignoriert.

Es gibt jedoch eine nicht so valide Lösung, obwohl es alle Browser verstehen und ich auch nicht begreife, warum es (noch) nicht Valide ist:
einfach statt padding-bottom: 1px;  ein overflow-y: scroll; einsetzen und schon hat man den Vertikalen scroller immer zur Verfügung.

Valide Lösung:

html{
height: 100%;
padding-bottom: 1px;
}

Nicht Valide Lösung, jedoch, viel schöner, da auch ausgegraut, wie beim IE:

html{
overflow-y: scroll;
}

Voilá

Euer Tomislav

Doppelter Margin, beim Floaten im IE, wie ich stylen muss !

Jeder kent das: Man floatet div-Tags, verpasst denen einen Margin und zack! Ist der Margin doppelt so breit.
Man habe ich schon Weichen gebaut und mich geärgert.
Es geht darum: alles was gefloatet wird, wird automatisch zum Block Element. Soweit so gut. Das macht der IE6
auch noch ganz prima.

Verpasst man einem gefloatetem block Element einen Margin, ist er auf einmal doppelt so breit…. jeder, der das schon
erleben durfte war bestimmt am Rande der Verzweflung, weil das CSS nur noch aus CSS Weichen für den IE bestand.

Dabei ist die Erklärung ganz einfach: Jedes gefloatete Element bekommt einen display:block verpasst.
Also wird es intern im IE wohl so ablaufen, dass der div Tag, der einen Margin hat und den ja als
Block Element auch haben darf, sobald dieser dann auch noch gefloatet wird, er nochmal einen display:block
verpasst bekommt und somit wohl der margin nochmal gerechnet wird.
Also fehlt da wohl im IE irgendwo eine Abfrage, ob der Margin dieses Block Elements nicht evtl schon berechnet wurde
Auch wenn nun durch das floaten des Elementes das Element ein Block Element wird.  Dem IE ist es wohl an der stelle egal,

ob es vorher schon ein Block war und / oder ob schon der Margin dieses Elements berechnet wurde, es wird einfach
nochmal berechnet….  sehr spendabel…. 😉

Die Lösung? Gaanz einfach: verpasse jedem gefloatetem Element ein display:inline, es wird eh zu einem Block Element durch
das floaten und das in jedem Browser.

Das stört keinen Browser, aber die doppelten Margin Werte werden im IE wieder einfach und normal !!!

Dafür muss man im IE das gefloatete nicht clearen, DAS passiert im IE automatisch 🙂
Das widerrum könnten sich die anderen mal abschauen, denn das gecleare nervt…
🙂

Hurraa!!!