Javascript

D-talk

Quicksearch

Show tagged entries

Categories



All categories

Tuesday, October 19. 2010

Forms, buttons and prototypeJS's ... Posted by Mark van der Velden in Javascript at 12:36

Comments (0)
Trackbacks (0)
Defined tags for this entry: , , ,

Forms, buttons and prototypeJS's getInputs()

In forms you use input elements to send your form. But you can also use "button" elements to achieve the same goal. Quite recently someone committed changes into a framework I use often and changed the "input" elements to "button" elements. Normally this is no problem, but in this case it broke some Javascript I had going on.

I used to use the following:

$('myForm').getInputs('submit').each(function (button) {
    // ..
});

But with this function you don't get any "button" elements, to solve this situation I changed it to:

$('myForm').select('button', 'input[type=submit]').each(function (button) {
    // ..
});

It works fine however simply filtering on 'button' might be too greedy and some tweaking might be required. I use this to to track down which button was pressed by the user and act accordingly (e.g. "Save and close" versus "save").

Thursday, October 29. 2009

Javascript printing a popup window Posted by Mark van der Velden in Javascript at 15:25

Comments (3)
Trackbacks (0)

Javascript printing a popup window

For the impatient, a working example:http://dynom.nl/jquery/print_popup.html

 

It seems so easy, but I had some trouble printing a popup window containing an image. Whenever I printed the page using the following code it failed.

/**
 * FAIL
 */
function printIt() {
        var win = window.open('/path/to/image.jpg', 'Image', 'resizable=yes,...');
        if (win) {
                win.focus();
                win.print();
        }

        return false;
}
 

 

So I changed from opening a URL to writing a IMG tag to the opened window, which works like a charm.

/**
 * Works like a charm.
 */
function printIt() {
        var win = window.open('', 'Image', 'resizable=yes,...');
        if (win) {
                win.document.writeln('<img src="/path/to/image" alt="image">');
                win.document.close();
                win.focus();
                win.print();
        }

        return false;
}

 

And to put it in jQuery terms:

/**
 * To put it in jQuery terms:
 */
Popup = {

        init : function () {
                $('a#action_print').bind('click', Popup.printIt);
        },

        printIt : function () {
                var win = window.open('', 'Image', 'resizable=yes,...');
                if (win.document) {
                        win.document.writeln('<img src="'+ $(this).attr('href') +'" alt="image" />');
                        win.document.close();
                        win.focus();
                        win.print();
                }

                return false;
        }
}

$(document).ready(function () {
        Popup.init();
});

Tuesday, October 6. 2009

Sorting of lists in jQuery Posted by Mark van der Velden in Javascript at 13:00

Comments (0)
Trackbacks (0)
Defined tags for this entry: , , , , , , ,

Sorting of lists in jQuery

A while back I posted a simple sorting algorithm for number sorting, but it doesn't really do the trick for regular strings (e.g. anchors). But since I needed one recently I wrote another small and very simple sorting solution.

For a working example, see: http://dynom.nl/jquery/listsort.php

My.List = {
        Sort : function (listSelector) {
                var sortedElements, left, right;

                // If we have any list items to sort on
                if ($(listSelector + ' li').length > 0) {

                        // Remove the items from the DOM
                        sortedElements = $(listSelector + ' li').remove();

                        // Sort, using a custom sorting and compare by anchor contents
                        sortedElements.sort(function (a, b) {
                                left = $(a).children('a').html();
                                right = $(b).children('a').html();

                                if (left > right) {
                                        return 1;
                                } else if (right < left) {
                                        return -1;
                                } else {
                                        return 0;
                                }
                        });

                        // Place the items back on the DOM
                        $(listSelector).append(sortedElements);
                }
        }
};

Again, the source should be self explanatory

 

Tuesday, October 6. 2009

Click many, call once with jQuery Posted by Mark van der Velden in Javascript at 12:28

Comments (0)
Trackbacks (0)
Defined tags for this entry: , , ,

Click many, call once with jQuery

Recently I wanted to improve they way some anchors where handled in my recent project, it works a bit like adding and removing items to/from a list. But it was possible to trick the interface by quickly clicking multiple times on a link before the AJAX request was finished, while the back-end handled this without any problems, the interface for the visitor couldn't. And since I'm a neat freak and I had a few minutes to spare, I came up with the following.

A working example: http://dynom.nl/jquery/clickmanycallonce.html.

My.items = {
        init : function () {
                // Bind the real item only once, and the dummy item permanently
                // This way the *real* item is only called once, regardless of the amount of clicks
                // And the link remains clickable but doesn't trigger the browser to follow it.
                $('ul>li>a.item').one('click', My.items.real_action).bind('click', My.items.dummy_action);
        },

        dummy_action : function () {
                $(this).html( $(this).html() + '.' );
                return false;
        },

        real_action : function () {
                /* Fancy AJAX call, that shouldn't be executed more then once for every click */
                $('div#frame').html($('div#frame').html() + "<br>\nCalling 'real_action' for anchor: " + $(this).html());
                return false;
        }
};

// When the DOM is ready
$(document).ready(function () {

        // Attach the filter to our input and list
        My.items.init();

});
 

