jQuery Nested plugin for a gap free, multi column grid layout experience.
Demo: http://suprb.com/apps/nested/
Nested to the left and Grid-A-Licious/Masonry to the right.
Gap free multi column grid
jQuery Nested plugin for a gap free, multi column grid layout experience.
Demo: http://suprb.com/apps/nested/
Nested to the left and Grid-A-Licious/Masonry to the right.
Have run into a really odd bug - having a minWidth greater than 242 seems to break this entirely - both in Chrome (36.0.1985.143) and Safari 7.0.6 (9537.78.2) jQuery 2.11.1.
See: http://jsfiddle.net/komrath/6rSCt/ ā setting padding even with border-box sizing completely breaks the styling, maybe I didn't see some option for that? I would like to have padding inside elements, so I don't need to wrap them inside in any additional markup.
<div class="box size32 nested-moved" ... width: 123px; height: 60px; ... ></div>
Since the class name includes "size32", the ratio of the width and height should be 3:2 instead of 2:1 (The right one could be 93px, 60px, because the height is limited to 60px at maximum during that specific condition). I have tried to read your codes, but fail to fix that. It usually happens on last several pictures when they are moved to fill some blank room among other pictures.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library suprb/Nested
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "suprb/Nested",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hi all !
I am trying to change the right property dynamically but it not works fine.
The code
function fv() {
if ($('#fv').css('display') == 'none') {
$('#container').animate({"right":"250px"}, 700);
$('#fv').show('fast');
}
else {
$('#container').animate({"right":"0px"}, 700);
$('#fv').hide('fast');
}
}
I tried the same code in another div and it works fine.
What I need to do ?
Hi,
Thanks for this great plugin.
I am implementing this into a template and I faced two issues:
You can check your own demo to see these issues and following image is from your own demo:
the animation isn't very nice, would be nice to have it like in Isotope
does it support virtual scrolling?
I tried to center multiple divs (whole block of divs) inside another div/html document, but I failed every time I tried something...
Here is a pic of what I'm trying to do.
Top situation is what I have right now and the bottom one is what IĀ“d like to do. https://i.stack.imgur.com/DB7uQ.jpg
Hello there,
I have recently started using Nested to create a picture gallery on my blog, and i noticed a strange bug that happens on aproximately every 10 views. It causes 1 element to overflow from the container, and always to the right. I'm attaching picture of how it looks: http://i.imgur.com/MBK16KF.png. The images are really div elements with defined background-image
css property. The settings i use Nested with are:
selector : '.gallery-image',
minWidth : 200,
gutter: 10,
animate: false,
resizeToFit: true,
resizeToFitOptions: {
resizeAny: true
}
Apart from that i think it's fantastic library, had no other issues using it.
Hi,
I was just wandering what is the purpose of this option?
It gets stucks at the function _setBoxes();
As I said, It happens when the container is smaller than it's largest box, or when there's too much boxes for the plugin to make a correct layout of.
I just think it tries to find a right layout but simply can not with the given conditions.
It's annoying not because it doesn't work, but because it keeps trying to calculate, and completly overloads chrome and firefox: it even makes my other tab unresponsive.
You surely wouldn't want your website to do that to a user.
I'll try myself to add conditions to prevent calculating new layout if the conditions are too dangerous. I'm more WebDesigner than a developper, so it will probably won't be a very nice patch.
But other than that, it's an awesome plugin! Good work !
PS : You should consider adding a 'minHeight' property for the boxes. I added it myself in adding the parameter and changing 'minWidth' in 'minHeight' in all the y rules, and it worked !
Horizontal layout is not working for me. Is it possible to do instead of vertical scroll?
The Nested library is to be crashing Chrome and Safari in iOS 6. The page renders properly when the call to nested is removed.
Any help you can provide is appreciated :-)
i have multi-width and multi-height photo. i used "Nested" instead of "packery".
Now in default demo, i only change the default html values in "index.html" and not changed anything more. but overlapping, How to stop photos from overlapping?
<div id="container">
<div class="box">image tag 1</div>
<div class="box">image tag 2</div>
<div class="box">image tag 3</div>
</div>
Not sure if this is the best place to ask but is it possible to have an option that allows a different row height to column width? Or did I miss something?
Hi, i'm new developer . I'm trying to use nested into my project. I have a question want to ask . How to using lazyload and nested ?
Thanks and best regards.
My boxes are "size63" and "size33". My last container resize makes my container smaller than these boxes and they get cut off - which causes my browser to freeze up and crash.
Does anyone have any ideas on how I could resize or change these box sizes to fit within my container and still have them order nicely in the container?
Please add the possibility to have all the elements positioned and resized (to similar scale and preserving their aspect ratio) in a div, using divs height and width. The resized elements should have similar scale.
This should be like an overview of all the pictures in the galery. Please answer even if there is such a solution and I just could not find.
Is there any formal description of an algorithm implemented here?
I do agree that this is one awesome plugin! However how do you pre-calculate the height of the boxes? In a responsive design the width and height is set to 100% or any percentage of that matter. How does one allocate a height ratio before the content is inserted in the DOM?
It does not seem to be possible to use percent values for minWidth. In some cases it would be desirable.
On mobile , its not working , browser crashed after some time ( Tab killed feedback. ) http://prntscr.com/di4t65
Hello,
I am sorry, I didn't create request.
I have fixed dimentions for div(width, height). I want to get waste space.
how can i get it?
Hey @superb
At first I want to thank you for your work. I really appreciate that very much.
When I visited your Website I got a 404 on http://suprb.com/apps/nested/
. Any chances to get it up working again?
Thanks and cheers!
rb
If the boxes have different size ratio than width = minWith * x, height = minWidth * y the plugin does not work unfortunately.
On Safari / Mac, I'm encountering an issue, you can see it live there : http://www.vinylzilla.com/user/534410d569afa3284b8b4567
If you can't test on Safari / Mac, here's what happens : all the items in the list are in position: absolute and got top: 0px; left: 0px; so all the items are at the same place...
I can't see where it comes from, any ideas ?
Hi!
I have a page, with dynamically generated table (2 columns), where one row has containers enhanced by "Nested" script. That is, I have 2 containers. What I noticed is, that no matter the options, I use, the second container always seems to use animation like SlideUp
here is the sample of my HTML (it uses some images from Steam):
<style> body{ background-color: RGB(51, 51, 51); color: whitesmoke; font-family:Microsoft Sans Serif; font-size:10pt; } a:link {text-decoration:none;} a:link {color:#74BBFB;} a:visited {color:#74BBFB;} a:hover {color:#74BBFB;} a:active {color:#74BBFB;} </style> <script src="jquery-2.0.3.min.js"></script> <script src="jquery.nested.js"></script> <script src="makeboxes.js"></script>How can I stop this animation?..
Does anyone has archived to change the direction the tiles to start from the center instead of the top left corner?
can only go up to 9x the min width box length. I don't see any upside to using "size92" as a way to set a box size, as opposed to, say, "size9x2" or similar.
I was able to make both Chrome and Safari freeze.
box.className = 'box size' + Math.ceil( Math.random()*3 ) + Math.ceil( Math.random()*3 );
box.className = 'box size' + Math.ceil( Math.random()*15 ) + Math.ceil( Math.random()*15 );
I'm guessing one of the for-loops within the while(true){}
never breaks.
But there should be some nice fallback, right?
is it possible to use nested for an horizontal grid ?
nested resizes the grid to fit the width but what about resizing the width to fit the height ?
thanks, awesome system
after displaying the grid i use button to filter/hide items
how do i trigger the grid to fill the gaps left by the hidden items?
I wonder how hard would be to tweak the script to have a max width when "centered" is set. I'm trying to write a piece of code that would allow me to do it, but have no success.
Anyone can help me?
Thanks
Is there anyway to re-layout the nested tiles? I want to change the size of the tiles with different break points and re-layout. Pretty much calling nested again with a different set of options (mainly minWidth).
What would be the best way to do it?
Thanks
I checked the code and found this infinite loop
i added a watchdog to avoid the problem but still the bug exists
in _renderGrid at line 295
$maxloop = 1000;
while ($maxloop>0) {
$maxloop--;
if(this.columns === col) {
this.columns++;
}
Hi there,
Is there any possibility to arrange blocks to a best match based on a value? basically I have two types blocks and every block will have a date associated with it and I need to load them based on date (latest one on top and so on..).
The problem I am facing is that blocks get arranged on available spaces making old dated block available on top of latest published block, so is there any possibility that I load timestamp in each block and blocks gets arranged to a best match based on timestamp .
Please suggest
Thanks in advance!
Nisar
Is Nested the evolution of Grid-a-licious, or do they have different features?
I want to add very-very small blocks, thouthands of them.
I use this settings
// Masonry Grid Settings
$(function() {
$('#container').nested({
gutter : 0,
minWidth: 10,
minColumn: 10,
});
$('#prepend').click(function(){
var boxes = makeBoxes();
$('#container').prepend(boxes).nested({
prepend : boxes,
gutter : 0,
minWidth: 10,
minColumn: 10,
resizeToFit : false,
resizeToFitOptions: {
resizeAny: false
},
});
});
});
Add 1 small 10x10 pixels block, it is ok, but the next now, if he is more than 10x10 sizes, it breaks everything. Pictures almost does not moving, and each one added, goes as layer. Like a heap....
I've tried to use the grid but in crashes my browser on iPhone/iOS7/Safari and freezes Chrome browser on Samsung Note. Also I tried to access plugin's home page: http://suprb.com/apps/nested/ and it does the same thing.
Is it a known issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ššš
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ā¤ļø Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.