Tag Archives: jQuery

jQuery

jQuery Isotope – Remove Isotope items without triggering relayout

5 Comments

Recently i have been working on a frontend layout task. The two jQuery plugins, Isotope and Masonry written by David DeSandro, are wonderful for laying your content in neat order. Isotope is an advanced version of Masonry and provides more powerful features. If you are new to both, you could try Masonry first.

Let’s back to the topic today. Both Isotope and Masonry provide the remove() function to withdraw the item from the dynamic layout. If you are using Masonry, the layout does not rearrange the items after the removal. On the other hand, the more powerful Isotope will relayout after the items are deleted. Actually this is a more desirable feature but this time i just want to delete those unwanted items without triggering the relayout.
Continue reading jQuery Isotope – Remove Isotope items without triggering relayout →

jQuery

jQuery Masonry – Append items does not work?

2 Comments

We could append items on the Masonry container using the appended method.

var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').append( $boxes ).masonry( 'appended', $boxes );

 

Please note that in the above example, we have to wrap the new boxes with the jQuery object. This is because the .masonry() call expects an jQuery object in the 2nd parameter.

Done =)

Reference:

jQuery

jQuery – Using animate() with fadeIn() or fadeOut() at the same time

1 Comment

We know the difference between display: none and visibility: hidden as we talked about it previously.
jQuery – Animation on Visibility

The fadeIn() and fadeOut() jQuery functions are very convenient to use but they does not allow us to add animation during the fadeIn and fadeOut process. So we have to do it with a slightly different way.
Continue reading jQuery – Using animate() with fadeIn() or fadeOut() at the same time →

jQuery

jQuery – Animation on Visibility

Leave a comment

Next: jQuery – Using animate() with fadeIn() or fadeOut() at the same time

We can hide and show any HTML elements by the fadeIn() and fadeOut() jQuery functions. Those elements will be set to display: none in CSS. Unlike setting visibility: hidden which the hidden element will still occupied some spaces in the rendered web page, the faded out element will disappear.

So if you want to have the fadeIn and fadeOut features while keeping the elements in the webpage, here is what you could do.
Continue reading jQuery – Animation on Visibility →

CMS

Drupal 7 – Add the latest jQuery on your Drupal 7 without conflicts

Leave a comment

A few months ago, i tried to add the latest jQuery to a Drupal 6 website. If you are still working on Drupal 6. Please refer to Drupal – Add Extra jQuery Library.

The approach we used in the above post does not work in Drupal 7 since drupal_set_html_head() has been renamed to drupal_add_html_head() and inline Javascript is no longer supported in this new version. So today i would like to show you another solution which works in Drupal 7.
Continue reading Drupal 7 – Add the latest jQuery on your Drupal 7 without conflicts →