✔ Javascript: <div> ein- und ausblenden

Hi,

ich hab den Fehler gefunden ;)

Ich habe versucht, die Position noch über den "<div>" zu ermitteln. Zu diesem Zeitpunkt gibts es diesen Bereich ja noch garnich, deshalb alles 0 ;)


Nochmal vielen Dank, jetzt funktionierts bei mir auch
 
Hi!

Freut mich, dass ich Dir helfen konnte - obwohl mir Der Fehler eigentlich hätte auffallen müssen.:rolleyes: Naja.

Tu mir bitte einen Gefallen: Wenn irgendwann Probleme mit meinem Skript auftauchen, sag mir Bescheid. Ich verwende es - wie gesagt - in fast allen DHMTL-basierten Webseiten und auch wenn bisher noch keine Probleme bekannt sind, würde ich doch es doch gern erfahren, wenn welche auftauchen... :)

Gruß,
Enum
 
Ich hab die Funktion so übernommen, aber beim FireFox wird der Div immer oben in der Ecke angezeigt.
Beim IE gehts ohne Probleme.

HTML: 
[...] Die anderen Funktionen

function toggle_div(id,ele) {
	var linker_abstand = element_left(ele);
	var oberer_abstand = element_top(ele);
	var breite = element_width(ele);
	var hoehe = element_height(ele);

	var field = document.getElementById(id);

	if (field != null) field.style.display = (field.style.display == 'none') ? "block" : "none";
	
	field.style.left = linker_abstand;
        field.style.top = oberer_abstand + 20;
}

id ist die ID des Divs das verschoben werden soll
ele ist die ID des Buttons an dem das Div angepasst werden soll
 
Abend!

Versuch's mal so:
Code: 
function toggle_div(id,ele) {
	var linker_abstand = element_left(ele);
	var oberer_abstand = element_top(ele);
	var breite = element_width(ele);
	var hoehe = element_height(ele);

	var field = false;

	if (field = document.getElementById(id)) field.style.display = (field.style.display == 'none') ? "block" : "none";
	
	field.style.left = linker_abstand;
        field.style.top = oberer_abstand + 20;
}
 
Der komplette Quellcode wäre ein bisschen zu umfangreich. ;)

Ich versuch mal das wichtigeste zu posten:

Das ist der Button, wenn man drauf klickt soll das Div ein- und ausgebendet werden
HTML: 
<input type='button' id='option_antworten' value='Antworten...' class='mails_optionsleiste_button' OnClick=\"javascript:toggle_div('auswahl_antworten','option_antworten')\" />&nbsp;

Und das ist der Div der ein- und ausgeblendet wird:
PHP: 
$auswahl_hover = "OnMouseOver=\"javascript:this.className='auswahl_zeile_hover'\" OnMouseOut=\"javascript:this.className='auswahl_zeile'\"";
	echo "<div id='auswahl_antworten' class='auswahlmenu' style='display:none;top:278px;left:245px'>
	<table border='0' cellpadding='0' cellspacing='0' width='100%'>
	<tr>
		<td class='auswahl_zeile'><input $auswahl_hover type='submit' OnClick=\"javascript:check_do('answer')\" value='$a_lang[auswahl_antworten]' class='auswahl_zeile' /></td>
	</tr>
	<tr>
		<td class='auswahl_zeile'><input $auswahl_hover type='submit' OnClick=\"javascript:check_do('answer_all')\" value='$a_lang[auswahl_allenantworten]' class='auswahl_zeile' /></td>
	</tr>
	</table>
	</div>";

Und das sind die Javascript-Funktionen:
HTML: 
function element_query(ref_object) {
        if(!(typeof(ref_object) == "object")) {
                return (ref_object = document.getElementById(ref_object))? ref_object: 0;
        }
        return ref_object;
}

function element_width(ref_object) {
        if(ref_object = element_query(ref_object)) {
                if(ref_object.width) {
                        return ref_object.width;
                }
                if(ref_object.offsetWidth) {
                        return ref_object.offsetWidth;
                }
        }
        return 0;
}

function element_height(ref_object) {
        if(ref_object = element_query(ref_object)) {
                if(ref_object.height) {
                        return ref_object.height;
                }
                if(ref_object.offsetHeight) {
                        return ref_object.offsetHeight;
                }
        }
        return 0;
}

function element_top(ref_object) {
        var ret_val = 0;

        if(ref_object = element_query(ref_object)) {
                while((typeof(ref_object) == "object") && (typeof(ref_object.tagName) != "undefined")) {
                        ret_val += ref_object.offsetTop;

                        if(!(ref_object = ref_object.offsetParent)) {
                                break;
                        }
                }
        }

        return ret_val;
}

function element_left(ref_object) {
        var ret_val = 0;

        if((ref_object = element_query(ref_object)) && (ref_object.offsetLeft)) {
                while((typeof(ref_object) == "object") && (typeof(ref_object.tagName) != "undefined")) {
                        ret_val += ref_object.offsetLeft;

                        if(!(ref_object = ref_object.offsetParent)) {
                                break;
                        }
                }
        }

        return ret_val;
}

function toggle_div(id,ele) {
	var linker_abstand = element_left(ele);
	var oberer_abstand = element_top(ele);
	var breite = element_width(ele);
	var hoehe = element_height(ele);

	var field = false;

	if (field = document.getElementById(id)) field.style.display = (field.style.display == 'none') ? "block" : "none";
	
	field.style.left = linker_abstand;
        field.style.top = oberer_abstand + 20;
}
 
Die Positionsangaben für das DIV greifen erst, wenn du die position-Eigenschaft vorne anstellst, entweder absolute oder relative.

Code: 
<div id='auswahl_antworten' class='auswahlmenu' style='display:none;position:absolute;top:278px;left:245px'>
oder

Code: 
<div id='auswahl_antworten' class='auswahlmenu' style='display:none;position:relative;top:278px;left:245px'>
 
Hi,

versuch mal, die Werte für left und top mit Einheiten zu versehen.
Code: 
field.style.left = parseInt(linker_abstand) + "px";
field.style.top = parseInt(oberer_abstand) + 20 +"px";
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück