Groesse von Containern aendern.

M

milchbubbi

Mitglied
hallo zusammen,

ich habe auf meiner Webseite mehrere <div>-Container. Ich moechte diese mit einer Funktion vergroessern oder verkleinern (je nachdem was gerade gebraucht wird). Die Funktion an sich ist soweit kein Problem, allerdings hat sie eine unerwuenschte Nebenwirkung. Veraendere ich die groesse von einem Container, verschieben sich die nachfolgenden Container. Hier habe ich eine kleine Seite gebaut, die das Problem zeigt:

Code: 
<html><head><title>test page</title></head>
<body>

<div id="foo" style="width:100px; height:50px;background:#000; position:relative;"></div><br>
<div id="foo" style="width:100px; height:50px;background:#f00; position:relative;"></div>

<script language="JavaScript">
function resize(id, w, h){
        var nodeToResize = document.getElementById(id);

        currentWidth = getInt(nodeToResize.style.width);
        currentHeight = getInt(nodeToResize.style.height);

        nodeToResize.style.width = currentWidth + w + 'px';
        nodeToResize.style.height = currentHeight + h + 'px';
}

function getInt(val){
        var n = parseInt(val);
        return isNaN(n) ? 0 : n;
}

resize("foo", 10, 100);
</script>

</body></html>

Eigentlich sollte der erste(schwarze) Container den zweiten(roten) zum Teil ueberdecken, nachdem die resize("foo", 10, 100) aufgerufen wurde. Aber das ist nicht der Fall, weil der zweite(rote) Container sich nach unten wegbewegt.

Wie kann ich disen Effekt unterdruecken?
Danke im Voraus fuer die Antworten.
 
Hi,

setze in den ersten Container ein weiteres DIV, das absolut positioniert ist. Jetzt änderst Du nicht
mehr die Grösse des äusseren, sondern des Inneren Elements.
Ausserdem müssen die z-Indizes so angepasst werden, dass sich die DIVs überlappen.
Weiterhin ist zu beachten, dass eine ID im Dokument eindeutig sein muss.
Code: 
<html><head><title>test page</title></head>
<body>

<div onclick="resize('foo', 10, 100);" style="width:100px; height:50px; position:relative; z-index: 2;">
  <div id="foo" style="position: absolute; z-index: 99; width: 100px; height: 50px; background: #000;"></div>
</div><br>
<div style="width:100px; height:50px;background:#f00; position:relative; z-index: 1;"></div>

<script type="text/javascript">
<!--
function resize(id, w, h){
  var nodeToResize = document.getElementById(id);

  currentWidth = getInt(nodeToResize.style.width);
  currentHeight = getInt(nodeToResize.style.height);

  nodeToResize.style.width = currentWidth + w + 'px';
  nodeToResize.style.height = currentHeight + h + 'px';
}

function getInt(val){
  var n = parseInt(val);
  return isNaN(n) ? 0 : n;
}
//-->
</script>

</body></html>
Ciao
Quaese
 
hi,

thx Quaese, klappt bestens!

Quaese hat gesagt.:
Hi,
[...]Weiterhin ist zu beachten, dass eine ID im Dokument eindeutig sein muss.
Quaese
Zum Vergrößern anklicken....
software designed by copy and paste ;)

Ich habe zu deiner Loesung noch eine Frage. Man kann mit dem DOM-Inspector von Firefox sich die Container markieren lassen. Der aeussere Container bleibt ja an der alten Stelle, und in alter Groesse. Bereit es keine Probleme, wenn weitere Container (vielleicht sogar dynamisch) zum Dokument hinzufuegt? Kann es das Design der Seite irgendwie negativ beeinflussen?

cu
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück