15 January 2010

FX Queues plugin and jQuery 1.4

So jQuery1.4 has been finally released and, though I haven't been able to test the FX Queues plugin yet with it, I already got some feedback mentioning it's not working.

During the next couple of days I will be releasing a new version compatible with jQuery 1.4 - It will be a good way to get back to some Javascript hacking after many months with just Ruby in my head :)

Stay tuned!

Update:

So it just took me an hour to do the update to 1.4 -- seems like jQuery.queue() is behaving a little different.

Since the plugins site for 1.4 is still to be released, for now you can grab the code from GitHub: http://github.com/lucianopanaro/jQuery-FxQueues/tree/jQuery1.4


15 February 2009

FxQueues update: now compatible with jQuery 1.3.1

For all FxQueues plugin users, I just pushed a new version (2.0.3) that is only compatible with jQuery 1.3.x, since many tests and the main example under 2.0.2 weren't working with jQuery's latest version.

So if you are using jQuery 1.3.1, you should be using FxQueues 2.0.3, otherwise you can stick to 2.0.2, as only internal changes have been done and there are no new features.


11 January 2009

Update: Creating a news carousel with jQuery, now with time based switching

This is just a simple and quick update on the Creating a news carousel with jQuery post.

After reading this comment, and going through the code, I decided to implement the time-based switching functionality and also clean up the code a little bit (check it out here).

The additions made (along with some code cleaning) were:

  • Append a simple div that will shrink while the picture is shown and reinitialized when the picture is switched.
  • Add a setInterval call that will do the picture switching (and the new div's animation).

Update 01/12: I added some fixes to the code

  • Use the image's load event to calculate each individual width. When all images are loaded, then the carousel is initiated.
  • The animate_timer function now stops all animations on the timer div before reinitializing the animation
Update 01/27: Even more fixes :)
  • Work with cases were images are already in cache and load event is fired before we attach to it.
  • Fixed the way the news animation was calculated.
  • Added 2 more news to help test it better.

So here's the new javascript that will do this:

$(function() {
    var carousel   = $('#news_carousel');
    var news       = carousel.find('ul.news');
    var controls   = null; // Will hold the ul with the controls
    var timer      = null; // Will hold the timer div
    var wait       = 5000; // Milliseconds to wait for auto-switching
    var widths     = [];   // Will hold the widths of each image
    var items_size = news.find('li').length;
    var initialized = false;

    if (!items_size) { return; }

    // Controls html to append
    var controls_str = '<ul class="controls">';
    for ( var i = 1; i <= items_size; i++) {
       controls_str += '<li><a href="#">' + i + '</a></li>';
    }
    controls_str += '</ul>';

    // Cache the controls list
    controls = carousel.append(controls_str).find('ul.controls');

    // Make the first button in controls active
    controls.find('li:first a').addClass('active');

    // Hook to the controls' click events
    controls.find('li a').click(function(event) {
      move_news( $(this) );
      return false;
    });

    // Append the timer and cache it
    timer = carousel.append('<div class="timer"></div>').find('div.timer');

    // Store each item's width and calculate the total width
    news.find('li img')
        .each(function(i, e) {
            widths[i] = $(e).width();
            if ( all_images_loaded() ) { init_carousel(); }
        })
        .load(function(e) {
            var i = news.find('li img').index(this);
            widths[i] = $(this).width();
            if ( all_images_loaded() ) { init_carousel(); }
        });


    function all_images_loaded() {
      if (items_size == widths.length) && (jQuery.inArray(0, widths)  1 ) {
        return false;
      }

      var current_active = controls.find('li a.active');

      if (new_active == 'next') {
        var next = current_active.parent().next().find('a');

        if ( !next.length ) { next = controls.find('li:first a'); }

        new_active = next;
      }

      var current_index = parseInt(current_active.text(), 10) - 1;
      var new_index     = parseInt(new_active.text(), 10) - 1;
      var move_to       = new_index - current_index;


      if (!move_to) { return false; }

      var direction = (move_to > 0)? '-=': '+=';

      var move   = 0;
      var bottom = Math.min(current_index, new_index);
      var top    = Math.max(current_index, new_index);

      while (bottom < top) {
        move += widths[bottom];
        bottom++;
      }

      news.animate({marginLeft: direction + move }, 500);
      new_active.addClass('active');
      current_active.removeClass('active');
    }

    function animate_timer() {
      timer.stop().css({width: '100px'}).animate({width: '1px'}, wait);
    }

    // Initializer, called when all images are loaded
    function init_carousel() {
      if (initialized) { return false; }

      // Set the news ul total width
      var width = 0;
      for( var i = 0; i < widths.length; i++) { width += widths[i]; }
      news.width(width);

      // Make the news change every X seconds
      setInterval(function() { move_news('next'); animate_timer(); }, wait);
      animate_timer();

      initialized = true;
    }
});

