JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblenden

vandyce · 15.06.2009

Hallo

Ich bin JavaScript-Anfänger und bastle gerade an meinen ersten Scripts

Mein JS sollte wie folgt funktionieren:
wenn die Höhe des <div id="scroll_content"> geringer ist als die höhe von <div id="scroll_content_all"> soll <div id="scroll_btn_all"> mit visibility:hidden; ausgeblendet werden.

so nun mein Lösungsansatz der leider nicht funktioniert

PHP:

<script type="text/javascript"><!--
        function scrollDiv(strId,intSpd) {
             //   1. Funktion die funktioniert  (allerdings nur wenn ich checkHeight() rauskommentiere)
        }
        function checkHeight() {
                 if (document.getElementById('scroll_content').style.height < document.getElementById('scroll_content_all').style.height) {
                        document.getElementById('scroll_btn_all').style.visibility = 'hidden';
                        else {
                        document.getElementById('scroll_btn_all').style.visibility = 'visible';
                        }
                }
        }
//--></script>

...und das html dazu...

Code:

<div id="scroll_content_all"  style="position:relative; overflow:hidden; height:350px; width:310px; border: 1px solid #ccc;">
       <div id="scroll_content"  style="position: absolute; height:auto; width: 300px; padding: 5px; left: 0; top: 0;">
       <!-- Hier erscheint der Inhalt -->
       </div>
</div>
<div id="scroll_btn_all" style="javascript:checkHeight()">
<a href="#" onclick="return false" onmousedown="scrollDiv('scroll_content',8,this)"><img src="btn-up.gif" alt="Bild-Erklärbär"></a>
<br>
<a href="#" onclick="return false" onmousedown="scrollDiv('scroll_content',-8,this)"><img src="btn-dn.gif" alt="Bild-Erklärbär"></a>
</div>

ich bin jetzt schon ein paar Stunden am rumtesten, nun hoffe ich dass ihr mir weiterhelfen könnt.

Bis denn, MfG vandyce

cebito · 15.06.2009

AW: JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblende

Nimm mal statt style.height lieber
document.getElementById('irgendwas').scrollHeight oder
document.getElementById('irgendwas').offsetHeight

vandyce · 15.06.2009

AW: JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblende

danke cebito

document.getElementById('irgendwas').scrollHeight oder
document.getElementById('irgendwas').offsetHeight

hat aber leider nicht fubnktioniert

Meine nächsten Gedanken die ich habe, ist denn die "Gramatik" meines Scripts richtig?
Und wo positioniere ich das laden der Funktion checkHeight() am besten?
Und ist --- style="javascript:checkHeight()" --- überhaupt der richtige Befehl um die Funktion zu laden bzw. auszuführen?

Ich bin für jede Antwort dankbar

cebito · 15.06.2009

AW: JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblende

Jetzt versteh ich, was du meinst, hab ich selbst erst vor drei Tagen gemacht... Zur Vereinfachung hab ich mal den äusseren Div weggelassen, denn mit dem musst du nichts vergleichen...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css"><!--
#scroll_content{
position: absolute; 
height:340px; 
width:300px; 
padding: 5px; 
left: 10px; 
top: 10px; 
overflow:hidden;
border:1px solid #000000;
}
#scroll_btn_all{
position:absolute;
left: 10px; 
top: 365px; 
visibility:hidden;
}
--></style>
<script type="text/javascript"><!--
function showerklaerbaer(){
d=document.getElementById('scroll_content');
if(d.offsetHeight < d.scrollHeight){
    document.getElementById('scroll_btn_all').style.visibility = "visible";
    }
}
//--></script>  
</head>

<body onload="showerklaerbaer();">
       <div id="scroll_content">
        <!-- mach mal mehr Inhalt-->
       </div>
<div id="scroll_btn_all">
<a href="#" onclick="return false" onmousedown="scrollDiv('scroll_content',8,this)"><img src="btn-up.gif" alt="Bild-Erklärbär"></a>
<br>
<a href="#" onclick="return false" onmousedown="scrollDiv('scroll_content',-8,this)"><img src="btn-dn.gif" alt="Bild-Erklärbär"></a>
</div>
</body>
</html>

Teste es mal aus und schreib mal ein bissl was in den div rein, da wo der Kommentar ist... Und wie du siehst, sollte dieser div overflow:hidden haben, der äussere ist vollkommen egal. Ich frage ab, ob der sichtbare Bereich (offsetHeight) des div kleiner ist als der Bereich, den der content tatsächlich einnimmt(scrollHeight) - wenn das der Fall ist, wird die scrollbar (erklaerbaer) eingeblendet, sonst bleibt sie "hidden", brauchst also auch keine ELSE wird bei jedem neuen Laden wiederum ausgeführt (body onload="")...

vandyce · 15.06.2009

AW: JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblende

Danke dir für die schnellen Antworten.
Ich werde dein Script morgen früh gleich testen wenn sich meine grauen Zellen wieder rebootet haben

bis denn Danke