While developing a new site, I noticed that the MixItUp plugin I was using was having issues with Turbolinks. As you might be aware of, jQuery and Turbolinks tend to have some issues when it comes to loading on pages that use turbolinks. The first though I had was to use jquery.turbolinks which usually solved a majority of my jQuery + Turbolinks issue -- however this wasn't the case with MixItUp. After doing a bit of research, I came across an issue that was posted on the MixItUp github issues, which clearly outlined the resolution. In a nutshell, you'll basically need to destroy the instance that was created from the first mixitup call, and recall it on a 'page:load'. <script> $(function(){ // on first doc ready we instantiate mixitup $('#container').mixItUp(); // an instance now exists in the session memory }); $(window).on('page:before-change', function(){ $('#container').mixItUp('destroy'); // destroy the instance }); $(window).on('page:load', function(){ $('#container').mixItUp(); //…
Read More
When dealing with tables, majority of them will have a checkbox in the first column. In order to make it a little bit more user friendly, it is always nice to be able to tick the checkbox no matter where you click on that row - and we can do that very easily with some JavaScript! It is as simple as that. The JavaScript $(document).ready(function() { $('.dataTable tr').click(function(event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).trigger('click'); } }); }); It is as simple as that! The second line basically triggers a click when a TR (row) element under the table class "dataTable" is clicked.
Read More
A friend of mine was editing her Shopify files to try and add a "View Product Details" button, that would toggle the specific products description. She asked for my help on how this could be achieved and I decided to share it for everyone to view! The HTML <div id="desc"> <p class="clk">View Product Details</p> <div class="prod-details"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span> </div> </div> <div id="desc"> <p class="clk">View Product Details</p> <div class="prod-details"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis.</span> </div> </div> The JavaScript $(function() { $('.prod-details').hide(); $('.clk').click(function() { $(this).siblings('.prod-details').toggle(); }); }); Now whenever you click on "View Product Details", it will toggle its siblings with the class "prod-details". A simple read-more toggle!
Read More