jquery
Filling in the 'To'-date fields with the 'From'-date values using jQuery
Many thanks to Bruno De Bondt for posting this snippet at krimson.be!
When creating nodes in Drupal that have one or more date fields, it can be handy if the values for the 'To' date fields (date & time) are automatically changed to the values that were filled in the 'From' date fields. For example, when events take place on the same day, this can ease data input and make life easier for authors.
Dynamically shortened Text with “Show More” link using jQuery
Use this code to create a dynamic read more/less box
Easily Add New jQuery Plugins to Your Drupal Site
There are many cool jQuery plugins out there that solve a whole host of problems and add all kinds of sweet functionality to your site. One issue I have had in the past is just trying to manage all these plugins. Where do I put them? How do I get the functionality into the code? I like to keep things tidy, libraries in the sites/all/libraries folder, custom modules in sites/all/modules/custom, contrib modules in sites/all/modules/contrib, thanks for that tip Jonathon! It helps to make me feel better organized and in control.
Preload Images with JQuery
In a recent project I had an image heavy page and noticed that sometimes, certain images would not load for some reason. I used the technique found here to ensure that my images were being loaded.
I created a quick file named preload_images.js and put the following into it.
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)Then in my themes .info file, I added the following
scripts[] = js/preload_images.jsNext, I added this to my page.tpl.php in the head section
<script type="text/javascript">
jQuery.preLoadImages("/images/home-menu-block.png", "/images/button-about.png");
</script>Then a simple visit to the performance page mysite.com/admin/settings/performance to clear the cache.
Hide and Show the Login Block
I found this little gym written by Jim Skowyra at http://anthonymedia.com/content/hide-and-show-login-block.
A member of the Western Massachusetts Drupal Users Group posed the question, 'what techniques do you use to hide or display a login block?' As this is a feature that gets request with some regularity, I started playing around with a jQuery solution. You can see it in action by pressing the login link in the upper right corner of this site, just under the primary links.
Here's how I did it.
First, I created a file called login.js that contained this code:
Google Map with 10 Random Points
Following is the code to produce a google map with 10 random points.
I modified the code found here to work with Drupal 6, yay!
Quick and Easy Beauty Tips
On a recent project I wanted to use the jQuery BeautyTips module to help me convey more information to the user while saving space on the page.
This plugin was created by Jeff Robbins of Lullabot fame and has a project page at this link.
jQuery Smooth Scrolling Internal Links
<?php
drupal_add_js(
' $(document).ready(function()
{
$("a[href*=#]").click(function() {
if (location.pathname.replace(/^\//,"") == this.pathname.replace(/^\//,"") && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $("[id=" + this.hash.slice(1) + "]");
if ($target.length) {
var targetOffset = $target.offset().top;
$("html,body").animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});', /*end document.ready function*/
'inline'
);
?>Then in the body put
jQuery Countdown Plugin Example
<?php
echo '<div class="countdown">December 25. 2009!</div>';
jquery_countdown_add(".countdown", array('until' => 'December 25. 2009', "onExpiry" => "finished"));
drupal_add_js("function finished() { alert('You are done!'); }", 'inline');
?>