rnmp / salvattore Goto Github PK

I have problem to get the same result as is savattore. the column is automatically recreated when the browser resized.

I have check the pseudo element and it did changed, but not the column, it's still use the first initiated column.

If you try to initialize salvattore on an element that has display:none, you get this type error.

First, i have an error line 151 i = rules.length, rules is undefined. Seems that rule.cssRules line 169 is undefined. It seems to work with rule.cssText but what do you suggest?

Secondly, the columns are not recreated when resizing the browser, any advice? If i add a resize eventListener on window, it works, but it should work by itself, right?

Other Browsers are good - only the canary version is not working.
Tested: Chrome Canary 31 on Mac.

Firstly thanks for a great plugin! Any idea on the licence for this? Currently I have two themes almost ready for release which would use salvattore.js at its core.

I am happy to make a donation (aka beers) or discuss paying for a developers licence in the same manner as masonry.js etc.

Any input would be appreciated.

Thanks

We used Salvatorre for our wordpress theme Lens (blog sectiosn): http://pixelgrade.com/demos/lens/journal/

Also for another theme - Bucket: http://pixelgrade.com/demos/bucket/

So far so great! Congratulations

Notified by @tomblanchardCSS on Twitter. Please check.

Uncaught TypeError: Cannot read property 'length' of undefined


i have problem with property 'length', despite all make sure that it is okay, what's the solution ?

Salvattore looks nice, and although I can get it to work, I am getting an error in console:
Uncaught TypeError: Cannot call method 'match' of undefined

Also, I am wondering how to integrate this into an ajax page? The JS is included on first page load, and I get additional errors if the start page does not include id='grid' data-columns. Also, since the script executes automatically, how can I re-apply it when I load new page content with a grid? Right now, it only runs once first page loads ...

Guess this would be tricky because widths are applied to columns not individual elements, but an option to make elements 2-columns wide would be neat.

Great work on this one, very elegant!

I have been looking at my project code for too long today, but it seems Salvattore has issues with a mobile-first layout with the widths set in ems?

http://jsfiddle.net/XCrk3/6/
http://jsfiddle.net/XCrk3/6/embedded/result/

I can't seem to get this to work, and I'm obviously missing something:

• Using only (min-width: __) queries with Salvattore won't work, right?
• So I put in more specific (min-width: __) and (max-width: __) queries just to test,
  but it still doesn't switch..

Any hints on what's going on here?

Cheers!

If grid is empty at start, salvattore crashes.
Is there any work around for this?

Everything is in place according to the documentation, but it doesn't seem to work. It doesn't add the .column class to the divs or set the number of columns in data columns. Could it be because there are four stylesheets and the script is trying to find the necessary CSS is the first one?

http://www.thebadgerworeblack.com/stage/work

Hey guys! Please tell me about the advantages of dataset compared to native setAttribute('data-...') in your project?

If your salvattore configuration sits in a CSS files which is loaded from a CDN then salvattore.js will not parse those rules because of cross domain restrictions. You should include this information in the docs, if possible.

On setup, the data-columns property is not being picked up (length 0) because the DOM hasn't loaded. Is there a way I can call setup after the dom is fully loaded and everything is ready to go? I tried to add "setup" as one of the properties that is returned along with "append_elements" and "prepend_elements", but that didn't work...in other words,

return {
      append_elements: append_elements,
      prepend_elements: prepend_elements,
      setup: setup
    };

adding "setup" at the bottom of the file and calling it after dom is loaded didn't help anyway except that the data-columns now has a value of the content property I added for it but nothing changes beyond that. No grid

The link below is a screenshot of a test page which was loaded at a width such that there were four columns. When page is reduced in width, the column style changes but the plugin does not re-order the items within. Notice where there should be #4 it is #5. The 4th item is still in the 4th column, which is now pushed down below the others.

I have tried this with both min-width only queries as well as min-width and max-width. My queries are em-based. Can't figure out where/why this error is happening.

https://www.dropbox.com/s/rxnrl581mr97cmh/Screenshot%202013-11-08%2010.07.32.png

