div Contents per JavaScript vergrößern

paminia · 20.06.2009

Hallo, bin dabei etwas auszuprobieren. Ich will drei Div´s (siehe unten) aufstellen:

HTML:

1.<div>...</div>
2.<div>...</div>
3.<div>...</div>

Jetzt möchte ich aber mit JavaScript den 2. div nach unten vergrößern (Bsp: per onClick). Der soll dann den 3. div nach unten drücken. Also nicht überlappend. Der 3. div soll auf jeden fall noch zu sehen sein.

Hat jemand ne Idee wo ich sowas nachlesen kann?

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

Ich habe jetzt folgendes ausprobiert, allerdings vergrößert er nicht mehr. Ich glaube ich spreche den div verkehrt an, oder?

HTML:

<div id="aa" style="background-color:blue; width:600px;">&nbsp;</div>
<div id="bb" style="background-color:red;width:600px;height:400px;" align="center">
<img src="images/74-08.jpg" width="50" height="75" name="myImage"
onclick="javascript:document.getElementById('bb').height=500;"
ondblclick="javascript:document.getElementById('bb').height=300">&nbsp;</div>
<div id="cc" style="background-color:green; width:600px;">Hallo</div>

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

Habe den Fehler gefunden:

HTML:

<div id="aa" style="background-color:blue; width:600px;">&nbsp;</div>
<div id="bb" style="width:600px;height:20px;" align="center"
onclick="javascript:document.getElementById('bb').style.height= '500';"
ondblclick="javascript:document.getElementById('bb').style.height= '20';">Hallo<br>hallo<br>&nbsp;</div>
<div id="cc" style="background-color:green; width:600px;">Hallo</div>

bei mir fehlte der .style. hinter dem getelementbyid.

Jetzt funktioniert es so wie ich es wollte

cebito · 20.06.2009

AW: div Contents per JavaScript vergrößern

So würd ich das nicht machen, javascript direkt ins Ereignis zu schreiben. Da wirds schnell viel und vor allem auch unübersichtlich. Hab dir mal was geschrieben, kannst du für jeden beliebigen div benutzen, indem du beim aurufen die id und die gewünschte grösse mitgibst...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
function groesse(id,x){
document.getElementById(id).style.height= x + "px";
}
</script>
</head>

<body>
<div id="aa" style="background-color:blue; width:600px;">&nbsp;</div>
<div id="bb" style="background-color:red; width:600px; height:400px;">
<img src=[COLOR=Black]"images/74-08.jpg[COLOR=#800080][COLOR=#0000FF][/COLOR][/COLOR][/COLOR]" name="myImage" style="width:50px; height:75px;" onclick="groesse('bb',500);" ondblclick="groesse('bb',300);"/></div>
<div id="cc" style="background-color:green; width:600px;">Hallo</div>
</body>
</html>

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

Danke cebito. Bin grad dabei ne Function zu schreiben.

Wenn ich es so mache wie unten, dann ist zwischen aa und bb eine lücke auf die man klicken kann, das soll nicht sein.

Ich will auf aa klicken und bb soll sich nach unten öffnen.

HTML:

<script type="text/javascript">

function elementfaderbb() {
  document.getElementById('bb').style.height= '500'
                        }
  
function elementfaderdd() {
  document.getElementById('dd').style.height= '500'
                        }

function elementfaderff() {
  document.getElementById('ff').style.height= '500'
                        }


</script>
</head>
<body>
<div id="aa" style="background-color:yellow; width:600px;">home</div>
  <div id="bb" style="width:600px;height:20px;" align="center"
        onclick="elementfaderbb();"
        ondblclick="elementfader:document.getElementById('bb').style.height= '20';">
        &nbsp;
  </div>

<div id="cc" style="background-color:#ff99ff; width:600px;">text</div>
  <div id="dd" style="width:600px;height:20px;" align="center"
        onclick="elementfaderdd();"
        ondblclick="javascript:document.getElementById('dd').style.height= '20';">
        &nbsp;
  </div>

<div id="ee" style="background-color:#339933; width:600px;">arbeit</div>
  <div id="ff" style="width:600px;height:20px;" align="center"
        onclick="elementfaderff();"
        ondblclick="javascript:document.getElementById('ff').style.height= '20';">
        &nbsp;
  </div>

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

paminia schrieb:

Danke cebito. Bin grad dabei ne Function zu schreiben.

Wenn ich es so mache wie unten, dann ist zwischen aa und bb eine lücke auf die man klicken kann, das soll nicht sein.

Ich will auf aa klicken und bb soll sich nach unten öffnen.

HTML:

<script type="text/javascript">

function elementfaderbb() {
  document.getElementById('bb').style.height= '500'
                        }
  
function elementfaderdd() {
  document.getElementById('dd').style.height= '500'
                        }

function elementfaderff() {
  document.getElementById('ff').style.height= '500'
                        }


</script>
</head>
<body>
<div id="aa" style="background-color:yellow; width:600px;">home</div>
  <div id="bb" style="width:600px;height:20px;" align="center"
        onclick="elementfaderbb();"
        ondblclick="elementfader:document.getElementById('bb').style.height= '20';">
        &nbsp;
  </div>

<div id="cc" style="background-color:#ff99ff; width:600px;">text</div>
  <div id="dd" style="width:600px;height:20px;" align="center"
        onclick="elementfaderdd();"
        ondblclick="javascript:document.getElementById('dd').style.height= '20';">
        &nbsp;
  </div>

<div id="ee" style="background-color:#339933; width:600px;">arbeit</div>
  <div id="ff" style="width:600px;height:20px;" align="center"
        onclick="elementfaderff();"
        ondblclick="javascript:document.getElementById('ff').style.height= '20';">
        &nbsp;
  </div>

Allerdings weiß ich leider die function nicht. Traue mich so langsam ran. Ich finde darüber leider im google auch nichts. Oder ich bin blind

cebito · 20.06.2009

AW: div Contents per JavaScript vergrößern

da fehlt was:

Code:

document.getElementById(bb).style.height= '500[COLOR=Red]px';[/COLOR]

Und immer schön das Semikolon setzen.....

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

ups stimmt

danke nochmal.

cebito · 20.06.2009

AW: div Contents per JavaScript vergrößern

Wie gesagt könntest du es dir aber vereinfachen:

Code:

function elementfader(id,x) {  
document.getElementById(id).style.height=x + 'px';
}

und so aufrufen:

Code:

<div id="aa" style="background-color:yellow; width:600px;">home</div>
  <div id="bb" style="width:600px;height:20px;" align="center"
        onclick="elementfader('bb',500);"
        ondblclick="elementfader('bb',20);">
        &nbsp;
  </div>

<div id="cc" style="background-color:#ff99ff; width:600px;">text</div>
  <div id="dd" style="width:600px;height:20px;" align="center"
        onclick="elementfader('dd',500);"
        ondblclick="elementfader('dd',20);">
        &nbsp;
  </div>

<div id="ee" style="background-color:#339933; width:600px;">arbeit</div>
  <div id="ff" style="width:600px;height:20px;" align="center"
        onclick="elementfader('ff',500);"
        ondblclick="elementfader('ff',20);">
        &nbsp;
  </div>

paminia · 20.06.2009

AW: div Contents per JavaScript vergrößern

Bin auch grad dabei die Daten auszutauschen.
Juhu meine erste Function

BIn ziemlich neu im JavaScript daher so etwas Ahnungslos. Danke