Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

jQuery Quicksand Margin/Height Issue WordPress

  • REFUNDED

I've integrated the Quicksand jQuery plugin into a WordPress theme I'm working on. Finally got it how I'd like it, however it's still jerking a bit when the animation executes. This may be more CSS related than WordPress, but since I've implemented it into WP, I was thinking maybe someone else has run into the same issue. If it should be posted elsewhere, just let me know!

If you visit the demo site, http://okaythemes.com/dispatch/, you'll see in the header I have a Sort Posts drop down. If you click on Sort Posts or even All Posts, you'll see the filter animation drifts upwards about 10 or 15 pixels. Quickly after that, the div's CSS reapplies and shoots it back down to where it should be. This causes it to hang and then jerk back down, which isn't very smooth!

So I'm wondering if anyone has any tips on how to keep that bottom margin intact to prevent that hanging issue. I've tried all kinds of little CSS adjustments to no avail.

Any help would be much appreciated!

Mike

Answers (2)

2011-07-21

Romel Apuya answers:

have you tried removing

.clearfix {
height: 1%;
}

in your css?


Mike McAlister comments:

Unfortunately removing that doesn't change it. Thanks for the suggestion though!

Mike


Romel Apuya comments:

i think its in here..

http://okaythemes.com/dispatch/wp-content/themes/dispatch/includes/js/quicksand/quicksand.js?ver=3.2.1

replace :
adjustHeight: 'auto',

with

adjustHeight: 'false',

or

adjustHeight: false,


just try..


Romel Apuya comments:

hey i think Dylan is right

J(".filter-posts").quicksand($filteredData, {
duration: 900,
easing: 'easeOutBounce',
adjustHeight: 'false',
});


just remove the ,

on the end..

so it would be

J(".filter-posts").quicksand($filteredData, {
duration: 900,
easing: 'easeOutBounce',
adjustHeight: 'false'
});


Mike McAlister comments:

Hi Romel,
Unfortunately that's not doing it either! I've tried changing that before with no luck. I also made sure to change it in script.js as well as the quicksand.js. Doesn't seem to be responding to that.

Just not sure, I've tried just about everything I could think of, which is why I ended up on here.

Mike


Romel Apuya comments:

did you clean you cache? after making the changes?

ok.. have you tried validating you site?


http://validator.w3.org/check?uri=http%3A%2F%2Fokaythemes.com%2Fdispatch%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2


it has an error..
maybe the third error is causing it...


Mike McAlister comments:

Those errors are not related to this issue. The first two are HTML5 validation errors, and the third is WP inserting style tags for it's gallery. Non related.

Mike


Romel Apuya comments:

you also tried?

J(".filter-posts").quicksand($filteredData, {

duration: 900,

easing: 'easeOutBounce',

adjustHeight: false

});

and

(function ($) {
$.fn.quicksand = function (collection, customOptions) {
var options = {
duration: 750,
easing: 'swing',
attribute: 'data-id', // attribute to recognize same items within source and dest
adjustHeight: false, // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
dy: 0
};


Romel Apuya comments:

i guess this is hard,,

sorry anyways..


Mike McAlister comments:

Yep, that's currently what the code is at.

Mike


Romel Apuya comments:

how about not including the false value of adjustheight in single qoute?


Mike McAlister comments:

Same, unfortunately.


Romel Apuya comments:

hey maybe one last try..


J(".filter-posts").quicksand($filteredData, {
duration: 700,
easing: 'jswing',
adjustHeight: 'false',
});
J(this).addClass("active");



should be..


J(".filter-posts").quicksand($filteredData, {
duration: 700,
easing: 'swing',
adjustHeight: 'false'
});
J(this).addClass("active");


Mike McAlister comments:

Sorry, still not it. I believe it to be something more than a minor code tweak like that. Like I said, I've tried all of these basic fixes. Looking for something a little more here.

Thanks for your help though!

Mike


Romel Apuya comments:

ok,


Romel Apuya comments:

Hi Mike,

I think you only need to give the .post-7 a height and that would fix iy..not the whloe .post class.

Romel,

2011-07-21

Dylan Kuhn answers:

What if in your theme's includes/js/quicksand/script.js you change the easing method? It's currently


J(".filter-posts").quicksand($filteredData, {
duration: 900,
easing: 'easeOutBounce',
adjustHeight: 'false',
});


If you change easeOutBounce to jswing or one of the smoother methods maybe?


Mike McAlister comments:

Hi Dylan,
Actually I started with jswing and a few others, but they are all producing the same effect unfortunately.

Mike


Dylan Kuhn comments:

Have you tried omitting the flash in the parallelostory post on top? More of a stab in the dark than an answer, but if it were me I'd try it just to see.


Mike McAlister comments:

I've just taken it out, and you can see it's still acting funny. Looks like it even stutters more so with the video taken out ;).

I appreciate you guys looking into this. I'm going to increase the prize amount to account for it's trickiness!

Mike


Dylan Kuhn comments:

Ok, a spark in the dark: the nastiness happens at quicksand.js line 80. Looking at the comments above that, there is a history of problems there, including some older code you might try. Beyond that I'd be reduced to dinking with that segment of code to see what happens.


Mike McAlister comments:

No luck there, unfortunately. This thing has bested me for days now. Just don't know what the hell it is. The best luck I've had so far were CSS solutions, but even those didn't quite do the trick.

Mike


Dylan Kuhn comments:

Not jealous. My best guess is that some kind of CSS, a margin or something, is being applied to the DOM elements that are then removed there on line 80. I don't claim that as answer though - just a naming of the suffering.


Mike McAlister comments:

I've found giving the .post a height sort of solves the issue, but obviously I can't give them the same height because each post is a different height! Maybe calculating it's height with jQuery will do the trick. Not so sure yet though!

Mike