Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

buyas · 25.03.2012

guten sonntag

!
ich habe leider folgendes problem.
ich möchte durch einen link, der sich in div 2 befindet, das div 1 einblenden lassen und über nen link, der sich in div 1 befindet zum einen div 1 ausblenden lassen und das video, dass sich in div 2 befindet resetten.
der link in div 1 mit den 2 aktionen funktioniert einwandfrei allerdings funktioniert der link in div 2, der div 1 anzeigen soll, wenn versteckt, leider nicht.
sieht vllt jemand, was ich da falsch mache ?

hier der code:

javascript

Code:

function resetVideo(divId) {
  if (typeof(divId)=="string") { divId=document.getElementById(divId); }
  if (divId.innerHTML) {
    org=divId.innerHTML;
    divId.innerHTML='';
    divId.innerHTML=org;
  }
  return false;
}
function show(divId) {
      if (document.getElementById(divId).style.display !="none") {
        document.getElementById(divId).style.display = "block";
    }
}
function hide(divId) { 
       if (document.getElementById(divId).style.display != "block") { 
         document.getElementById(divId).style.display = "none"; 
      } 
   }

im css - teil habe ich display auf none gesetzt ..achso dass die function hide und resetvideo funktionieren, habe ich festgestellt, indem ich testweise display auf block gesetzt hatte im css ..

im html dann so:

Code:

<div id="div1">
<a href="#" title="" onclick="resetVideo('div2');hide('div1');">hide</a>
<!--div1--></div>

<div id="div2">
<a href="#" title="" onclick="show('div1');">show<object type="application/x-shockwave-flash" class="screenzoom" width="78" height="74">
<param name="movie" value="http://www...">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="sameDomain"></param>
<param name="wmode" value="opaque" />
<param name="scale" value="exactfit" />
<embed src="http://www.youtube.com..." type="application/x-shockwave-flash" width="78" height="74" allowscriptaccess="sameDomain" wmode="opaque" allowfullscreen="true"></embed></object></a>
<!--div2--></div>

ich find leider nich raus woran es liegt, sitz wahrscheinl schon zu lang dran :s ...
wäre sehr dankbar, falls mir jemand helfen könnte !!

pitTti · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

Wie wärs mit style.visibility="hidden"?

Bei dir setzt du ja nur den display style auf none oder block, was nichts mit der Sichtbarkeit des Divs zu tun hat.

In der CSS am besten den Wert visibility hinzufügen und für den oder die Divs die erstmal nicht angezeigt werden sollen auf hidden setzen, den Rest dann wie du es schon richtig falsch getan hast, per OnClick Funktion auf visible ändern.

Code:

function show(divid){
   document.getElementById(divid).style.visibility="visible";
}

function hide(boxid){
   document.getElementById(divid).style.visibility="hidden";
}

cebito · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

pitTti schrieb:
Bei dir setzt du ja nur den display style auf none oder block, was nichts mit der Sichtbarkeit des Divs zu tun hat.

Schmarrn, der Unterschied von display:none; und visibility:hidden; ist nur der, während bei display:none; der div den Platz frei macht, beansprucht bei visibility:hidden; der div weiterhin seinen Platz. Unsichtbar sind sie aber beide.

@TE - mit "!=" schaust du, ob etwas ungleich ist, du willst aber wissen, ob es gleich ist

http://de.selfhtml.org/javascript/sprache/operatoren.htm#vergleich

pitTti · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

Stimmt, hast recht. Aber meine Methode funktioniert.

cebito · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

pitTti schrieb:
Stimmt, hast recht. Aber meine Methode funktioniert.

Glaub ich nicht, zumindest nicht das hidden

buyas · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

aaaaahhh es funktioniert

!!! vielen dank pitTti !!! aber woran liegt es ? mit display:none/block hats ja mit der hide function funktioniert nur show halt nicht .. versteh die kausalität nicht .. könntest du mir das erläutern, würd es gern verstehen ! vielen dank für deine hilfe !

buyas · 25.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

danke für den hinweis cebito, werd mir das auch gleich nochmal anschauen .. macht es folglich einen unterschied bei der performance was display und visibility angeht ?
by the way pitTty tip funktioniert tatsächlich.

mindraper · 30.03.2012

AW: Javascript: divs anzeigen / ausblenden funktioniert leider nur teilweise

i'm back

schon älter, aber ich geb' hier dennoch mal meinen senf ab, um die letzte frage vom TE zu beantworten.

@buyas:
nein. es macht performanceseitig überhaupt keinen unterschied, ob du ein element auf display:hidden; oder visibility:hidden; setzt. oder der unterschied ist so signifikant gering, dass das menschliche auge ihn unmöglich wahrnehmen würde.

die zwei functions von pitTi funktionieren, weil deine abfrage am beginn deiner show() und hide() functions fehlerhaft war/ist und pitTi diese abfrage einfach nicht in seine variante übernommen hat.
wie cebito schon gesagt hat, bedeutet ein vergleich mit != oder !== soviel wie "ist nicht gleich" ( in diesem fall wäre die zweite variante strenger als die erste ).
das soll heissen, dass du beispielsweise in deiner show-function anstatt

function show( divid ){
if( document.getElementById( divid ).style.display != 'hidden' ){
document.getElementById( divid ).style.display = 'block';
}
}

die if-abfrage auf folgende art schreiben müsstest

function show( divid ){
if( document.getElementById( divid ).style.display === 'hidden' ){
document.getElementById( divid ).style.display = 'block';
}
}

falls du dir wirklich gedanken machen solltest, was die performance angeht, dann noch ein tipp:
vermeide möglichst, das dokument ständig nach einzelnen oder mehreren elementen zu durchsuchen. dass soll heissen: alleine in show() wird das dokument ja 2mal nach einem element mit der übergebenen id ( siehe "divid" ) durchsucht. bei einer suche nach id sollte das nicht sonderlich ins gewicht fallen, anders sieht es aus, wenn du nach elementen mit class suchst und einen browser unterstützen willst, der weder document.getElementsByClassName noch document.querySelectorAll unterstützt ( beispielsweise der MSIE 7 ). in diesem fall müsstest du dir nämlich eine eigene function bauen, die sich zunächst ALLE elemente des dokumentes holt und diese in einer schleife durchläuft und die entsprechenden rausfiltert. z. b. sowas:

PHP:

// getByClass ist, falls verfügbar, eine native browsermethode, sonst eine eigene function
var getByClass = function( classname ){
	
	// gibt es eine native browsermethode? dann nutze diese
	if( typeof document.getElementsByClassName !== 'undefined' ){
		return document.getElementsByClassName( classname );
	}
	
        // keine native methode vorhanden. eigene implementierung
	// deklarieren von variablen. allElems sind ALLE im document enthaltenen dom-elemente mit nodeType === 1
	var i, j, clnm = new RegExp( '\\b' + classname + '\\b' ),
		ret = [],
		allElems = document.all || document.getElementsByTagName( '*' );
	
	// allElems durchsuchen und bei treffer herausfiltern
	for( i = 0; i < allElems.length; i = i+1 ){
		if( clnm.test( allElems[i].className ) ){
			ret.push( allElems[i] );
		}
	}
	
	// array mit gefundenen elementen oder leeres array bei keinem fund zurückgeben
	return ret;
};

wie du dir vorstellen kannst, dauert es länger, ALLE dom-knoten zu durchsuchen, als nur ein einzelnes element zu finden via id. damit der browser nun nicht jedesmal alle knoten durchlaufen muss, könntest du die entsprechenden elemente in einer variablen speichern und mit dieser arbeiten. kurz gesagt, würde z. b. show dann so aussehen:

function show( divid ){
var div = document.getElementById( divid );
if( div.style.display === 'none' ){
div.style.display = 'block';
}
}

um es noch schneller zu bekommen, könntest du diese variablen sogar in deinem falle global verfügbar machen:

var div_1 = document.getElementById( 'div1' ),
div_2 = document.getElementById( 'div2' );

function show(){
if( this.style.display === 'none' ){
this.style.display = 'block';
}
}

div_1.onclick = show;
div_2.onclick = show;

eigentlich bin ich ja gegen spaghetti-code und das setzen von globalen variablen aber OK

hoffe das hilft