While the code is fairly self explanatory and quite simple here the steps in a bit more detail:

  1. Unobtrusively binding, as soon as the DOM is ready.
  2. Binding the real action handler on 'click' action with jQuery's 'one()' event handler
  3. Binding the dummy action handler on 'click' action with the 'bind()' event handler

This situation is probably only favorable if the item you click is removed from the DOM (or has actions re-bound after the call) else it might not be what you want.

Wednesday, June 24. 2009

jQuery simple unordered list filter Posted by Mark van der Velden in Javascript at 15:50

Comments (6)
Trackbacks (0)
Defined tags for this entry: , , , , , , ,

jQuery simple unordered list filter

I needed a simple filter system on a unordered list. The goal is to filter 'realtime' based on what a user is typing. I came up with the following, if you have any suggestions and/or performance tips feel free to drop a line!

The HTML:

The blog software is messing with the HTML, for a working example with ungarbled code. Look at the bottom of this post.

</p><div>
        <input name="filter" id="search_filter" type="text">
</div><div id="titles">
        <ul>
                <li><a href="http://blog.dynom.nl/path/to/item/1">Item 1</a></li>
                <li><a href="http://blog.dynom.nl/path/to/item/2">Item 2</a></li>
                <li><a href="http://blog.dynom.nl/path/to/item/3">Item 3</a></li>
        </ul>
</div>

 

The Javascript

var My = {}     
My.List = {
        Filter : function (inputSelector, listSelector) {

                // Sanity check 
                var inp, rgx = new RegExp(), titles = $(listSelector), keys;
                if (titles.length === 0) {
                        return false;
                }

                // The list with keys to skip (esc, arrows, return, etc)
                // 8 is backspace, you might want to remove that for better usability
                keys = [ 13, 27, 32, 37, 38, 39, 40, 8 ];

                // binding keyup to the unordered list
                $(inputSelector).bind('keyup', function (e) {
                        if (jQuery.inArray(e.keyCode, keys) >= 0) {
                                return false;
                        }

                        // Building the regex from our user input, 'inp' should be escaped
                        inp = $(this).attr('value');
                        rgx.compile(inp, 'im');
                        titles.each(function () {
                                if (rgx.source !== '' && !rgx.test($(this).html())) {
                                        $(this).parent('li').hide();
                                } else {
                                        $(this).parent('li').show();   
                                }
                        });
                });
        }
};

// When the DOM is ready
$(document).ready(function () {
        // Attach the filter to our input and list
        My.List.Filter('input#search_filter', '#titles>ul>li>a');
});
 

Working example

Visit http://dynom.nl/jquery/list.php for a working example.

Tuesday, May 26. 2009

Javascript cookie helper class Posted by Mark van der Velden in Javascript at 12:00

Comments (2)
Trackbacks (0)
Defined tags for this entry: , ,

Javascript cookie helper class

Little original perhaps, but I thought I'd share this cookie class. It makes my life a little easier,

My.Cookie = {

        /**
         * Set a cookie
         * @param {string} n name
         * @param {scalar} v value
         * @param {int} days
         */     
        set: function (n, v, days) {
                var e = '', d;
                if (days) {
                        d = new Date();
                        d.setTime(d.getTime() + (days * 86400000));
                        e = "; expires=" + d.toGMTString();
                }
                document.cookie = n + "=" + v + e + "; path=/";
        },
       
        /**
         * get a cookie
         * @param {string} n name
         */
        get: function (n) {
                var match = n + "=", c = '', ca = document.cookie.split(';'), i;
                for (i = 0; i < ca.length, c=ca[i]; i++) {
                        if (c.indexOf(match) === 0) {
                                return c.substring(match.length, c.length);
                        }
                }

                return null;
        },
       
        /**
         * Delete a cookie
         * @param {string} n name
         */
        del: function (n) {
                this.set(n, "", -1);
        }
};

 

Monday, May 11. 2009

Javascript unordened list sorting Posted by Mark van der Velden in Javascript at 15:19

Comment (1)
Trackbacks (0)
Defined tags for this entry: , , , , , , ,

Javascript unordened list sorting

I spent some time figuring out a way to sort unordened lists, when dynamically (AJAX) adding/removing items. I had some problems with the typical '10 being greater then 1, but lesser then 2', so I took a simple bubblesort algorithm and tweaked it with the string length. It's probably not the fastest or most elegant way of doing it, but it works like a charm. If you have any improvement points, don't be shy and drop a line.

 

The algorithm:
This is the search algorithm I used, (which I found here) and I simply added the difference in string length to the equation to make sure that '10' is greater then '1', causing human-natural sorting.


// Search algorithm, if lesser then 0 it's smaller then the current item.
// If it's greater then 0, it's "larger" then the current item.
cmpr =  (
                        (newItem > curListItem) - (curListItem > newItem)
                        +
                        (newItem.length - curListItem.length)
                );


Before: Title 1, Title 10, Title 13, Title 2, Title 3, Title 4
After: Title 1, Title 2, Title 3, Title 4, Title 10, Title 13



Read on to see a implementation example...

Continue reading "Javascript unordened list sorting"
« previous page   (Page 1 of 1, totaling 7 entries)   next page »
Frontpage

Calendar

Back February '12
Mon Tue Wed Thu Fri Sat Sun
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29        

External links