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
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
When we use jQuery to retrieve the CSS values such as width and height, the unit px is included.
For example, if you have a div which is 100px wide.
<div id="eureka" style="width: 100px;"></div>Continue reading
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
Yesterday we talked about playing audio file in HTML5.
HTML5 – Play sound/music with <audio> tag @ 1
We can also take control of it using Javascript. Here is another example with a toggle link which can play and stop the music. jQuery is needed as well as the following Javascript file.
Continue reading
The Views Infinite Scroll integrates the jquery-autopager with Drupal and makes any view page behaves like a Twitter page.
1. Download the module and extract it.
2. Download the jquery-autopager to the views_infinite_scroll/js. (Download)
3. Enable the module
Continue reading
I found a excellent article about creating a drop down menu using jQuery written by Abhishek Bhardwaj. For simplicity, i merge the .js file and the .html into one file.
Continue reading
Next: Drupal 7 – Add the latest jQuery on your Drupal 7 without conflicts
The jQuery Update module allows us to update the Drupal 6 core jQuery to 1.3.2. This is definitely not enough for many 3rd party jQuery libraries. If you want to add the latest jQuery without affecting the core script, you can try the following approach which makes use of the jQuery.noConflict() and it is originally written by gala4th in his blog THERE IS NO PLACE LIKE 127.0.0.1.
Ok, now we want to add the new jQuery for a specific content. Let’s follow the custom module we created in Continue reading
A few days ago i posted an article about making a JSON request using $.getJSON().
jQuery & JSON – Make JSON GET request using jQuery.getJSON()
But i have made a mistake there because i didn’t realize the Cross Domain problem. So this article shows you how to resolve the Cross Domain issue in $.getJSON() by JSONP. Continue reading
We can also make JSON POST request using the jQuery.post() function. If you want to use GET request. please refer to the previous post.
jQuery & JSON – Make JSON GET request using jQuery.getJSON()
Update @ 2011-10-13: This example does not work for Cross Domain POST request since the Current jQuery version(1.6.4) does not allow a Cross Domain POST request. For more information, you can refer to Mark Needham – jQuery: $.post, ‘jsonp’ and cross-domain requests
So if you want to make a Cross Domain GET request. Take a look on the following post.
jQuery & JSON – Make Cross Domain Request Using jQuery.getJSON() with JSONP
Here is the new server.php Continue reading
