updown › Basic Usage

Below is a very simple example that illustrates the custom events fired by updown. Resize your window past any of the breakpoints listed in the table and watch the appropriate events get fired.

Example

Resize / Event data
Breakpoints
Current width
Triggered events

Code for this example

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    // Add a custom breakpoint
    var options = { breakpoints: [640] };
    var ud = new updown(options);

    // Dynamically create the event markers based on the registered breakpoints returned by updown()
    var trigger_list = $('#data-events');
    for(i=0; i<ud.length; i++) {
        $('<div class="updown-trigger" id="trigger-' + ud[i] + '-down"></div>').html(ud[i] + '.down').appendTo(trigger_list);
        $('<div class="updown-trigger" id="trigger-' + ud[i] + '-up"></div>').html(ud[i] + '.up').appendTo(trigger_list);
    }
    $('#data-breakpoints').html(ud.join(', '));

    // Bind our custom events
    $(window).on({
        // 320
        '320.up': function() { $('#trigger-320-up').addClass('updown-triggered') },
        '320.down': function() { $('#trigger-320-down').addClass('updown-triggered') },
        // 480 
        '480.up': function() { $('#trigger-480-up').addClass('updown-triggered') },
        '480.down': function() { $('#trigger-480-down').addClass('updown-triggered') },
        // 640 
        '640.up': function() { $('#trigger-640-up').addClass('updown-triggered') },
        '640.down': function() { $('#trigger-640-down').addClass('updown-triggered') },
        // 768 
        '768.up': function() { $('#trigger-768-up').addClass('updown-triggered') },
        '768.down': function() { $('#trigger-768-down').addClass('updown-triggered') },
        // 960 
        '940.up': function() { $('#trigger-940-up').addClass('updown-triggered') },
        '940.down': function() { $('#trigger-940-down').addClass('updown-triggered') },
        // 1024
        '1024.up': function() { $('#trigger-1024-up').addClass('updown-triggered') },
        '1024.down': function() { $('#trigger-1024-down').addClass('updown-triggered') },
        // 1280 
        '1280.up': function() { $('#trigger-1280-up').addClass('updown-triggered') },
        '1280.down': function() { $('#trigger-1280-down').addClass('updown-triggered') },

        // Generic resize events 
        resize: function() {
            $('#data-width').empty().html($(this).width() + 'px');
            $('.updown-triggered').removeClass('updown-triggered');
        }
    });

    $(window).trigger('resize');