✔ Höhe nach vollständigem Laden des Dokuments fehlt

A

achterbahnfreak

Erfahrenes Mitglied
Hallo zusammen,

ich besitze ein Problem und hoffe, dass mir dabei jemand helfen kann. Auf einer Website habe ich ein jQuery Plugin eingebunden, das gleich viele divs (.item) in Spalten (columns) aufteilt.

Mit folgendem Code wollte ich erreichen, dass die divs die gleichen Höhen- wie Breitenmaße hat (das div soll also immer ein Quadrat sein):

Javascript: 
<script type="text/javascript">
        $(window).ready(updateHeight);
        $(window).resize(updateHeight);

        function updateHeight()
        {
           var div = $('.item');
           var column = $('.column');
           var width = column.width();
           div.css('height', width);
        }
    </script>

Sobald ich das Fenster verkleiner, wird die Höhe angezeigt und alles ist so wie gewollt. Beim Seitenladen jedoch wird die Höhe einfach nicht angezeigt.

Woran könnte das liegen?

Habe es auch schon mit $(document).ready(updateHeight); und $(window).onload(updateHeight); versucht, brachte jedoch keinen Erfolg...

Danke für eure Hilfe. :)
 
Zuletzt bearbeitet von einem Moderator:
Also ich kenne nur $(document).ready() und window.onload(). Aber das erste hast Du ja schon versucht. Poste doch mal die URL deiner Seite.
 
In der jQuery-Dokumentation steht Folgendes zu ready():
Quelle: http://api.jquery.com/ready/
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.


The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
Zum Vergrößern anklicken....

Hast du in .columns Bilder? Bindest du den Script-Block nach deinen Stylesheets ein?
 
... eigentlich müsstest du ein fehlermeldung in FiereBug oder ähnl. sehen.
So wie ich das sehe besitzt javascript keine width- und css Methode.
In jQuery ist jedoch umgekehrt, da wiederum muss die Methode aufgerufen werden.
Probier daher mal folgende Varianten
Code: 
// statt
var width = column.width();
div.css('height', width);

var width = $(column).width(); // oder
var width = $(column)[0].width();

// und
$(div).css('height', width); // oder
$(div).attr('height', width); // oder
$(div).prop('height', width); // oder

Und bzgl. $(window).ready oder $(document).ready, da würde ich eher $(document).ready tendieren.
Wird zwar so auch funktionieren jedoch weiß ich nicht wie es sich auf unterschiedlichen Geräten (Mobile, Tablets) verhält.
$(document).ready ist gang und gebe.
Welche jQuery Version verwendest du?


Hoffe das klappt
Lg
ksk
 
Wieso nutzt du nicht das column CSS-Attribut?
=> http://jsfiddle.net/njxfg59b/
HTML: 
<div class="container">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
    <img src="http://sapegin.github.io/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
</div>

CSS: 
.container {
    column-width: 10em;
    column-gap: 0;
}
.container img {
    width: 10em;
    height: 10em;
}
 
Weil beim Verkleinern oder Vergrößern des Fensters auf der rechten Seite ein Rand bleibt. Das Plugin tut genau das, was ich möchte. Bloß muss eben jedem item noch eine Höhe (=Breite des Columns) hinzugefügt werden...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück