Div langsam einblenden funktioniert nicht

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo zusammen,

da ich keine Ahnung von js habe, wende ich mich mal mit meinem problem an euch.
Bin mir sicher, dass ihr helfen könnt.

ich möchte einen div mit onclick langsam einblenden.
hier mein js :

var h =0;
var b =0;

function DIV_REIN(id,hoehe,breite)
{
var Pfad = document.getElementById(id);

var Lauf =0;
if(h

#2

Hallo Bob,

ich möchte einen div mit onclick langsam einblenden.
hier mein js :

var h =0;
var b =0;

function DIV_REIN(id,hoehe,breite)
…
…
woran liegt das und wie krieg ich das hin, dass
der div wieder ausgeblendet wird ???

Auf jeden Fall waren mehrere Fehler drin
(z.B. if(Lauf = 1) { … } usw.) und
es erscheint günstiger, das gleich etwas
umzustrukturieren:
#mydiv { visibility:hidden; background-color:#FF66FF; color:#33FF33; }

var reentrant = 0, h = 0, b = 0;

function div_blende(id, breite, hoehe, aktion)
{
if( ! reentrant ) {
reentrant = 1;
var move = 0, element = document.getElementById(id);

if( aktion == ‚ein‘ ) {
if(h < hoehe ){ h += 20; move++ }
if(b < breite){ b += 20; move++ }
element.style.visibility = ‚visible‘;
}
else if( aktion == ‚aus‘ ) {
if(h > 0 ){ h -= 20; move++ }
if(b > 0 ){ b -= 20; move++ }
element.style.visibility = (b > 0 && h > 0) ? ‚visible‘ : ‚hidden‘;
}

if( move ) {
element.style.height = h + ‚px‘;
element.style.width = b + ‚px‘;
window.setTimeout( function(){ div_blende(id,hoehe,breite,aktion) }, 20 );
}
reentrant = 0;
}
}
Test
einblenden /
ausblenden
Holla

#3

Hallo CMБ,

vielen vielen Dank !!!
Das funktioniert ja richtig gut.

Bei mir war ja total viel daneben.
Das zeigt mir mal wieder, dass ich in js noch viel zu lernen habe.

Jetzt habe ich aber noch eine Frage zu dem Script.
Kann man das noch so abändern, dass wenn ich ausserhalb des divs (also irgenwo auf dem Bildschirm) klicke, dass sich der div dann schliesst ?

Wäre super wenn du mir antworten könntest (oder jemand der schneller ist :wink: )

Vielen Dank nochmal…

Gruß

Bob

#4

Hallo Bob,

Jetzt habe ich aber noch eine Frage zu dem Script.
Kann man das noch so abändern, dass wenn ich ausserhalb des
divs (also irgenwo auf dem Bildschirm) klicke, dass sich der
div dann schliesst ?

*Das* ist schon schwieriger, weil man sofort
in das ‚bubble up‘ Problem von Javascript
reinkommt.

Um das zu lösen, muss man einen ‚onclick‘-Handler
auf das ganze Dokument setzen und *dann* schauen,
welches element „getroffen“ wurde. Und gerade dieses
„Finde geklicktes Element“ ist nichttrivial. Nach ein
wenig Studium brachte ich dann eine solche Funktion
zu stande, ich hoffe dass es auch in Brausern geht,
die ich nicht besitze :wink:
#mydiv { visibility:hidden; background-color:#FF66FF; color:#33FF33; }
#einblenden { color:white; background:#669966; display:inline; }

var reentrant = 0, h = 0, b = 0;

function div_blende(id, breite, hoehe, aktion)
{
if( ! reentrant ) {
reentrant = 1;
var move = 0, element = document.getElementById(id);
if( aktion == ‚ein‘ ) {
if(h < hoehe ){ h += 20; move++ }
if(b < breite){ b += 20; move++ }
element.style.visibility = ‚visible‘;
}
else if( aktion == ‚aus‘ ) {
if(h > 0 ){ h -= 20; move++ }
if(b > 0 ){ b -= 20; move++ }
element.style.visibility = (b > 0 && h > 0) ? ‚visible‘ : ‚hidden‘;
}
if( move ) {
element.style.height = h + ‚px‘;
element.style.width = b + ‚px‘;
window.setTimeout( function(){ div_blende(id,hoehe,breite,aktion) }, 20 );
}
reentrant = 0;
}
}

function FindID(e) { // modified from script at:
var target; // http://www.quirksmode.org …
if( !e ) e = window.event; // /js/events_properties.html#target
if( e.target ) target = e.target;
else if( e.srcElement ) target = e.srcElement;
if( target.nodeType == 3 ) target = target.parentNode; // Safari bug
return target.id
}

function my_clickhandler(e) {
div_blende( ‚mydiv‘, 300, 200, (FindID(e)==‚einblenden‘?‚ein‘:‚aus‘) );
}

document.onclick = my_clickhandler;

Test
Hier einblenden
Holla

Grüße

CMБ