Div an bestimmte Position verschieben?

[sukitio]

Guten Tag,

nachdem ich hier über die Suche nichts gefunden habe und auch Google mir nicht so richtig weiterhelfen konnte, versuche ichs einfach mal mit einem neuen Thema:
Und zwar habe ich folgendes Problem:

Es soll ein div vom unteren Teil der Seite nach oben, an eine bestimmte Position - nämlich an die untere Kante des headers verschoben werden, sobald man mit der Maus über den div kommt, wobei die untere Kante des divs nicht verschoben werden soll.
Im Grunde soll sich der div also von unten "vergrößern" bis an den header heran.

Die Funktionalität soll am Ende ungefähr der auf dieser Seite entsprechen:


Mit CSS habe ich das auch soweit ohne Probleme nachbauen können. Das Problem liegt nun darin, dass mein header keine festgesetzte Höhe hat, dass eine Verschiebung um x Pixel / Prozent / etc. nicht möglich macht - zumindest soweit mein Verständnis langt.

Ich denke also, man wird hier nicht um JavaScript o.Ä. rumkommen, richtig? Gibt es soetwas vielleicht in jQuery?

Super wäre natürlich eine direkte Lösung des Problems. Für eine kleine Hilfestellung wo, und vor allem unter welchen Suchbegriffen ich weitersuchen könnte, wäre ich euch aber genauso dankbar.
Ich möchte ja nicht ausschließen, dass meine Recherche einfach auf den falschen Begriffen basiert.

Vielen Dank,

David

 

[hub]

Moin moin,
ich denke auch, das du in diesem Fall nicht um Javascript herum kommst. Wenn du eh schon jQuery nutzen solltest, schaue mal hier (klick). da findest du eigentlich alles, was du brauchst. Deinen bisherigen Code zu sehen wäre hilfreich ...

Gruß Ulli

 

[sukitio]

Hallo Ulli,

dankesehr! Da ich jQuery eh schon auf der Seite verwende, wird wohl animate() ein passendes Werkzeug sein.
Soweit sollte das auch kein Problem darstellen - nur basiert die Animation hier ja weiter auf px / % / em, wenn ich das recht verstanden habe.

Gibt es eine Möglichkeit, die aktuelle Höhe oder die aktuelle Position eines anderen Elementes (in meinem Fall der header) zu ermitteln und dann diesen Wert als Basis für animate() zu nutzen?
Wie gesagt würde ich ja gerne den Container bis zum unteren Rand des headers, dessen Höhe ich nicht kenne, vergrößern, sofern das möglich ist.

 

[Aelfry]

Gibt es eine Möglichkeit, die aktuelle Höhe oder die aktuelle Position eines anderen Elementes (in meinem Fall der header) zu ermitteln und dann diesen Wert als Basis für animate() zu nutzen?

Einfach das Element ansprechen und height() nutzen.
Zum Beispiel so (Selektor entsprechend anpassen):

var headerHeight = $('header').height();

und headerHeight dann für deine Animation verwenden.

 

[hub]

Moin moin,
wie es sukitio schreibt, wäre auch mein erster Ansatz. Aber da du von unten nach oben willst, solltest du berücksichtigen, das "oben" möglicherweise nicht immer sichtbar ist. Vielleicht solltest du das beim Berechnen der Top-Position berücksichtigen, also Header ist sichtbar: Header bestimmt oben, Header nicht sichtbar, der Viewport bestimmt , wo oben ist.
Der Umfang, wie was sinnvoll zu berechnen ist und ob man wirklich rechnen muss, hängt vom Aufbau deiner Seite ab.

Gruß Ulli

 

[sukitio]

@Aelfry: Danke erstmal, auch für so scheinbar einfache Dinge. Ich bin selbst leider noch nicht so fit in JavaScript / jQuery.

@hub: Ich komme nicht so ganz mit, was du meinst.
Wenn ich es richtig verstanden habe, kann ich doch, wie Aelfry schreibt, die jeweilige Höhe mienes headers durch eine Variable ausgeworfen bekommen und diese dann als Endpunkt meiner Animation setzen.
Sollte dann nicht der zu verschiebene div an genau diese Stelle - vom Rand der Seite und nicht des Viewports gesehen - positioniert werden?
Oder wird sonst tatsächlich der Viewport genommen?

Soweit erstmal zur Theorie. Wäre nett, wenn du, oder gerne auch jemand anders, mich aufklären könntest.
Sobald ich dazu komme, werde ich mal mit animate() herumspielen und meinen Code hier hochladen.