This library is awesome and I just wanted to suggest that we add this lib to cdn.js. I can do it if you want, but I think this would be awesome to have up there.

Hi, first of all thank you very much for the great job you've done.

I got salvattore working without any issues with just CSS. But I have no idea how to access salvattore instance in order to use your API methods (I am not using RequireJS or similar so your gist example didn't help me too much).

At the beginning I was sure you register the plugin instance under salvattore global variable (root.salvattore = ...) but it stays undefined always so I cannot do salvattore['append_elements'](grid, [item]).

I had a look inside the code but since I am mainly backend developer this JS seemed just too weird for me to find a solution ;)

You wrote "However, you can still use jQuery or any other JS library to work with the API to get advanced functionality." I think it would be good idea to extend docs with a short sample code how to do it.

BTW
I also noticed errors like "Uncaught TypeError: Cannot read property 'length' of undefined" (it is about rules variable) or "a is undefined". I'd create dedicated issue for this if you confirm it is not known and currently expected behaviour because despite the errors grid is contructed fine.

Is it possible to use Salvattore with infinite scroll?

This is what I have tried and it does not work:

var container = $('.container');

container.infinitescroll({
    navSelector: '.pagination',
    nextSelector: '.next-page',
    itemSelector: '.module'
},
function(newElements) {
    salvattore['append_elements'](container, [newElements]);
});

When Salvattore.js is loaded asynchronously it may lead to a situation where it cannot parse style rules so it does not fire at all. This is an order of execution type of problem.

Suggested solution would be to remove the self.init(); from the end of the script and make it callable manually only.

Modernizr.load([{
  test: window.matchMedia,
  yep : 'salvattore.min.js',
  callback: // Do something here to figure out if I can call salvattore.init();
}]);

Any thoughts on this?

Hi, great plugin, thanks :)

I have an issue where the media queries are only being applied upon page load, not when resizing. It works fine when resizing locally, just not when live.

The page I am working on is here: http://sandbox.pebbledesign.com/go/blog.html (all Salvattore CSS is in the header and the JS is being loaded after everything else).

Is there a reason why my media queries aren't being applied when resizing on the live version? I noticed that the Salvattore website has it working correctly, so I'm probably doing something wrong here.

Cheers,
Klaye

When using new version 1.0.2 I am getting the error Uncaught ReferenceError: register_grid is not defined
Version 1.0.1 is working as expected tough.

Using JQuery 1.10.2 and Modernizr 2.6.3 and some jquery plugins in addition to salvattore.

Some debug code can be found here:

Hi. I'm using this library in a page that loads more elements on scroll and append them to the grid. I need the latest element to get the pubdate and use it as parameter in the ajax request (to get older elements). The problem is that using jQuery $('#grid .items').last(); not always returns the latest element (it returns the latest child of the latest column, but in a 3 columns grid with 10 elements, the latest element is the latest child of the first column), so some items are loaded twice.
There would be useful to have a method that returns the first or the latest item. Something like salvattore['get_first_element'](grid); and salvattore['get_latest_element'](grid);

The idea is as follows:

• Before adding the new elements, add a class to each of them, this class sets the display property to 'none'.
• After adding the elements, change the class specification itself by modifying the display property to 'block'.
• Remove the class on each of the added elements.

This should reduce the number of redraws to 1.

Hi, I'm not a javascript specialist, I'm just a designer who uses cool scripts like this one :)

My problem here is that the columns don't recalculate when media queries breakpoints are reached on window resize, I have to reload the page to see the change. I don't know what I should do.

Hi, maybe its just me but how do you clear the grid if you want to repopulate it from scratch (clear all items) e.g. refresh.

$('#grid').empty() clears it but then it all stops working

http://creatingfame.com/blog/ and http://creatingfame.com/reviews/

Okay, you know how in Masonry you are able to add CSS3 transition effect when boxes "move" between columns? Is this possible with this plugin? I see that it is based on "columns" which leaves to think that by adding transitions to boxes, it wouldn't do anything... Or is it possible?

Here is the page I am talking about: http://desandro.github.io/masonry/demos/animating-css-transitions.html

