Gernot Back: + (Javascript): Eltern erben von den Kindern

SELF-Forum

+ (Javascript): Eltern erben von den Kindern

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo an alle,

Habe gerade etwas gebastelt, das ich euch nicht vorenthalten will:

Bei Content-Management-Systemen ist es ja sehr praktisch, wenn dem vom HTML-Code völlig unbeleckten Redakteur irgendwie angezeigt wird, welches HTML-Element er da gerade bearbeitet. Meine für die Einrichtung entsprechender Systeme zuständigen Kollegen machen das meist so, dass sie das zu bearbeitende Element im Redaktionsmodus mit einem weiteren (DIV-)Element umgeben, dem sie dann eine gestrichelte rote Linie verpassen.

Bei floatenden Elementen hat das aber wenig Effekt, es sei denn, man lässt das umgebende Border-Element ebenfalls floaten und/oder setzt es auf "overflow:hidden".

Die zusätzliche Border drumherum kann dann aber bewirken, dass der Platz nicht mehr ausreicht und der arme Redakteur unnötig in Panik versetzt wird, weil er im Redaktionsmodus den Eindruck gewinnt, sein floatender Inhalt bräche gottweißwohin um, wo er nicht hingehört.

Um das zu vermeiden, neigen CMS-Kollegen dann auch schnell mal dazu, wieder auf das gute alte Tabellenlayout umzusteigen, bei dem so etwas nicht passieren kann.

Ich habe nun eine Lösung gefunden, die es erlaubt, auch floatende Elemente mit einem weiteren Markierungselement zu umgeben, ohne dass das zu unschönen Umbrüchen führt.

Wichtig ist dabei, dass Eltern über die Besitztümer (insbesondere die Float-Property) ihrer Kinder Bescheid wissen und diese notfalls, wie im richtigen Leben, auch mal übernehmen können.

Meine Lösung funktioniert zwar nur im IE und bei aktiviertem JS, aber das setzen viele CMS-Systeme ja ohnehin beides voraus. Ob sich das Dokument dabei im Quirksmode befindet oder in einem CSS-kompatiblen Modus, sollte unerheblich sein.

Gruß Gernot

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Elementmarker</title>  
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">  
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">  
  
<style type="text/css">[code lang=css]  
  
  
* { display:expression([code lang="javascript](this.currentStyle.styleFloat!='none') ? 'inline' : ''
~~~) !important; } /\* beugt im IE dem [Doubled-Margin-Bug](http://www.positioniseverything.net/explorer/doubled-margin.html) vor, falls mal vergessen wurde, zu float:left oder float:right auch display:inline zu setzen \*/  
  
#MeinElement {  
 background-color:pink;  
 float:left;  
 margin:2px 1px 2px 5px;  
 padding:2px;  
 width:100px;  
 height:30px;  
}  
  
.nochEinElement {  
 background-color:lightgreen;  
 float:left;  
 margin:2px 1px 2px 5px;  
 padding:2px;  
 width:100px;  
 height:30px;  
}  
  
.marker {  
 position:relative;  
 border:  dashed 1px red;  
 margin:  expression(`((document.compatMode=='BackCompat') ? '-1px 0' : '-1px'`{:.language-"javascript});  
 float:   expression(`(this.firstChild.currentStyle.styleFloat`{:.language-"javascript});  
 width:   expression(~~~"javascript
(parseInt(this.firstChild.offsetWidth) +  
                      parseInt(this.firstChild.currentStyle.marginRight) +  
                      parseInt(this.firstChild.currentStyle.marginLeft
~~~) );  
 overflow:hidden;  
}  
[/code]  
</style>  
  
</head>  
<body>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
  
  
<div class="marker">  
   <div id="MeinElement">Mein Element</div>  
</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
<div class="nochEinElement">Noch'n Element</div>  
</body>  
</html>  
[/code]
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. + (Javascript): Eltern erben von den Kindern

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Meine Lösung funktioniert zwar nur im IE und bei aktiviertem JS, aber das setzen viele CMS-Systeme ja ohnehin beides voraus.

    das stimmt zwar, aber Du übersiehst völlig, dass die generierten HTML-Seiten i.d.R. für ein breiteres Publikum gedacht sind.

    freundliche Grüße
    Ingo

    --
    [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. + (Javascript): Eltern erben von den Kindern

      Gernot Back Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Ingo,

      Meine Lösung funktioniert zwar nur im IE und bei aktiviertem JS, aber das setzen viele CMS-Systeme ja ohnehin beides voraus.
      das stimmt zwar, aber Du übersiehst völlig, dass die generierten HTML-Seiten i.d.R. für ein breiteres Publikum gedacht sind.

      Dem breiteren Publikum soll niemals der Redaktionsmodus angezeigt werden, von dem allein ich hier spreche.

      Die generierten HTML-Seiten und der Endverbraucher sind davon nicht betroffen.

      Gruß Gernot

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. + (Javascript): Eltern erben von den Kindern

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo nochmal,

      
  

>  float:   expression([code lang="javascript](this.firstChild.currentStyle.styleFloat

~~~);  

>  width:   expression(~~~"javascript

(parseInt(this.firstChild.offsetWidth) +  

>                       parseInt(this.firstChild.currentStyle.marginRight) +  
>                       parseInt(this.firstChild.currentStyle.marginLeft

~~~) );  
[/code]  
  
Ich sehe gerade; im ersten Fall von offsetWidth ist das parseInt natürlich vollkommen überflüssig.  
  
Ich hatte zuerst mit this.firstChild.currentStyle.width experimentiert, da war das stehen geblieben.  
  
In den beiden letzteren Fällen heißt parseInt() natürlich, dass das Skript nur unter der Voraussetzung funktioniert, dass der Margin-Left bzw. ~Right in Pixelmaßen definiert wurde.  
  
Gruß Gernot
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln