suprb / nested Goto Github PK

On mobile , its not working , browser crashed after some time ( Tab killed feedback. ) http://prntscr.com/di4t65

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 ?

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?

does it support virtual scrolling?

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?

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 :-)

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

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):

How can I stop this animation?..

Hey, maintainer(s) of suprb/Nested!

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!

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?

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?

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.

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>

Is there any formal description of an algorithm implemented here?

I was able to make both Chrome and Safari freeze.

Steps to reproduce

• Change
  box.className = 'box size' + Math.ceil( Math.random()*3 ) + Math.ceil( Math.random()*3 );
  to
  box.className = 'box size' + Math.ceil( Math.random()*15 ) + Math.ceil( Math.random()*15 );
  in makeboxes.js
• Append or prepend some boxes until you get some big ones.
• Make the browser window really narrow.

_renderGrid seems to loop

I'm guessing one of the for-loops within the while(true){} never breaks.

Maybe I shouldn't make that big boxes?

But there should be some nice fallback, right?

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++;
}

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'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?

It does not seem to be possible to use percent values for minWidth. In some cases it would be desirable.

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....

the animation isn't very nice, would be nice to have it like in Isotope

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?

http://serhatsabuncu.com/waste.jpg

Is it possible to keep the grid in place when the browser resizes?

Horizontal layout is not working for me. Is it possible to do instead of vertical scroll?

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?

Hi,

Thanks for this great plugin.

I am implementing this into a template and I faced two issues:

1. The first item has problem in position and it will stick to right or bottom items.( It is ok in firefox but in chrome it happens - I use latest versions of browsers)
2. It crashes a lot when I resize my browser.

You can check your own demo to see these issues and following image is from your own demo:

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 !

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

Does anyone has archived to change the direction the tiles to start from the center instead of the top left corner?

<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.

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 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 Nested the evolution of Grid-a-licious, or do they have different features?

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.

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.

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.

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