Trying to change product list css

Question

I know this is a little off-topic, i.e. hacking BC with jQuery... but if you can help... I am trying to change the product list css for items displayed in the catalogue. I'm implementing jQuery masonry script to effect a responsive layout for small products with a script removing and adding two classes. The script works fine and I have it all working perfectly (for example here: http://silverster-***-race.dotsilo.com/air-filters), except where the small product list is displayed from a sub-catalogue list ../parentCatagory/childCategory. Here's an example where the list is displayed vertically rather than the intended masonry style: http://silverster-***-race.dotsilo.com/Gauges/srp-gauges
This is the default HTML that BC creates (wrapped with with my own DIV and  ID) :
<div id="items">
<ul class="productList productSmall">
<li id="catProdTd_6742743" class="productItem">
<!-- Some product content here -->
</li>
<li id="catProdTd_6742744" class="productItem">
<!-- Some product content here -->
</li>
</ul>
</div>
I have been able to change the classes (from .productItem to .item .masonry-brick) with jQuery elsewhere on the site (like air filters example and the home page: Home - Japanese Race Supplies).
The jQuery I used to change the classes successfully was this:
$('div#items ul li').removeClass('productItem').addClass('item masonry-brick'); // this script replaces the class .productItem with .item .masonry-brick
My problem seems to be that the sub-catalogue (sub-directory) is ignoring the script. Is there something I'm missing when working with a sub-directory like this? I did look at a pure CSS work around, but it's complicated with Masonry generating its own classes too. Any help or suggestions appreciated.
Thanks. - Simon

Answer 1

Hey Simon, how are things?
Your running Javascript Simon, that runs after server side scripting, BC wont be overriding those things.
You also do not have to change ANY classes when using things like masonary, You just specify your targets to match the classes that you have in your projects. Document guides for things like plugins are just guides and will have their own classes based on what the author is doing.
One of the key things to javascript is fixing and avoiding errors:
On the second page you linked you have the following errors -
"NetworkError: 404 ERROR: The file requested could not be found. - http://silverster-***-race.dotsilo.com/Gauges/twitter/jquery.tweet.js" 
jquery.tweet.js
"NetworkError: 404 ERROR: The file requested could not be found. - http://silverster-***-race.dotsilo.com/Gauges/js/tinynav.min.js" 
2
tinynav.min.js
TypeError: $(...).tweet is not a function
Things stop working when you have errors.
On the first page you have this error:
TypeError: $(...).replaceText is not a function $(".cartSummaryItem").replaceText( "Shopping cart is empty.", " " );
In terms of the Masonry stuff. You do not need that to make your cart responsive But if you do want to target elements:
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.productItem'
This of course wont count for the productItemLast but >  ".productList.productSmall > li" will also work.
There would be no need to add a class in terms of the CSS as well.
Its hard to follow your code a bit to see anything else, I can not see Masonry actually running on either page you linked and the last page also has no products.
Sorry if I am missing what your trying to achieve.