11 January 2009

jQuery Object Cache Update

After discussing with Andrew Luetgers some improvements that could be done to the Object Cache plugin, I updated the plugin to a new version.

The new improvement is that now you can store a selection automatically:

// Will store in cache $("#sidebarNav") with #sidebarNav key
$$("#sidebarNav");

This will let you avoid doing $("#menu").cache("menu"), which is a bit redundant. Now by doing $$("#menu") you will be able to store it in the cache and retrieve it automatically. There is also a reload option that you can pass to that call in order to, well, reload the the cached object with that selection:

// Will reload #sidebarNav with $("#sidebarNav")
$$("#sidebarNav", true);

You can grab the new version of the Object Cache plugin here.


20 November 2008

New jQuery plugin: Object Cache

Inspired by Benjamin Sterling's "Better jQuery Code" article I decided to develop a simple plugin to make his first point (Caching) easier... nothing fancy, just a few methods, but you will hopefully find it useful.

Its objective is to let you store a jQuery object with a simple key in a global cache, so that you can access the same object easily, without having to write the same selection, filtering or traversing code (i.e: $("#main < p") or $("#main").children(".selected").eq(0)).

Here is how it works:

// Store in cache - Returns current object
$("#mainNav").cache("main_navigation");

// Retrieve from cache - Returns cached object
$$("main_navigation"); // or jQueryCache("main_navigation");

// Remove from cache
$$.remove("main_navigation");

// Clear Cache
$$.clear();

// Load jQueryCache with noConflict to avoid overriding window.$$
$$.noConflict();

There is a lot of room for improvement, which will be done depending on the feedback I get, so feel free to contact me with any ideas or corrections you might come up with.

You can get the Jquery Object Cache plugin here.


05 October 2008

Creating a news carousel with jQuery

Last week I had to do a news carousel for a project I'm developing. It had been a while since I had the chance to do something interesting with jQuery, so I wanted to share the experience of how easily you can build similar widgets for your site.

So first let's take a look at what we want to build.

Now, I know that there are a few plugins out there for jQuery that probably can do this, but the point of this post is to show how simple it is to create something like this with a few lines of jQuery and CSS.

Let's begin by defining how we will organize the content. Being a list of news, we can either use an ordered or an unordered list.

<div id="news_carousel">
  <ul class="news">
    <li>
      <img src="" alt="" />
      <strong><a href="#">Title</a></strong>
      <span>Description</span>
    </li>
  </ul>
</div>

Now that we have our content, we have to style it. The keys here are to:

  • Align the list elements one next to the other.
  • Make #news_carousel just show one list element at a time
  • Use relative and absolute positioning to show the titles and descriptions over each image

Here's the CSS used in the sample with some comments:

 #news_carousel {
     width: 444px;
     height: 333px;
     margin: 0;
     padding: 0;
     overflow: hidden;  /* this will make only show 1 li */
     position: relative;
  }
  #news_carousel ul.news {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  #news_carousel ul li {
    margin: 0;
    padding: 0;
    position: relative;
    /* to do absolute positioning of the child paragraph */
    float: left;
    /* align one next to the other */
  }
  #news_carousel ul.news li p {
    position: absolute;
    bottom: 10px;
    left: 0;
    margin: 5px;
  }
  #news_carousel ul.news li p strong {
    display: block;
    padding: 5px;
    margin: 0;
    font-size: 20px;
    background: #444;
  }
  #news_carousel ul.news li p span {
    padding: 2px 5px;
    color: #000;
    background: #fff;
  }
  #news_carousel ul.controls {
    position: absolute;
    top: 0px; right: 20px;
    list-style-type: none;
  }
  #news_carousel ul.controls li a {
    float: left;
    font-size: 15px;
    margin: 5px;
    padding: 2px 7px;
    background: #000;
    text-decoration: none;
    outline: none;
  }
  #news_carousel ul.controls li a.active {
    border: 2px solid #ccc;
  }

The Javascript code is pretty self-explanatory:

var news_carousel = function() {
    var items_size = $('#news_carousel ul li').length;

    if (items_size == 0) return;

    // Calculate the total width and set that value to
    //   the ul.news width
    // Store each item width
    var width = 0;
    var widths = [];
    $('#news_carousel ul.news li img').each(function(i, e) {
      widths[i] = $(e).width();
      width += widths[i];
    });

    $("#news_carousel ul.news").width(width);

    // Append the controls
    controls = '<ul class="controls"><li><a class="active" href="#">1</a>';
    for ( var i = 2; i <= items_size; i++) {
       controls += '</li><li><a href="#">' + i + '</a></li>';
    }
    controls += '</ul>';
    $('#news_carousel').append(controls);

    $('#news_carousel ul.controls li a').click(function(event) {
      // if the ul is already moving, then do nothing
      if ($("#news_carousel ul.news:animated").length > 0) return false;

      var clicked_item = $(event.target);
      var current_active = $("#news_carousel ul.controls li a.active");
      var current_index = parseInt(current_active.text());
      var new_index = parseInt(clicked_item.text());
      var move = new_index - current_index; //how many items it should be moved

      if (move != 0) {
        direction = (move > 0)? "-=": "+=";
        $('#news_carousel ul.news')
          .animate({marginLeft: direction + widths[new_index-1] }, 300);
        clicked_item.addClass("active");
        current_active.removeClass("active");
      }

      return false;
    });
  }();

And that's it! Around 100 lines of code and you have your own home-made news carousel. Hope you found it useful! :)

(Pictures taken from: http://www.flickr.com/photos/christing/268490607/ and http://www.flickr.com/photos/11717181@N02/1170861540/.)


13 March 2008

New skin, new (old) plugin

When I launched this blog a few months ago I promised myself I would post at least weekly. Well, it is pretty obvious that I haven't. Even more, I was just able to do a few posts commenting on some news I found interesting.

So the inmediate question that comes up is simply "why?" . Well, there are many reasons why:

  • Study comes first.
  • Work comes second (well, it comes first sometimes).
  • I couldn't find time to write (a sort of corollary of the first two) anything I liked.
  • I hated the template I had.

From these bullets, there is one that can be (sort of) easily fixed. Creating a new appealing template that would make me want to post every week can't be that hard, right? Well, it is, especially if you are a designer-wannabe. It took me a long time to come up with a template that I liked, but I am pretty glad with the result.

In the meantime, I came across a plugin from John Resig with similar functionality. Since it's core implementation was far better than mine, I updated the jQuery FxQueues Plugin to a 2.0 version, by merging John's and my code (I also created a new example page and some unit tests).

So now that I have a template that I like there is one thing less preventing me from writing new posts. I have a few ideas for some posts and hopefully you will be able to read them soon.

Hope you like this new template as I do!


06 February 2008

jQuery UI 1.5a and jQuery Enchant 1.0a!

Finally we have alpha releases of jQuery UI 1.5 and jQuery Enchant 1.0 (which is the brand new effects library).

Of course it's far from being production ready, but it is a great preview of what the official releases will be. I can't wait to give jQuery Enchant a try!


18 November 2007

New jQuery queueing plugin

I'm beginning this blog with a jquery plugin I had to develop a few weeks ago for a project I'm working on.

Even though jQuery is a great javascript library, its latest version brings a queue control, it doesn't work for different elements. That is, if you had something like

$("#myDiv").animate({fontSize: "30px"}).animate({marginLeft: "40px"})

it would queue the animations. But what if you wanted to be able to queue different elements (just like Scriptaculous allows)? Well, that's the reason why I developed the jQuery Fx Queues plugin. So go ahead and check it out, and feel free to send me your comments or any bugs you find.