1

So I am configuring the quicksand plugin on my new wordpress website to use it on my portfolio section.

I configured everything and it's working. You can see it live here:

http://www.tipoos.com/new/?page_id=43

The problem:

I have more jQuery scripts running on my site. For example, see the portfolio item thumbnails when hovering over the image. When I first run the page the hover images are working, but whenever I trigger the sorting quicksand functionality to filter my items the hover image effect on the thumbnails stop working and this is really annoying..

I figured maybe it has to do with a jQuery conflict or something, but whatever I tried didn't work -- couldn't find an answer anywhere...

Here is my JavaScript file, which contains all the scripts in the site including the quicksand settings: https://dl.dropbox.com/u/4405634/functions.js

If anyone can assist I'd be happy.

Dave L.
  • 9,595
  • 7
  • 43
  • 69
gil hamer
  • 559
  • 4
  • 9
  • 27
  • close vote as off-topic. this is a jQuery issue, nothing to do with WordPress. look at replacing your event handlers with [on](http://api.jquery.com/on/). your elements are being removed from/added to the DOM, so they're losing their event handlers. –  Jul 27 '12 at 15:03
  • @milo- It's about integrating quicksand into wordpress, what should I do then? post this question in the relevant stackexchange website?. – gil hamer Jul 27 '12 at 15:48
  • @songdogtech - I dont know how to accept answers, also I never received a straight good answer, I will look at the FAQ's - thanks. – gil hamer Jul 27 '12 at 15:51

2 Answers2

0

Your question has little to do with Wordpress and everything to do with jQuery. Forums and Q&A sites that deal with jQuery as a standalone library are better places to look.

You also need to learn how to use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what JS and jQuery libraries are loading on your site and to resolve JS conflict errors.

You may also need to look at Function Reference/wp enqueue script « WordPress Codex on how to load JS within WordPress as you are learning jQuery.

markratledge
  • 17,322
  • 12
  • 60
  • 106
  • Thanks @songdogtech, I actually know Jquery pretty good and everything seems to be working fine except for hover images with the quicksand but I will check again to see if there is a Jquery conflict or something. regardless - I am still looking to get some assistance here as I posted a link to my Javascript file. I hope that someone can check out my site and advice how to help. – gil hamer Jul 27 '12 at 19:24
0

as I mentioned in my comment on your question, your issue is that the elements are cloned when animated, so they are losing the events bound to them.

the solution is in their documentation. I believe you can also solve it by binding your events via jQuery's on, which replaced the live method for binding events to objects which may exist in the future.

Milo
  • 171
  • 5
  • I managed to solve it somehow using a live function: `$(document).ready(function(){ $('.items > ul > li').live('mouseenter', function(){ $(this).find('img.grey').stop(true, true).animate({'opacity': '0.2'}, {duration:500}); }); $('.items > ul > li').live('mouseleave', function(){ $(this).find('img.grey').stop(true, true).animate({'opacity': '1'}, {duration:500}); }); });` in addition to my existing code. I hope it helps anyone who needs it – gil hamer Jul 28 '12 at 17:01