What exactly prevents this from working on IE8? Could the support be added (or polyfilled) in some way?

how do you empty the grid and start from scratch, e.g. if you want to refresh the data and populate something different

Hello.

This script doesnt work for me. is it possible you can help me?

Hi. I think implementing events is very useful in some cases. For example in my specific implementation, I need to execute some code after the columns are created and I fixed it using jQuery:

self.recreate_columns = function recreate_columns(grid) {
  // removes all the columns from the grid, and adds them again,
  // it is used when the number of columns change.

  global.requestAnimationFrame(function render_after_css_media_query_change() {
    self.add_columns(grid, self.remove_columns(grid));
    $(grid).trigger('after_recreate_columns');
  });
};

Of course, this is a patch only for my case, but I think salvattore should have a way to insert javascript in some points for a better control.

When using the append_element method, as in the example on salvattore.com, the item is always added to the first column. Also every consecutive 'append_element' call, with another item, again adds to the first column. Bug, or am i doing something wrong? :-)

Code used:

var grid = document.querySelector('#grid');
var item = document.createElement('article');
salvattore['append_elements'](grid, [item]);

Setup: Salvattore 1.0.4 minified, pre-filled grid working fine.
Tested on recent Chrome, Safari, Firefox.

Prepend_elements works as expected.

I found two other users with this problem here, in comments:
https://gist.github.com/rnmp/bf6c5d8db9487862aba1

tested with mac.
it's a very good plugin anyway :)

Works perfectly in every other browser. In Safari (5.1.7 Windows - works on MAC) my 4 columns are displayed as above - but if you inspect the DOM or move your mouse over the images, then they start to expand until they reach the correct size.

Refresh the page and they go back to this.

Have used Masonry plugin before and been able to use the imageLoaded() function to trigger CSS after all images are loaded. Does Salvattore trigger an event once loaded? Have multiple Salvattore containers - how would this work on container by container basis?

Hello,

This script is amazing and perfect for my portfolio.

However, I've been running into this issue with the 'masonry' like effect on the last 4 images or so. Example:

http://ofsoundandvision.com/s.html (scroll to the bottom)

I've noticed this also happens in the demo/example. Am I doing something wrong or is this a bug?

I'm fading in each item in sequence, but this happens by columns, and I would like it to happen by rows (eg the original item order) if possible?

$(".item").each(function(i) {
$(this).delay(100*i).fadeIn();
});

I'm using

salvattore['register_grid']($("#container")[0]); 

to lay out items coming from Firebase, but every time it's called it creates a column within a column. 'append_elements' wouldn't work because it's not really appending anything, the item order changes and things appear and disappear in sync with changes in the database.

Is there some way to re-initialize the grid on command?

Edit: whoops I meant 'register_grid'

An issue I've bumped in to and created a work around for, it's likely something other users are going to have trouble with and I'd love to see officially supported.

As I'm using a CSS framework with a lot of media queries, it breaks and even if it didn't would be inefficient trawling through that much CSS on each load. What I've done to get around it is add a data attribute to CSS include which points to a file that contains only the rules Salvattore needs to see. I've then added a modification to the script so in the get_stylesheets() function it also checks the selector for this tag using [data-salvattore].

It's a quick fix and if I had the time I'd try and make it more flexible though I thought it would be worth mentioning as a potential improvement as well as a fix for some people (including myself).

Hi, I noticed that you said the plugin works in IE9, however I can't get it to work and your website doesn't work either (the boxes don't appear at all).

I've tested it in IE Developer Tools, Browserstack and IE Tester - no luck. I have your plugin on http://www.pebbledesign.com/insights and http://www.pebbledesign.com/fresh (integrated with Lazyload).

Cheers for an excellent plugin, I am using it on a few sites now.

Klaye.

I'm on a case where I can switch from grid to list & was wondering if it can be an option to unregister a grid on an element.When switching to list, I just empty this dom element & reappend all item, CSS does the rest. It's working except when I resize the window (salvattore is still trying to update the grid, that doesn't contains column anymore).
Since my dom container have some specific classes, I want to avoid to create a new element.
Is this doable easily ?