Hi,

Sometimes expander appears at the bottom of the list instead of current place. This is happening with Chrome but not with Safari and Firefox.

Here's the page : http://preview.littleboxes.fr/index.php?page=films

2 ways to reproduce the bug :

• click the loadmore button on the bottom of the list, then interact with a pic in the 1st row
• reduce your window to get the mobile viewport then interact with the first pic (only after resizing, not if loading/refreshing when already at this size)

The DIV is placed at the good place in the HTML code but Chrome choose to draw it after all the LI elements. That technique of using a DIV between 2 LI of a UL feels like an undocumented feature. Am I wrong ?

I'm trying to use the malsup cycle plugin dynamically inside each grid list entry. On clicking the pager items, there's a jump to the top of the page. Any ideas on how to overcome this? Is the preventDefault a conflict with the cycle plugin? Thank you for any help. Here's the test page:

http://minnowproject.com/beta/

A few issues here, when I preview the demo in Chrome Dev Tools, there is just white space where the grid should appear. What the issue could be is that you override the height of ".gridder-list .image" to auto which essentially removes all heights, if I remove the auto height it then shows the grid.

Another issue is when the one grid element is expanded the content doesn't expand fully and overlaps any grid elements below. I added a min-height to the ".gridder-show" div so I could a least set a manual height, but in the real world, this will always vary.

The images only get smaller and smaller. I fixed this by changing the width of the images to 220px for big screens and 140px for small screens instead of a percentage. Furthermore I centerend everything.

This is the part of the css file I changed: .gridder { margin: 0px; padding: 0px; list-style-type: none; text-align: center } .gridder-list { display: inline-block; vertical-align: top; width: 220px } @media screen and (max-width: 862px) { .gridder-list { width: 140px; } } .gridder-show { display: block; text-align: left; float: left; width: 100%; position: relative; background: #EEE url("../images/loading-spin.svg") no-repeat center }

A good option would be to animate the closing of the open panel before opening the new one. Is this possible to add myself or does it need an update? I am not a programmer. Also could the open panel be closed by clicking on the body of the page? Apart from these points, excellent code.

Thanks

Hey dude,

Thanks for this amazing plugin, I have used it within a few sites and has been a great bit of functionality to add in. I have added Gridder to a Woocommerce site but when I switch products, the page jumps up. After hours of trying, I can not seem to break it down and resolve the issue. Would you have any idea?

http://www.steve-edgeshop.com/shop/

Thanks, Matt

I'm quite new to JS. I am in school for it right now so I'm still learning. I am trying to use the gridder for my portfolio site which is mostly HTML and CSS with just a few JS features. I'm trying to use it in my Portfolio section. It's set up in a 3 element wide grid. Each element in the list is 33.3333% wide and looks just how I want it.

I have two main issues I cannot solve. First, when I click on the either of the left two list items in each row they cause the rest in the row to bump down to the next row. I cant figure out why.

And the next problem is after the sixth list item there is a gap created as if there is a invisible 7th list item even though the 7th is in the place where the 8th should go.

If any of this rambling makes sense and you can help that would be awesome.

Hello! Thank you for gridder. There is one problem. If I add items via ajax, expanding do not work for this items. I think it's because gridder initialized only once and can not be changed. /* CLICK EVENT */ _this.find(".gridder-list").on("click", function (e) { e.preventDefault(); var myself = $(this); openExpander(myself); }); This code is not called for added via ajax items. Please help me. Sorry for my English, I write through google translate.

I'm testing Gridder on a Wordpress theme I'm building for myself and it appears to block cmd R shortcut on Chrome. If I remove the script enqueue from my functions.php cmd R works again.

I can refresh via the menus and other keybaord shortcuts work. It's such a bizarre issue.

Any ideas?

Hi

Using the callback function I have managed to integrate an accordion inside the gridder panel. Works very well. What I now want to be able do is use a jquery function that changes font attributes such as opentype features (kerning) etc. Inside gridder it isn't working but is if I place it outside.

Is there anything I need to be doing re. callback. Does it need to be inside a callback function within the accordion which is in itself inside the gridder callback. Apologies but I am not a programmer but am helping out a colleague and this is pushing my knowledge rather a bit. At least I am learning something.

Many thanks

Brian

I haven't been able to make Owl Carousel work in the expanded area. Please check the first thumbnail: http://themes.iki-bir.com/gridder/demo/demo.html Could you help me figure out what is missing? (Owl Carousel works outside of gridder but not inside.)

The readme says that it supports multiple instances. How should it be configured for multiple instances? I gave each instance a new gridder class (ie gridder1) and called the gridexpander to initialize each gridder instance based on the different class but that did not seem to work. Can you provide instructions on how to configure multiple instances.

Thanks

When I click the first item, it shifts the others on the same row down below the expanded part and if I click the ones below the expanded section they move back up to the first row as I click them.

Can you help me out, so it does not break out? Thank a lot

I am trying to open one of the gridder items via a URL. So say URL is on homepage and the gridder gallery is on an internal page. How would I go about this?

Thanks

It would be very helpful to introduce more easing options, or enable integration with the Easing.js jQuery plugin. Having just one easing option seems a little bit silly and less customisable. Please add this in a newer version. But otherwise thanks for a wonderful plugin.

Hi!

Is it possible for you to create a npm package for the jquery gridder plugin? This would make life easier for people using package manager and would help with automatic license checks.

I'm not sure why, but I can't seem to get the animations working at all. Instead, when I click on a preview item, the panel just pops in, with no sizing or scrolling animation at all. I even tried using the default HTML in your sample, but the same issue.

$('.gridder').gridderExpander({ scrollOffset: 60, scrollTo: "panel", // panel or listitem animationSpeed: 400, animationEasing: "easeInOutExpo", showNav: true, // Show Navigation nextText: "a", // Next button text prevText: "a", // Previous button text closeText: "aa", // Close button text onStart: function() { //Gridder Inititialized console.log('On Gridder Initialized...'); }, onContent: function() { //Gridder Content Loaded console.log('On Gridder Expand...'); }, onClosed: function() { //Gridder Closed console.log('On Gridder Closed...'); } });

I do have the script enqueued with jQuery (I'm using WordPress), and I did include the CSS. Any clues what I should check for? I didn't include bootstrap, do I need that?