Bubblr – JQuery bubbles plugin

The bubblr JQuery plugin allows you to add a bubbling animations to any canvas element. It allows you to specify options such as the number of bubbles, the colour/background colour of the canvas (including “transparent”) and the size of the bubbles.


Static screenshot of the bubbles in action

Applications for this plugin include;

  • Add lifelike movement to elements such as drinks, fish tanks and aquatic scenes.
  • Create other particle effects such as smoke, fire and starship warp cores.
  • Send your users into a hypnotic trance – nobody can resist the power of bubblr!
  • Works on all HTML5 compatible browsers, including both robot and fruit-based tablets and phones.

Full source code is available for download here: https://github.com/mikeyhogarth/bubblr

Demo of bubbr-y goodness available here: http://bubblr-demo.heroku.com/

Licensed under GPL and MIT.

Advertisements

Submitting a form using Jquery ajax

This code will work for any scenario where you want to post back a form to the server asynchronously, and then render a response. The use of the “on” keyword here (JQ1.7 and above only) allows the event to stay attached to the element even if it’s posted back later. The scenario I used this was in an “add comment” type form, where the form would fade out on submit, and then fade back in with either a message stating that the comment was received successfully, or alternatively would re-display the form with error messages if it wasn’t.


    $(document).ready(function() {       
    
        $(document).on("click", "#formSelector" , function() {
            var $form = $(this).parents('form');

            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: $form.serialize(),
                error: function(xhr, status, error) {
                    //Actions to take on error
                },
                success: function(response) {
                    //Actions to take on success
                }
            });

            return false; //This stops actual postback (some browsers will still try)
        });
    });

Limit the length of an input with JQuery

For instances where a textbox/textarea need to be limited to a specific number of characters, one way of achieving this is with a bit of JQuery. Simply give the input a class (in this case, “maxThirtyCharacters”) and set a “maxChars” variable to the appropriate number. There will be tidier ways of doing this, which you can adapt to your specific situation, but the very basic version goes a little like this;

    $(".maxThirtyChars").keyup(function() {
        var maxChars = 30;
        if ($(this).val().length > maxChars) {
            $(this).val($(this).val().substr(0, maxChars));
            
            //Take action, alert or whatever suits
            alert("This field can take a maximum of 30 characters");
        }
    });

remember to also check server side though.