JS: show/hide nur wenn Inhalt nicht leer

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

Autor dieses Themas

12:59, 16.10.2013

Hallo
ich habe eine kleine JS Funktion welche ein DIV ein-/ aus- belnden soll. (show / hide)

function show_inhalt() { 
	var block = document.getElementById('mehr_inhalt'); 
	if (block.style.display == 'none') { 
	   block.style.display = 'block';
	} else { 
	   block.style.display = 'none'; 
	}
}

Aufruf über LInk:

<a href="javascript:onClick=show_inhalt();">Show / Hide</a>

irgendwo im HTML steht dann das DIV welches ein / aus geblendet werden soll

<div id="mehr_inhalt"></div>

der Inhalt in diesem DIV wird auch dynamisch (je nach Anbfrage / Aufruf) erzeugt,
kann aber auch mal leer sein, also gar kein dynamisch erzeugten Inhalt bekommen.

Wenn jetzt der Inhalt "leer" ist und ich das DIV ein-blende,
dann wird ein leerer Block angezeigt, weil das DIV per CSS padding und background hat.

#mehr_inhalt { 
  display:none; 
  position:absolute; 
  width:446px;
  margin:8px 8px; 
  padding:8px; 
  background-color: #EEEEEE; 
  text-align:left; 
  border: 1px solid #000000;			
}

Wie bekomme ich es hin, dass das DIV nur dann sichtbar wird,
wenn es auch einen Inhalt hat, also wenn "leer" dann nicht einblenden ?

hier mal mein kompletter Test Quellcode:

<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/javascript">

function show_inhalt() { 
	var block = document.getElementById('mehr_inhalt');  
	if (block.style.display == 'none' || block.style.display == '') { 
		block.style.display = 'block';
	} else { 
		block.style.display = 'none'; 
	}
}

</script>

<?php
// ------------------------------------------------------ 

if (!empty($_GET['action'])) { 
	    if ($_GET['action'] == '1') { $dyn_inhalt = '<p> Test:1 blabla1 <strong>Nr.1</strong> ... lalala1 </p>'; } 
	elseif ($_GET['action'] == '2') { $dyn_inhalt = ''; }  // ----- kein Inhalt / Leer ----- 
	elseif ($_GET['action'] == '3') { $dyn_inhalt = '<p> Test:3 blabla3 <strong>Nr.3</strong> ... lalala3 </p>'; } 
	  else { $dyn_inhalt = '<p> Keine Ahnung was Du willst ... </p>'; } 
}
else { 
	$dyn_inhalt = '... nitte eine Aktion ausw&auml;hlen ...';  // ----- kein Inhalt / Leer ----- 
} 

// ------------------------------------------------------ 
?>


<style type="text/css">

.blockinfo { 
  width:500px;
  margin:8px auto; 
  padding:8px; 
  text-align:left; 
  border: 1px solid #000000;
}

#mehr_inhalt { 
  display:none; 
  background-color: #EEEEEE; 		
}

#test_debug { 
  display:block; 
  background-color: #FFFFCC; 		
}

</style>


</head>

<body bgcolor="#FFFFFF" text="#000000">


<div align="center">

<h1>TEST</h1>

<p> 
 ... <a href="?action=">Home</a> 
 ... <a href="?action=1">Test1</a> 
 ... <a href="?action=2">Test2</a> 
 ... <a href="?action=3">Test3</a> 
</p>

<p>Mehr Inhalt ... <a href="javascript:onClick=show_inhalt();">Show / Hide</a> ... </p>

<br>
<br>

<div id="mehr_inhalt" class="blockinfo"><?php print $dyn_inhalt; ?></div>

<br>
<br>

<div id="test_debug" class="blockinfo"><?php print $dyn_inhalt; ?></div>

<br>
<br>

</div>

</body>
</html>

bei Klick auf Link mit href="?action=2" bleibt der dynamische Inhalt komplett leer,
---> wenn das vorkommt, soll der "mehr_inhalt" Block nicht eingeblendet werden

PS: der dynamische Inhalt wird nicht immer mit PHP erstellt, sondern auch mit JS,
daher kann ich es nicht über eine PHP-Abfrage if (!empty($dyn_inhalt)) machen.
weil das ja nur funktioniert, wenn der dynamische Inhalt in PHP erstellt wurde.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

~~m******e~~

15:15, 16.10.2013

function show_inhalt() {
    var block = document.getElementById('mehr_inhalt'),
    bla = block.firstChild.nodeValue;
    if (bla != ''){
    if (block.style.display == 'none' || block.style.display == '') {
        block.style.display = 'block';
    } else {
        block.style.display = 'none';
    }
  }
}

> Beispiel <

Oder auch ohne extra Variable

function show_inhalt() {
    var block = document.getElementById('mehr_inhalt');
    if (block.firstChild.nodeValue != ''){
    if (block.style.display == 'none' || block.style.display == '') {
        block.style.display = 'block';
    } else {
        block.style.display = 'none';
    }
  }
}

Beitrag zuletzt geändert: 16.10.2013 16:03:43 von menschle

Autor dieses Themas
smartweb

smartweb hat kostenlosen Webspace.
16:56, 16.10.2013
super Danke

das firstChild.nodeValue bezieht sich doch auf HTML-Elemet

wenn ich aber im dynamischen inhalt kein HTML mache, sondern nur reinen Text
funktioniert dann .firstChild.nodeValue auch, oder nehme ich dann besser .innerHTML

also für z.B.
```
if ($_GET['action'] == '1') { $dyn_inhalt = 'Einfacher Text ohne HTML'; }
```
PS: gibt es in JavaScript auch sowas wie trim() von PHP ?
(Umbrüche und Leerzeichen am Anfang und Ende entfernen)
~~m******e~~

17:05, 16.10.2013

smartweb schrieb:
das firstChild.nodeValue bezieht sich doch auf HTML-Elemet

wenn ich aber im dynamischen inhalt kein HTML mache, sondern nur reinen Text
funktioniert dann .firstChild.nodeValue auch, oder nehme ich dann besser .innerHTML
http://www.peterkropff.de/site/javascript/textknoten.htm
oder noch mehr
https://www.google.de/#q=javascript+inhalt+eines+divs+auslesen
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