Ajax in JS and PHP

Examples:

Instead of using click(function() to avoid race conditions

To eliminate race conditions use:


        function coolFunction() {
            //Do first thing;
            //Do next thing that was beat out by race before;
        }
        $(".item").on("click", coolFunction);

Wrap unwrapped elements in blocks, like sections.

$('element').each(function(){ // walk through children and wrap them

$(this).find('h1, p').wrapAll('<section class="row" />');

        // or wrap in multiple elements

        $(this).find('h1, p').wrapAll('<section class="row"><div class="wrapper"></div></section>');

        // OR better yet, without find

        $(this).nextUntil('h2').addBack().wrapAll('<section class="row"><div class="wrapper"></div></section>');
        
        });

JS Video

Excellent site: http://www.unheap.com/media/audio-video/

Background video fallback for touch:

Looks like you're already using Modernizr.js - you can use it to detect touch-event support, and then respond accordingly. To target via css, use the classes that Modernizr is selectively applying to the html element.

.touch video { ... } .no-touch video { ... }

To target via js:

if (Modernizr.touch) { ... } if (!Modernizr.touch) { ... }

If you like, there are also some good libraries out there to help manage background videos - check the Media section on Unheap for a bunch of options.

Also, I'd be a little circumspect about using autoplaying background videos. They look cool, sure, but they can create some issues with performance, accessibility, load times, etc.

http://stackoverflow.com/questions/28115266/background-video-with-image-fallback-for-touchscreens

Mobile Targeting

Update by dekin88

There is a JavaScript API built in for detecting media. Rather than using the above solution simply use the following:

$( document ).ready(function() {      
            var isMobile = window.matchMedia("only screen and (max-width: 760px)");

            if (isMobile.matches) {
                //Conditional script here
            }
         });

Match column height using JS.

Add this just before

        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <!-- below contains jQuery MatchHeight .js code. Used on Mendofutures.org -->
        <script src='<?php echo $config->urls->templates . "scripts/main.js?v=02"; ?>'></script>
        <script type="text/javascript">
            (function() {

                /* matchHeight example */

                $(function() {

                    // apply matchHeight to each item container's items
                    $('section > .item').matchHeight();
                });

            })();
        </script>