Danke für eure Hilfestellungen!

 

[hub]

Moin,
wie gesagt, ohne zu sehen, was du da gerade zauberst, ist es etwas kompliziert. Beispiel: deine Seite wird mit Content 2500 px hoch, dein Header 200px - Oben ist ausserhalb des sichtbaren Bereichs, wenn du unten bist. Wenn du von unten einen Container nach oben öffnest, kann keiner ahnen, was da oben ausserhalb des Sichtbaren ist ..., darum der Gedanke, sich am Viewport und nicht an der tatsächlichen Position zu orientieren. Oder es auch anders zu lösen.

 

[sukitio]

Nachdem ich mich nun etwas mehr mit der animate-Funktion beschätigt habe, kriege ich es partout nicht hin, einen DIV von unten nach oben zu vergrößern. Gibts da einen Trick oder übersehe ich das offensichtliche?

Den Code kann ich heute Abend oder morgen mal hier einstellen. Bin grad noch am falschen Rechner dazu...

 

[hub]

Moin moin,

Den Code kann ich heute Abend oder morgen mal hier einstellen.

Das wäre hilfreich
Einen möglichen Lösungsansatz findest du zum Beispiel hier: klick.

Gruß Ulli

 

[sukitio]

Also dann:
Ich bin mittlerweile so weit gekommen, dass der DIV die entsprechende Größe bekommt und auch wieder verliert.
Ich erkenne hierbei aber noch 3 Probleme:

1. Das ganze wird von unten nach oben animiert. Kann ich das ändern, sodass es von unten nach oben läuft? Wenn ja, wie?

2. Das Script lädt die Variablen jeweils nur 1x. Wenn ich also die Seite skaliere, ohne neu zu laden, wird weiterhin auf die ehemalige Größe der DIVs geschoben. Kann ich das umgehen, sodass bei jedem "hover" neu geladen wird?

3. Es kommt immer mal wieder vor, dass der DIV beim hovern hin und her animiert, bis er nach ein paar Wiederholungen stehen bleibt. Woran liegt das und wie kann ich das umgehen?

Hier mal der Code dazu:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            * {
                font-family: Tahoma, sans-serif;
                font-size: 0.95em;
            }
            header {
                width: 100%;
                float: left;
                background: #ccc;
                padding: 1%;
            }
           
            #placeholder {
                width: 100%;
                float: left;
                background: #999;
                padding: 1%;
            }
           
            #animate {
                float: left;
                background: #059;
                padding: 1%;
                width: 100%;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <header>
            <p>Header - Variable Höhe</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut </p>
        </header>
        <div id="placeholder">
            <p>Platzhalter für Content - Variable Höhe</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
        </div>
        <div id="animate">Animate Me!<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div></div>
       
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    
        <script type="text/javascript">
             $("#animate").addClass("orig");
            var origHeight = $(".orig").height();
            var targetHeight = $("#placeholder").height() + $("#animate").height();
                       
            $("#animate").hover (
                function(){
                    $(this).removeClass("orig");
                    $(this).animate ({
                        height: targetHeight
                    })
                },
                function(){
                    $(this).animate ({
                        height: origHeight
                    })
                }
            );
        </script>
   
    </body>
</html>

Ich bin mir sicher, dass es an dem Code noch EINIGE Verbesserungen bzw. Verschönerungen gibt. Macht mich doch bitte drauf aufmerksam und verzeiht einem Neuling

Danke für eure Hilfe!

 

[sukitio]

Guten Abend nochmal.

An einer Beispielseite habe ich meinen gewünschten Effekt nun erreicht, unter Verwendung des folegenden Codes:

            $("#animate").hover (           
                function(){
                    var targetHeight = $("#placeholder").height();
                    $(this).animate ({
                        height: targetHeight
                    }, {queue: false}
                                   
                    )
                },
                function(){
                    $(this).animate({
                        height:"40%" /* vordefinierte Höhe des DIVs in CSS */
                    }), {queue: false}

Ich werde das ganze jetzt mal in meine Seite implementieren und schauen, ob es da ähnlich läuft.
Kann man den oben stehenden Code noch optimieren?

Gruß,

David

Edit: Das Script läuft soweit denke ich mindestens zweckdienlich. Mit ein paar kleinen Anpassungen hier und da in meinem Code wird das wohl laufen.
Danke nochmal an euch Helfer.