Jump to content
Sign in to follow this  
gyoery

jquery quicksand conflicting with feature

Recommended Posts

gyoery

I know, this is not regular support stuff, though maybe some1 knows a quick fix: I'm using quicksand plugin to sort the team. And that uses jquery 1.7. This conflicts with my feature slider/quick slider. Any Ideas how to resolve this conflict, since I really wanna use both?

Share this post


Link to post
Share on other sites
ksnyde
I just integrated quicksand yesterday and it worked after a little tweaking. I accomplished this by adding a plug which: - loads the dependancy JS files (jquery.animate.js, jquery.css-transform.js, jquery.easing.1.3.js) into the footer using wp_enqueue_scripts - loads the CSS file using wp_enqueue_style - then I loaded the quicksand.js file using above technique - finally (and this is where a little tweaking was necessary) I added a file called localsand.js which has the two "on document load jQuery anonymous functions." On the http://razorjack.net/quicksand/ site this was saved as "main.js". Anyway, for this file to work I had to use a jQuery wrapper around both functions so that they worked properly. Maybe this was clear but here's an example of the start and end blocks of the second function after I applied the jQuery wrapper: [code] (function($) { var read_button = function(class_names) { var r = { selected: false, type: 0 }; for (var i=0; i < class_names.length; i++) { if (class_names[i].indexOf('selected-') == 0) { r.selected = true; } if (class_names[i].indexOf('segment-') == 0) { r.segment = class_names[i].split('-')[1]; } }; return r; }; ... e.preventDefault(); }); }); })(jQuery); [/code]

Share this post


Link to post
Share on other sites
gyoery
well, as soon as I add [code] [/code] to my scripts, it messes up my features, but the quicksand works great. If I remove it, the features work but the quicksand doesnt... I added the 2 js you said (already had easing) even though it was working without, in the hopes that I could then remove the above mentioned line, and it would work, but it didnt... any ideas? [code] //These are the javascripts in my header //This is the js in my footer [/code]

Share this post


Link to post
Share on other sites
ksnyde
You shouldn't add jQuery, Wordpress already adds this and you're just asking for conficts if you do this.

Share this post


Link to post
Share on other sites
gyoery
ok, though how do I fix it... it seems to not work with the jquery that is included... I'm really at a loss here.. It just simply doesn't work... even when I use the 1.71 it doesnt show the features... and when I don't add anything, the quicksand is not working.

Share this post


Link to post
Share on other sites
Rob
Have you considered writing to the plugin author?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gyoery
it is not a plugin... its simple jquery...

Share this post


Link to post
Share on other sites
Rob
[quote]"I'm using quicksand plugin to sort the team."[/quote] That reads like there's a plugin involved in this. Are you saying that the plugin is just adding jQuery? The developer of Quicksand should have some answers for this problem.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ksnyde
The author may respond on GitHub but he's not actively working on Quicksand so I'm not sure he will. Still worth a try though. I think what you may be experiencing is similar to what I ran into and it's a classic jQuery name collision on the $ variable. Look at your second jQuery anonymous function in your footer. It does not use the "no conflict" method I suggested. It's subtle but critical. Look at my beginning: [code] (function($) { [/code] and yours: [code] $(function() { [/code] Now look at the footers of that same function. Mine is: [code] })(jQuery); [/code] yours is: [code] }); [/code] I'd be surprised if that doesn't fix it. If it doesn't you'll have to use Firebug or one of the other browser debuggers to dig into it a bit more. One last word -- but this is just for extra credit -- you should try and load all JS files in the footer not the header. This will be the right answer for a VAST majority of the JS files you encounter yet people consistently put them in the header anyway unaware that JS files load serially and prevent the page from rendering before they load. Sometimes this is not noticeable but often it is. In the Sandbox case the only JS file that needs to be in the header is jQuery itself but as Wordpress is loading that for you it's not really your concern. The other dependency is the jQuery extensions should be before the Quicksand library. Otherwise you're good to go, no issues. The best way to manage all of this is to use the wp_enqueue_script function and hook it into the "wp_enqueue_scripts" hook (e.g., [code]add_action('wp_enqueue_scripts', 'QuickSand::add_dependant_scripts');[/code] where QuickSand::add_dependency_scripts might look like this: [code] class QuickSand { const plugin_name = 'QuickSand'; const min_php_version = '5.2'; /** * add_dependant_scripts * * Adds the necessary JavaScript and CSS to the pages */ public static function add_dependant_scripts () { // wp_enqueue signature: // wp_enqueue_script ( $handle, $source, $depedencies, $version, $in_footer ) // Adds a cool effect when items go on or off stage. This is optional but much prettier when it is there wp_enqueue_script ( 'jquery.easing', plugins_url ( 'js/jquery.easing.1.3.js' , dirname(__FILE__)) , 'jquery' , false , true ); wp_enqueue_script ( 'jquery.animate' , plugins_url ( 'js/jquery.animate.js' , dirname(__FILE__) ) , 'jquery' , false , true ); // Not sure precisely what it does but it's a 100% requirement to this working wp_enqueue_script ( 'jquery.css-transform', plugins_url ( 'js/jquery.css-transform.js' , dirname(__FILE__)) , 'jquery' , false , true ); // The actual quicksand library wp_enqueue_script ( 'quicksand', plugins_url ( 'js/jquery.quicksand.js' , dirname(__FILE__)) , 'jquery.easing' , false , true ); wp_enqueue_script ( 'localsand', plugins_url ( 'js/localsand.js' , dirname(__FILE__)) , 'quicksand' , false , true ); // Add the required styling wp_enqueue_style ( 'quicksand' , plugins_url ( "css/quicksand.css" , dirname(__FILE__)) ); } /** * initialise * * The main function for this plugin */ public static function initialise() { // Nothing Yet // TestLibrary::min_php_version(self::min_php_version, self::plugin_name); } }[/code] Good luck, hope it all works out.

Share this post


Link to post
Share on other sites
gyoery
not the author, but the awesome ksnyde fixed it all for me. Thanx again man for this extreme support!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×