kudago / waterfall Goto Github PK

I used to use a fixed height for each item, but still cannot fit my design, the height changes after waterfall took effect makes it looked bad. I am just wondering is there any possibility to observe height changes or image loaded for each item?

I would like to control the margins so that 30px between each item top and bottom.
wheres the best place to do this ?

I have a markup:

<div id="waterfall" class="container">
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
</div>

There are news, that I want to show in 2 columns. Between this colums only for styling purposes I want to add timeline.

<div id="waterfall" class="container">
    <div class="timeline"></div>
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
    <div class="timeline-item"></div>
</div>

But how I can do, to exclude .timeline block from waterfall reflow

Error before initialization. Uncaught TypeError: Cannot read property 'transform' of null
No method error after initialization.

Ideas?

If I init plugin in console for block without elements will be error:
Uncaught TypeError: Cannot read property 'dataset' of undefined
For 564 line:

    if (!$.parseDataAttributes) {
        $.parseDataAttributes = function(el) {
            var data = {};
            if (el.dataset) {

For example, I need to load elements, later through ajax.

I got this error when I tried to initiate the waterfall by using $(window).load()

The error is from line 469 of jquery.waterfall.js
if (el.dataset) {

Here is the code snippet.

if (!$.parseDataAttributes) {
$.parseDataAttributes = function(el){
var data = {};
if (el.dataset) {
$.extend(data, el.dataset);
}

Every waterfall element has margins margin: 20px 10px 10px;
In upper margin we have date-element with display: block andmargin: -23px
Part of screenshot from Google Chrome Dev Tools (blue - block, orange - margins)

And looks like waterfall manipulating blocks without it's margins

Is it possible to set the amount of columns in mobile width? (any width?)

Cheers,

Elijahu

I think HTMLCollection does not have push method because it is not an array.

I've been trying to use waterfall on a tumble feed and the master build doesn't add the column classes. I ended up pulling the '.js' from the demo on the site which works.

var $container = $('#list');
            $('#wrapper').css('visibility','hidden');
            $container.imagesLoaded(function(){
                $container.waterfall({
                    colClass: 'content-column', 
                });
                $('#wrapper').css('visibility','visible');

   });

Hi!

I managed to get the plugin working OK on one of my projects, but when I try to use it inside the div of an accordion panels, It looks completely messed up vertically... horizontally each box is where It should be but vertically the plugin places one over the other, I'm thinking maybe It's because the panel is hidden when the page loads or the height is zero. I tried adding the defaultContainerWidth option but that didn't help. Anyone has any info I could use to solve this problem?

Thanks.

jqueryjquery.waterfall.js:545: WARNING - unreachable code

I like this plugin, but it seems to have issues with IE v 8 on windows.

Dettagli errore pagina Web

Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Timestamp: Tue, 1 Oct 2013 13:28:19 UTC

Messaggio: 'JSON' non è definito
Linea: 4
Carattere: 559
Codice: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

Messaggio: 'defaultView.getComputedStyle' è nullo o non è un oggetto
Linea: 2
Carattere: 2348
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/js/zepto.js

Messaggio: Previsto oggetto
Linea: 6
Carattere: 2
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/jquery.waterfall.js

Messaggio: Previsto oggetto
Linea: 519
Carattere: 2
Codice: 0
URI: http://dfcreative.github.io/projects/waterfall/

Probably not specific to this plugin, is anyone getting a null returned from calling document.defaultView.getComputedStyle?
https://github.com/dfcreative/jquery.waterfall/blob/master/jquery.waterfall.js#L572

It happens when i am running a Jasmine test.

Hacky but not sure if its right to wrap it with a conditional..
if(style != null)?

can it attach/detach off-screen element when scrolling up/down in order to improve performance?

We're trying to get jquery ui draggable working with Waterfall, with no luck. The images jump to crazy locations during the drag, I assume because things are reflowing. Has anyone gotten any drag-and-drop solution working with waterfall?

.append() works as expected. But there is some issue on .prepend(), waterfall did not prepend elements, it appends elements to the tail. I have to recall waterfall again to re-layerout, that makes waterfall acts weird.

Hi @dfcreative,
waterfall is an awesome lightweight plugin, thank you for the awesome job! I'm wondering if the maxCol option is supposed to work or not? I tried setting it via data attribute, as well through the JS init, but the script seems to ignore it.

$( '#newsgrid' ).waterfall({
  colMinWidth: 300,
  maxCols: 2,
  autoresize: true
});

You should definitely hook up a demo of jquery.waterfall! I know I'd be interested in seeing what it looks like in action.

This package doesn't have any GitHub release. Could you please create one, so that people can use this project from CDN?

Hi,

I'd like to know if is possible using just 2 columns?

Hi can I do that?

Tks

Hello. How can i change the flow of the items? I want them to start and the top left and flow right.

The issue i am having is that the items are not being displayed as i would hope.

Lets say the html markup is like this:

<div id="buildcontainer">

    <div class='blogresults'>ITEM 1</div>

    <div class='blogresults'>ITEM 2</div>

    <div class='blogresults'>ITEM 3</div>

    <div class='blogresults'>>ITEM 4</div>

</div>

When checking the source code, that is the mark up. Yet in my website grid the items are displayed such as:

ITEM 3 | ITEM 1 | ITEM 4 | ITEM 2

This wouldnt normally be a problem, except i am ordering the contents depending on their popularity. I could hack it and change the order of the content, but its all dynamically loaded.

Is this a case of my items css styling? Here is the styling for that:

.blogresults { 
border: 0px solid #fff;
background-color: #fff;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
z-index: 500;
disply: inline-block;
float:;
 -webkit-transition: box-shadow 200ms;
 -moz-transition: box-shadow 200ms;
 -o-transition: box-shadow 200ms;
 -ms-transition: box-shadow 200ms;
 transition: box-shadow 200ms;
}

#buildcontainer {
width: 100%;
height: auto;
    margin-top: 5%;
}