Javascript prüfen ob div inhalt zubreit ist.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
christian1603

christian1603 hat kostenlosen Webspace.

14:07, 11.7.2010
Hallo LC,
Ich will mit javascript prüfen ob bei einer bestimmten div overflow nötig ist wenn ja soll über der Div (in einer span) ein Text erscheinen. Ist das möglich? Wenn ja wie?
Wäre Cool wenn ihr mir Helfen könntet.
LG
Chrissi
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

17:51, 11.7.2010

ist ganz stumpf:
HTML

<div id="outer">
  <div id="inner">
    <!-- der eigentliche Inhalt -->
  </div>
</div>

CSS:

#outer { padding:0; border:0; height:HEIGHT; width:WIDTH; }
#inner { margin:0; }

JS:

var outer = document.getElementById('outer'), inner = document.getElementById('inner')
if(outer.offsetHeight < inner.offsetHeight){
  // machwas draus
  var span = document.createElement('span');
      text = document.createTextNode('foobar');
  span.appendChild(text)
  outer.parentNode.insertBefore(span, outer);
}

Ist doch ganz simpel, aber die Aussage "über" dem "div" ist sehr inkonsistent. Meinst du auf der z-Achse, oder die y-Achse, außerdem, soll das auch im Quelltext vor dem "div" auftauchen, oder danach?
Die Ausrichtng musst du mit CSS erledigen und die Quelltextposition habe ich jetzt auf vor das "div" gelegt.

Autor dieses Themas

christian1603

christian1603 hat kostenlosen Webspace.

21:56, 11.7.2010

Danke Schonmal !!!,
Der Script ist ja eigentlich logisch aber irgendwie funktioniert er bei mir nicht :-(

ich hab ihn ein KLEINES bisschen geändert.

<style type="text/css">
#outer { padding:0; border: solid blue; margin:0px; height:100px; width:100px; }
#inner { margin:0; border: solid red; }
</style>
<script>
var outer = document.getElementById('outer'), inner = document.getElementById('inner')
if(outer.offsetHeight < inner.offsetHeight){
  // Text setzen
  document.getElementById(span).innerHTML ="Oh nein!";
}
</script>
<span id="span"></span>
<div id="outer">
  <div id="inner">
    Dieser <br> Text<br> ist<br>zu<br>Hoch<br>!<br>!<br>!
  </div>
</div>

Aber es wird kein Text ausgegeben.
Wo ist der Fehler?

Edit: OH Mann XD ich muss es so machen:

<style type="text/css">
#outer { padding:0; border: solid blue; margin:0px; height:100px; width:100px; }
#inner { margin:0; border: solid red; }
</style>

<span id="span"></span>
<div id="outer">
  <div id="inner">
    Dieser <br> Text<br> ist<br>zu<br>Hoch<br>!<br>!<br>!
  </div>
</div>
<script>
var outer = document.getElementById('outer'), inner = document.getElementById('inner')
if(outer.offsetHeight < inner.offsetHeight){
  // Text setzen
  document.getElementById(span).innerHTML ="Oh nein!";
}
</script>

IS ja Logisch XD
Bis Dann
Danke Nochmal

Beitrag zuletzt geändert: 11.7.2010 23:31:59 von christian1603

cookies

cookies hat kostenlosen Webspace.
23:25, 11.7.2010
Das span muss natürlich in Anführungszeichen, also so:
```
document.getElementById("span").innerHTML ="Oh nein!";
```
LG cookies

Autor dieses Themas

christian1603

christian1603 hat kostenlosen Webspace.

0:36, 12.7.2010

ok,
Ich habe die Meldung hin bekommen wenn der text zu hoch für die div ist. Mein Problem ist wenn der Text zu breit ist überschreitet die innere div die Äußere nicht hier mein Code:

<style type="text/css">
#outer { padding:0; border: solid blue; margin:0px; height:200px; width:400px;}
#inner { margin:0; border: solid red; }
</style>

<div id="span"></div>
<div id="outer">
  <div id="inner">
  nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
  </div>
</div>

<script>

var outer = document.getElementById('outer'), inner = document.getElementById('inner')
if(outer.offsetWidth < inner.offsetWidth){
  // Text setzen
 document.getElementById("span").innerHTML = "Dieser Text ist zubreit!";
}
</script>

Wie kann man Dieses Problem lösen?
Wäre Cool wenn ihr mir nochmal Helfen Könntet!
LG
Chrissi

simuliertes

simuliertes hat kostenlosen Webspace.

22:42, 13.7.2010

christian1603 schrieb:

Wie kann man Dieses Problem lösen?
Wäre Cool wenn ihr mir nochmal Helfen Könntet!
LG
Chrissi

Meine Lösung ist das ich für das innere Element ein span-Element genommen habe und das äussere auf overflow:hidden gesetzt habe

<style type="text/css">
#outer { padding:0; border: solid blue; margin:0px; height:200px; width:400px; overflow: hidden;}
#inner { margin:0; border: solid red; padding: 0; }
</style>

<div id="span"></div>
<div id="outer">
  <span id="inner">
  nnnnnnnnnnnnnnnnnnnnnsdfhsdhsdgfsdhdfsjhdjdghsdfjhdfghkfhkcbmnfdjmlfgkfkfhkfsjdgjdgjdgooo<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  nnnnnnnnnnnnnnnnnnnnn<br>
  </span>
</div>

<script>

var outer = document.getElementById('outer'), inner = document.getElementById('inner')
document.getElementById('span').innerHTML +="<br>outer: "+outer.offsetWidth+"<br>inner: "+inner.offsetWidth;
if(outer.offsetWidth < inner.offsetWidth){
  // Text setzen
 document.getElementById("span").innerHTML += "<br>Dieser Text ist Zu breit!";
}
if(outer.offsetHeight < inner.offsetHeight){
  // Text setzen
  document.getElementById('span').innerHTML +="<br>Zu lang!";
}
</script>

vielleicht hilft Dir auch dieser Link weiter.

Beitrag zuletzt geändert: 13.7.2010 23:15:28 von simuliertes

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city