Packery Horizontal Layout Problems - javascript

Hoping that someone out there has some experience with packery, which I'm using for a project.
I cannot get the horizontal layout to work. Declaring the packery object in HTML seems to work somewhat.
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>
Although it appears that the width and height are not changed through CSS as the documents suggest. But I've not bothered digging further because I need to use Javascript. And the equivalent doesn't seem to work at all:
$('.packery').packery({
itemSelector: '.item',
isHorizontal: true,
});
This results in the <div> element the packery object was assigned to 0px high and 4px wide. (The 4px width probably comes from some items' 1px border.) The packery docs say that horizontal layout requires setting height. But the CSS provided by the docs seems to do nothing, whether packery was initialized in HTML or Javascript:
/* containers need height set when horizontal */
.packery.horizontal {
height: 200px;
}
Still, none of my inserted items are visible and the packery <div> is 4px x 0px. So, I forced the container's height in Javascript:
$('.packery').css('height', '400px');
This does increase the element's height but the width remains at four. And therefore all the elements are essentially zero width and invisible. So, I tried forcing the container's width:
$('.packery').css('width', '1000px');
But this width seems to be ignored. I can force the <div>'s width using the element editor in Chrome's developer mode, and that produces some visible, although ugly, content. But how the hang do I set the <div>'s width in Javascript? It seems packery is overriding the width I set, whether I do it before or after the call to packery().
Everything in packery seems to work great for vertical layouts. But I really want to use the horizontal layout but I'm obviously doing something wrong. Can anyone help?

I had similar issue with the isHorizontal option. I solved it using !important tag in my css on the div width around the packery.

Related

Weird flicker in jQuery toggle

I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).
See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.
Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.

Pikabu - Miscalculating Height

I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.
You can see the issue at: http://verypc.very-dev.co.uk/
You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.
My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.
I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.
Any help would be great!
this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)
line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();
window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)
you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile
I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).
I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.

jquery cycle slider height issue

I've been trying to make the slider on this page behave responsively. However, it seems it requires a fixed height on the container, otherwise it does not display the entire slide.
Is there a way (other than going to jquery cycle 2 plugin which I am not allowed to do) to declare a height:auto and still display the entire image? I initially suspected it's something to do with floats, but they are all cleared and still not working.
If I force overflow:show on the wrapper (#industries-slider) I run into issues with the #nav which does move with the overflow.
What am I doing wrong?
Thanks!
Update: responsive, not adaptative. I know I can use media queries to adjust the height, but on exotic displays (and on browser resize which is how its being tested, there is a visible jump of the #nav
Ok, set position: absolute again.
You can set the height of #industries-slider1 using jQuery.
//Find the max height of items
var heights = $(".slide-item").map(function ()
{
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
//Set #industries-slider1 height
$('#industries-slider1').height(maxHeight);

Inline Block element with width auto doesn't update

I am having trouble with inline-block elements with
width: auto;
and programatically changing the height with javascript.
Here is a jsFiddle that demonstrates it;
http://jsfiddle.net/uJZjB/2/
The idea is that if you resize your window, the javascript sets the elements' height, and the inline-block element's width automatically adjusts to fit the content.
However, the width does not auto update and it remains at the original width rather than resizing to match the width of the content.
If you cause the dom to refresh by hiding and showing the element, or changing the display style e.t.c. the widths are updated!
Please see this modified jsfiddle;
http://jsfiddle.net/uJZjB/5/
This one on chrome, now forces the width:auto; to kick in and work, on Firefox it still appears not to update.
Is there a reason why the widths wont update when set this way?
Regards,
You can set the width of the elements alongside the height to what would be expected with width:auto by taking the width of the children:
$('#myul li').css('width',$('#myul li').children().width() + 2); // compensate for border
JSFiddle: http://jsfiddle.net/uJZjB/4/

When I have width: auto and specific left and right, why does setting min-width to the value of calculated width expand the element by 2px?

I have a page made of elements with width and height set to auto and their dimensions defined with left, right, top and bottom properties. When the page is loaded, all widths and heights are set to their calculated values by the browser, as they should be. However, when I set min-width of the elements to their respective calculated widths, each of those elements is expanded by 2px. The same happens if I set their min-height to be equal to the calculated height. I do it with jQuery, like this
element.css('min-width', element.css('width'));
or
element.css('min-width', element.width());
The effect is exactly the same as it should be, but there should not be the extra 2px if I understand what's happening correctly. Using
element.css('min-width', element.width() - 2);
completely solves the problem but I don't like not understanding why there are the extra 2px. According to specifications, neither width nor min-width nor max-width should include padding, borders or margins.
I've tested in Chrome and FF and both behave the same way.
What browser are you testing and can it be that your document is in quirksmode?
element.css('min-width', element.width()); shouldn't be doing anything in standards mode, because element.width() returns an integer without a CSS unit, and min-width requires a unit in standardsmode.
So put your document in standards mode and then try:
element.css('min-width', element.width() + "px");
If that doesn't help you'll need to show a working example.

Categories