Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „JS - Höhe von 2 div´s vergleichen und in Abhängigkeit einen dritten div ausblenden“

V

vandyce

Guest

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

undefined

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
 
V

vandyce

Guest

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

undefined

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="")...
 
Zuletzt bearbeitet:
V

vandyce

Guest

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben