mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 13:56 Benutzername: Passwort: Auto-Login

Thema: jQuery UI: Effects auf absolut positionierten Elementen vom 20.01.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery UI: Effects auf absolut positionierten Elementen
Autor Nachricht
trashmaster
Threadersteller

Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 20.01.2010 14:37
Titel

jQuery UI: Effects auf absolut positionierten Elementen

 Antworten mit Zitat Zum Seitenanfang
Hi!
Ist es nicht möglich, via jQuery UI-Effects ein absolut positioniertes Div problemlos ein- und auszublenden?
Hier mal eine vereinfachte Version von dem, was ich gerne hätte: http://trashnet.de/tech/jquery_test.html

Code:
$("#button").click(function() {
   $("#dynamic").toggle("slide", { direction: "down" }, 500);
});


Es gibt ein absolut-positioniertes Div, das ich gerne ein- und ausfahren lassen würde. Leider hat der IE (Safari komischerweise übrigens auch) mit der absoluten Positionierung Probleme! Sobald die Animation beginnt, versetzt er das Div an den oberen Rand.

Das ist bei jedem Effekt der Fall (z.B. slide, clip, bounce..) - es kann doch nicht sein, dass das nicht geht? * grmbl * Ich probiere schon 'ne ganze Weile. Ohne Effekt (nur mit toggle) funktioniert es.. aber das sieht halt nicht so toll aus.

Hat jemand eine Idee? * Keine Ahnung... *
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 20.01.2010 15:00
Titel

Antworten mit Zitat Zum Seitenanfang
funktioniert augenscheinlich wegen der "bottom" angabe nicht.
wenn du es von oben positionierst, sollte alles tuti sein.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
trashmaster
Threadersteller

Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 20.01.2010 15:25
Titel

Antworten mit Zitat Zum Seitenanfang
ja.. Leider ist mein Inhalt in dem Div nicht immer derselbe, die Höhe variiert also. Daher geht es mit top leider auch nicht *Schnief*
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Mi 20.01.2010 15:28
Titel

Antworten mit Zitat Zum Seitenanfang
du könntest aber die höhe des immer unterschiedlichen divs auslesen, und es mit animate um genau die pixel nach unter verschieben...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 20.01.2010 16:31
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
$(document).ready(function(){
        if($.browser.msie) {
                $toScroll = $("#dynamic");
                bottomMargin = $toScroll.css("bottom");
                $toScroll.css({
                        "bottom" : "auto",
                        "top" : $(this).parents('#outer').height() - $(this).height() - bottomMargin + "px";
                })
        }
})
  View user's profile Private Nachricht senden
trashmaster
Threadersteller

Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 20.01.2010 16:58
Titel

Antworten mit Zitat Zum Seitenanfang
* huduwudu! * Danke für den Anstoß, du bist mein Held des Tages. Es klappt nun in allen IE-Versionen!

Ich hab den Code noch ein bisschen angepasst, padding und border wollen auch berücksichtigt werden Lächel

Code:
$(document).ready(function(){
    if($.browser.msie || $.browser.safari) {
           
            toScroll = $("#dynamic");
           
            bottom = parseFloat(toScroll.css("bottom"));
            padding = parseFloat(toScroll.css("paddingBottom")) + parseFloat(toScroll.css("paddingTop"));
            border = parseFloat(toScroll.css("borderBottomWidth")) + parseFloat(toScroll.css("borderTopWidth"));   
            distance = bottom + padding + border;
   
            toScroll.css({
                    "bottom" : "auto",
                    "top" : (toScroll.parents('#outer').height() - toScroll.height() - distance) + "px"
            });
    }
});

http://trashnet.de/tech/jquery_test.html
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mi 20.01.2010 17:09
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
            $(document).ready(function(){
                if($.browser.msie) {
                        var $toScroll = $('#dynamic');
                        var topPosition = $toScroll.parents('#outer').height() - $toScroll.height() - 5 -20; // containerhöhe - scrollcontent höhe - abstand nach unten - padding (20px)
                        $toScroll.css({
                                bottom : 'auto',
                                top : topPosition
                        });
                }
               
                $('#button').click(function() {
                    $('#dynamic').toggle('slide', { direction: 'down' }, 500);
                });
            });


http://jsfiddle.net/kxCsz/1/


// edit: OK, hat sich erledigt

Zuletzt bearbeitet von sahnemuh am Mi 20.01.2010 17:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
TheFreeman

Dabei seit: 05.07.2008
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 18.10.2010 14:48
Titel

Antworten mit Zitat Zum Seitenanfang
Ich hab den code noch ein wenig verändert,
denn der Animation-Qeue sollte auch berücksichtigt werden. *zwinker*

http://jsfiddle.net/kxCsz/5/
  View user's profile Private Nachricht senden
 
Ähnliche Themen jQuery | Effects bei CSS
jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
CSS - Positionierung von Elementen
[CSS] Text absolut auf 0,0
position absolut im IE6
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB