init

js/app.js

@@ -0,0 +1,413 @@
+'use strict';
+
+/*
+ * A Design by GraphBerry
+ * Author: GraphBerry
+ * Author URL: http://graphberry.com
+ * License: http://graphberry.com/pages/license
+ */
+ jQuery(document).ready(function ($) {
+
+    var lastId,
+    topMenu = $("#top-navigation"),
+    topMenuHeight = topMenu.outerHeight(),
+        // All list items
+        menuItems = topMenu.find("a"),
+        // Anchors corresponding to menu items
+        scrollItems = menuItems.map(function () {
+            var href = $(this).attr("href");
+            if(href.indexOf("#") === 0){
+                var item = $($(this).attr("href"));
+                if (item.length) {
+                    return item;
+                }
+            }
+        });
+
+    //Get width of container
+    var containerWidth = $('.section .container').width();
+    //Resize animated triangle
+    $(".triangle").css({
+        "border-left": containerWidth / 2 + 'px outset transparent',
+        "border-right": containerWidth / 2 + 'px outset transparent'
+    });
+    $(window).resize(function () {
+        containerWidth = $('.container').width();
+        $(".triangle").css({
+            "border-left": containerWidth / 2 + 'px outset transparent',
+            "border-right": containerWidth / 2 + 'px outset transparent'
+        });
+    });
+
+
+    //Initialize header slider.
+    $('#da-slider').cslider();
+
+    //Initial mixitup, used for animated filtering portgolio.
+    $('#portfolio-grid').mixitup({
+        'onMixStart': function (config) {
+            $('div.toggleDiv').hide();
+        }
+    });
+
+    //Initial Out clients slider in client section
+    $('#clint-slider').bxSlider({
+        pager: false,
+        minSlides: 1,
+        maxSlides: 5,
+        moveSlides: 2,
+        slideWidth: 210,
+        slideMargin: 25,
+        prevSelector: $('#client-prev'),
+        nextSelector: $('#client-next'),
+        prevText: '<i class="icon-left-open"></i>',
+        nextText: '<i class="icon-right-open"></i>'
+    });
+
+
+    $('input, textarea').placeholder();
+
+    // Bind to scroll
+    $(window).scroll(function () {
+
+        //Display or hide scroll to top button 
+        if ($(this).scrollTop() > 100) {
+            $('.scrollup').fadeIn();
+        } else {
+            $('.scrollup').fadeOut();
+        }
+
+        if ($(this).scrollTop() > 130) {
+            $('.navbar').addClass('navbar-fixed-top animated fadeInDown');
+        } else {
+            $('.navbar').removeClass('navbar-fixed-top animated fadeInDown');
+        }
+
+        // Get container scroll position
+        var fromTop = $(this).scrollTop() + topMenuHeight + 10;
+
+        // Get id of current scroll item
+        var cur = scrollItems.map(function () {
+            if ($(this).offset().top < fromTop)
+                return this;
+        });
+
+        // Get the id of the current element
+        cur = cur[cur.length - 1];
+        var id = cur && cur.length ? cur[0].id : "";
+
+        if (lastId !== id) {
+            lastId = id;
+            // Set/remove active class
+            menuItems
+            .parent().removeClass("active")
+            .end().filter("[href=#" + id + "]").parent().addClass("active");
+        }
+    });
+
+    /*
+    Function for scroliing to top
+    ************************************/
+    $('.scrollup').click(function () {
+        $("html, body").animate({
+            scrollTop: 0
+        }, 600);
+        return false;
+    });
+
+
+    $(window).load(function () {
+        function filterPath(string) {
+            return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
+        }
+        $('a[href*=#]').each(function () {
+            if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) {
+                var $targetId = $(this.hash),
+                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
+                var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
+
+                if ($target) {
+
+                    $(this).click(function () {
+
+                        //Hack collapse top navigation after clicking
+                        topMenu.parent().attr('style', 'height:0px').removeClass('in'); //Close navigation
+                        $('.navbar .btn-navbar').addClass('collapsed');
+
+                        var targetOffset = $target.offset().top - 63;
+                        $('html, body').animate({
+                            scrollTop: targetOffset
+                        }, 800);
+                        return false;
+                    });
+                }
+            }
+        });
+});
+
+    /*
+    Sand newsletter
+    **********************************************************************/
+    $('#subscribe').click(function () {
+        var error = false;
+        var emailCompare = /^([a-z0-9_.-]+)@([0-9a-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
+        var email = $('input#nlmail').val().toLowerCase(); // get the value of the input field
+        if (email == "" || email == " " || !emailCompare.test(email)) {
+            $('#err-subscribe').show(500);
+            $('#err-subscribe').delay(4000);
+            $('#err-subscribe').animate({
+                height: 'toggle'
+            }, 500, function () {
+                // Animation complete.
+            });
+            error = true; // change the error state to true
+        }
+
+        if (error === false) {
+            $.ajax({
+                type: 'POST',
+                url: 'php/newsletter.php',
+
+                data: {
+                    email: $('#nlmail').val()
+                },
+                error: function (request, error) {
+                    alert("An error occurred");
+                },
+                success: function (response) {
+                    if (response == 'OK') {
+                        $('#success-subscribe').show();
+                        $('#nlmail').val('')
+                    } else {
+                        alert("An error occurred");
+                    }
+                }
+            });
+        }
+
+        return false;
+    });
+
+    /*
+Sand mail
+**********************************************************************/
+$("#send-mail").click(function () {
+
+        var name = $('input#name').val(); // get the value of the input field
+        var error = false;
+        if (name == "" || name == " ") {
+            $('#err-name').show(500);
+            $('#err-name').delay(4000);
+            $('#err-name').animate({
+                height: 'toggle'
+            }, 500, function () {
+                // Animation complete.
+            });
+            error = true; // change the error state to true
+        }
+
+        var emailCompare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
+        var email = $('input#email').val().toLowerCase(); // get the value of the input field
+        if (email == "" || email == " " || !emailCompare.test(email)) {
+            $('#err-email').show(500);
+            $('#err-email').delay(4000);
+            $('#err-email').animate({
+                height: 'toggle'
+            }, 500, function () {
+                // Animation complete.
+            });
+            error = true; // change the error state to true
+        }
+
+
+        var comment = $('textarea#comment').val(); // get the value of the input field
+        if (comment == "" || comment == " ") {
+            $('#err-comment').show(500);
+            $('#err-comment').delay(4000);
+            $('#err-comment').animate({
+                height: 'toggle'
+            }, 500, function () {
+                // Animation complete.
+            });
+            error = true; // change the error state to true
+        }
+
+        if (error == false) {
+            var dataString = $('#contact-form').serialize(); // Collect data from form
+            $.ajax({
+                type: "POST",
+                url: $('#contact-form').attr('action'),
+                data: dataString,
+                timeout: 6000,
+                error: function (request, error) {
+
+                },
+                success: function (response) {
+                    response = $.parseJSON(response);
+                    if (response.success) {
+                        $('#successSend').show();
+                        $("#name").val('');
+                        $("#email").val('');
+                        $("#comment").val('');
+                    } else {
+                        $('#errorSend').show();
+                    }
+                }
+            });
+            return false;
+        }
+
+        return false; // stops user browser being directed to the php file
+    });
+
+
+
+    //Function for show or hide portfolio desctiption.
+    $.fn.showHide = function (options) {
+        var defaults = {
+            speed: 1000,
+            easing: '',
+            changeText: 0,
+            showText: 'Show',
+            hideText: 'Hide'
+        };
+        var options = $.extend(defaults, options);
+        $(this).click(function () {
+            $('.toggleDiv').slideUp(options.speed, options.easing);
+            var toggleClick = $(this);
+            var toggleDiv = $(this).attr('rel');
+            $(toggleDiv).slideToggle(options.speed, options.easing, function () {
+                if (options.changeText == 1) {
+                    $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
+                }
+            });
+            return false;
+        });
+    };
+
+    //Initial Show/Hide portfolio element.
+    $('div.toggleDiv').hide();
+    $('.show_hide').showHide({
+        speed: 500,
+        changeText: 0,
+        showText: 'View',
+        hideText: 'Close'
+    });
+
+    /************************
+    Animate elements
+    *************************/
+    
+    //Animate thumbnails 
+    jQuery('.thumbnail').one('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery(this).addClass("animated fadeInDown");
+        } else {
+            jQuery(this).removeClass("animated fadeInDown");
+        }
+    });
+
+    //Animate triangles
+    jQuery('.triangle').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery(this).addClass("animated fadeInDown");
+        } else {
+            jQuery(this).removeClass("animated fadeInDown");
+        }
+    });
+    
+    //animate first team member
+    jQuery('#first-person').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery('#first-person').addClass("animated pulse");
+        } else {
+            jQuery('#first-person').removeClass("animated pulse");
+        }
+    });
+    
+    //animate sectond team member
+    jQuery('#second-person').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery('#second-person').addClass("animated pulse");
+        } else {
+            jQuery('#second-person').removeClass("animated pulse");
+        }
+    });
+
+    //animate thrid team member
+    jQuery('#third-person').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery('#third-person').addClass("animated pulse");
+        } else {
+            jQuery('#third-person').removeClass("animated pulse");
+        }
+    });
+    
+    //Animate price columns
+    jQuery('.price-column, .testimonial').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery(this).addClass("animated fadeInDown");
+        } else {
+            jQuery(this).removeClass("animated fadeInDown");
+        }
+    });
+    
+    //Animate contact form
+    jQuery('.contact-form').bind('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery('.contact-form').addClass("animated bounceIn");
+        } else {
+            jQuery('.contact-form').removeClass("animated bounceIn");
+        }
+    });
+
+    //Animate skill bars
+    jQuery('.skills > li > span').one('inview', function (event, visible) {
+        if (visible == true) {
+            jQuery(this).each(function () {
+                jQuery(this).animate({
+                    width: jQuery(this).attr('data-width')
+                }, 3000);
+            });
+        }
+    });
+});
+
+//Initialize google map for contact setion with your location.
+
+function initializeMap() {
+
+    //var lat = '44.8164056'; //Set your latitude.
+    //var lon = '20.46090424'; //Set your longitude.
+    var lat = '37.332808'; //Set your latitude.
+    var lon = '127.066833'; //Set your longitude.
+
+    var centerLon = lon - 0.0105;
+
+    var myOptions = {
+        scrollwheel: false,
+        draggable: false,
+        disableDefaultUI: true,
+        center: new google.maps.LatLng(lat, centerLon),
+        zoom: 17,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+
+    //Bind map to elemet with id map-canvas
+    var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
+    var marker = new google.maps.Marker({
+        map: map,
+        position: new google.maps.LatLng(lat, lon),
+
+    });
+
+    var infowindow = new google.maps.InfoWindow({
+        content: "NCue (엔큐)"
+    });
+
+    google.maps.event.addListener(marker, 'click', function () {
+        infowindow.open(map, marker);
+    });
+
+    infowindow.open(map, marker);
+}

js/jquery.cslider.js

@@ -0,0 +1,335 @@
+(function ($, undefined) {
+
+    /*
+     * Slider object.
+     */
+    $.Slider = function (options, element) {
+        this.$el = $(element);
+        this._init(options);
+        
+    };
+
+    $.Slider.defaults = {
+        width:1170, //Max slider width
+        height:500, //max slider height
+        current: 0, // index of current slide
+        bgincrement: 100, // increment the bg position (parallax effect) when sliding
+        autoplay: true, // slideshow on / off
+        interval: 6000 // time between transitions
+    };
+
+    $.Slider.prototype = {
+            _init: function (options) {
+             var  self = this;
+            this.options = $.extend(true, {}, $.Slider.defaults, options);
+            this.ratio = this.$el.width() / this.$el.height();
+            this.$slides = this.$el.children().children('.da-slide');
+            this.slidesCount = this.$slides.length;
+
+            this.current = this.options.current;
+
+            if (this.current < 0 || this.current >= this.slidesCount) {
+
+                this.current = 0;
+
+            }
+
+            this.$slides.eq(this.current).addClass('da-slide-current');
+
+            var $navigation = $('<nav class="da-dots"/>');
+            for (var i = 0; i < this.slidesCount; ++i) {
+
+                $navigation.append('<span/>');
+
+            }
+            $navigation.appendTo(this.$el);
+
+            this.$pages = this.$el.find('nav.da-dots > span');
+            this.$navNext = this.$el.find('span.da-arrows-next');
+            this.$navPrev = this.$el.find('span.da-arrows-prev');
+
+            this.isAnimating = false;
+
+            this.bgpositer = 0;
+            
+
+            this.cssAnimations = Modernizr.cssanimations;
+            this.cssTransitions = Modernizr.csstransitions;
+
+            if (!this.cssAnimations || !this.cssAnimations) {
+
+                this.$el.addClass('da-slider-fb');
+
+            }
+
+            this._updatePage();
+
+            // load the events
+            this._loadEvents();
+
+            // slideshow
+            if (this.options.autoplay) {
+
+                this._startSlideshow();
+
+            }
+            $(window).bind('resize', function() {
+               setTimeout(function() {
+                    self._makeResponsive();
+                }, 150);
+			});
+           this._makeResponsive();
+
+        },
+        _navigate: function (page, dir) {
+
+            var $current = this.$slides.eq(this.current),
+                $next, _self = this;
+
+            if (this.current === page || this.isAnimating) return false;
+
+            this.isAnimating = true;
+
+            // check dir
+            var classTo, classFrom, d;
+
+            if (!dir) {
+
+                (page > this.current) ? d = 'next' : d = 'prev';
+
+            } else {
+
+                d = dir;
+
+            }
+
+            if (this.cssAnimations && this.cssAnimations) {
+
+                if (d === 'next') {
+
+                    classTo = 'da-slide-toleft';
+                    classFrom = 'da-slide-fromright';
+                    ++this.bgpositer;
+
+                } else {
+
+                    classTo = 'da-slide-toright';
+                    classFrom = 'da-slide-fromleft';
+                    --this.bgpositer;
+
+                }
+
+                this.$el.css('background-position', this.bgpositer * this.options.bgincrement + '% center');
+            }
+
+            this.current = page;
+
+            $next = this.$slides.eq(this.current);
+
+            if (this.cssAnimations && this.cssAnimations) {
+
+                var rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
+                $current.removeClass(rmClasses);
+                $next.removeClass(rmClasses);
+
+                $current.addClass(classTo);
+                $next.addClass(classFrom);
+
+                $current.removeClass('da-slide-current');
+                $next.addClass('da-slide-current');
+
+            }
+
+            // fallback
+            if (!this.cssAnimations || !this.cssAnimations) {
+ $next.addClass('da-slide-current');
+                $next.css('left', (d === 'next') ? '100%' : '-100%').stop().animate({
+                    left: '0%'
+                }, 1000, function () {
+                    _self.isAnimating = false;
+
+                });
+
+                $current.stop().animate({
+                    left: (d === 'next') ? '-100%' : '100%'
+                }, 1000, function () {
+                    $current.removeClass('da-slide-current');                    
+                });
+
+            }
+
+            this._updatePage();
+
+        },
+        _updatePage: function () {
+
+            this.$pages.removeClass('da-dots-current');
+            this.$pages.eq(this.current).addClass('da-dots-current');
+
+        },
+        _startSlideshow: function () {
+
+            var _self = this;
+
+            this.slideshow = setTimeout(function () {
+
+                var page = (_self.current < _self.slidesCount - 1) ? page = _self.current + 1 : page = 0;
+                _self._navigate(page, 'next');
+
+                if (_self.options.autoplay) {
+
+                    _self._startSlideshow();
+
+                }
+
+            }, this.options.interval);
+
+        },
+        page: function (idx) {
+            if (idx >= this.slidesCount || idx < 0) {
+                return false;
+            }
+
+            if (this.options.autoplay) {
+                clearTimeout(this.slideshow);
+                this.options.autoplay = false;
+            }
+
+            this._navigate(idx);
+
+        },
+        _makeResponsive: function () {
+
+            var _self = this;
+                
+            var w = this.$el.width();
+            var h = this.$el.height();
+            var nH = h;
+            if(w < _self.options.width){
+            var xy = this.options.width / this.options.height;
+            var nH = w / xy;
+                this.$el.height(Math.ceil(nH));
+                
+            }else{
+                this.$el.height(Math.ceil(this.options.height));
+            }
+        },
+        _loadEvents: function () {
+
+            var _self = this;
+
+            this.$pages.on('click.cslider', function (event) {
+
+                _self.page($(this).index());
+                return false;
+
+            });
+
+            this.$navNext.on('click.cslider', function (event) {
+
+                if (_self.options.autoplay) {
+
+                    clearTimeout(_self.slideshow);
+                    _self.options.autoplay = false;
+
+                }
+
+                var page = (_self.current < _self.slidesCount - 1) ? page = _self.current + 1 : page = 0;
+                _self._navigate(page, 'next');
+                return false;
+
+            });
+
+            this.$navPrev.on('click.cslider', function (event) {
+
+                if (_self.options.autoplay) {
+
+                    clearTimeout(_self.slideshow);
+                    _self.options.autoplay = false;
+
+                }
+
+                var page = (_self.current > 0) ? page = _self.current - 1 : page = _self.slidesCount - 1;
+                _self._navigate(page, 'prev');
+                return false;
+
+            });
+
+            if (this.cssTransitions) {
+
+                if (!this.options.bgincrement) {
+
+                    this.$el.on('webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function (event) {
+
+                        if (event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4') {
+
+                            _self.isAnimating = false;
+
+                        }
+
+                    });
+
+                } else {
+
+                    this.$el.on('webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function (event) {
+
+                        if (event.target.id === _self.$el.attr('id'))
+                            _self.isAnimating = false;
+
+                    });
+
+                }
+
+            }
+
+        }
+    };
+
+    var logError = function (message) {
+        if (this.console) {
+            console.error(message);
+        }
+    };
+
+    $.fn.cslider = function (options) {
+
+        if (typeof options === 'string') {
+
+            var args = Array.prototype.slice.call(arguments, 1);
+
+            this.each(function () {
+
+                var instance = $.data(this, 'cslider');
+
+                if (!instance) {
+                    logError("cannot call methods on cslider prior to initialization; " +
+                        "attempted to call method '" + options + "'");
+                    return;
+                }
+
+                if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
+                    logError("no such method '" + options + "' for cslider instance");
+                    return;
+                }
+
+                instance[options].apply(instance, args);
+
+            });
+
+        } else {
+
+            this.each(function () {
+
+                var instance = $.data(this, 'cslider');
+                if (!instance) {
+                    $.data(this, 'cslider', new $.Slider(options, this));
+                }
+            });
+
+        }
+
+        return this;
+
+    };
+
+})(jQuery);

js/jquery.inview.js

@@ -0,0 +1,60 @@
+/**
+ * author Remy Sharp
+ * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
+ */
+(function ($) {
+    function getViewportHeight() {
+        var height = window.innerHeight; // Safari, Opera
+        var mode = document.compatMode;
+
+        if ( (mode || !$.support.boxModel) ) { // IE, Gecko
+            height = (mode == 'CSS1Compat') ?
+            document.documentElement.clientHeight : // Standards
+            document.body.clientHeight; // Quirks
+        }
+
+        return height;
+    }
+
+    $(window).scroll(function () {
+        var vpH = getViewportHeight(),
+            scrolltop = (document.documentElement.scrollTop ?
+                document.documentElement.scrollTop :
+                document.body.scrollTop),
+            elems = [];
+        
+        // naughty, but this is how it knows which elements to check for
+        $.each($.cache, function () {
+            if (this.events && this.events.inview) {
+                elems.push(this.handle.elem);
+            }
+        });
+
+        if (elems.length) {
+            $(elems).each(function () {
+                var $el = $(this),
+                    top = $el.offset().top,
+                    height = $el.height(),
+                    inview = $el.data('inview') || false;
+
+                if (scrolltop > (top + height) || scrolltop + vpH < top) {
+                    if (inview) {
+                        $el.data('inview', false);
+                        $el.trigger('inview', [ false ]);                        
+                    }
+                } else if (scrolltop < (top + height)) {
+                    if (!inview) {
+                        $el.data('inview', true);
+                        $el.trigger('inview', [ true ]);
+                    }
+                }
+            });
+        }
+    });
+    
+    // kick the event to pick up any elements already in view.
+    // note however, this only works if the plugin is included after the elements are bound to 'inview'
+    $(function () {
+        $(window).scroll();
+    });
+})(jQuery);

js/jquery.placeholder.js

@@ -0,0 +1,175 @@
+/*! http://mths.be/placeholder v2.0.7 by @mathias */
+;(function(window, document, $) {
+
+	var isInputSupported = 'placeholder' in document.createElement('input');
+	var isTextareaSupported = 'placeholder' in document.createElement('textarea');
+	var prototype = $.fn;
+	var valHooks = $.valHooks;
+	var propHooks = $.propHooks;
+	var hooks;
+	var placeholder;
+
+	if (isInputSupported && isTextareaSupported) {
+
+		placeholder = prototype.placeholder = function() {
+			return this;
+		};
+
+		placeholder.input = placeholder.textarea = true;
+
+	} else {
+
+		placeholder = prototype.placeholder = function() {
+			var $this = this;
+			$this
+				.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
+				.not('.placeholder')
+				.bind({
+					'focus.placeholder': clearPlaceholder,
+					'blur.placeholder': setPlaceholder
+				})
+				.data('placeholder-enabled', true)
+				.trigger('blur.placeholder');
+			return $this;
+		};
+
+		placeholder.input = isInputSupported;
+		placeholder.textarea = isTextareaSupported;
+
+		hooks = {
+			'get': function(element) {
+				var $element = $(element);
+
+				var $passwordInput = $element.data('placeholder-password');
+				if ($passwordInput) {
+					return $passwordInput[0].value;
+				}
+
+				return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
+			},
+			'set': function(element, value) {
+				var $element = $(element);
+
+				var $passwordInput = $element.data('placeholder-password');
+				if ($passwordInput) {
+					return $passwordInput[0].value = value;
+				}
+
+				if (!$element.data('placeholder-enabled')) {
+					return element.value = value;
+				}
+				if (value == '') {
+					element.value = value;
+					// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
+					if (element != document.activeElement) {
+						// We can't use `triggerHandler` here because of dummy text/password inputs :(
+						setPlaceholder.call(element);
+					}
+				} else if ($element.hasClass('placeholder')) {
+					clearPlaceholder.call(element, true, value) || (element.value = value);
+				} else {
+					element.value = value;
+				}
+				// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
+				return $element;
+			}
+		};
+
+		if (!isInputSupported) {
+			valHooks.input = hooks;
+			propHooks.value = hooks;
+		}
+		if (!isTextareaSupported) {
+			valHooks.textarea = hooks;
+			propHooks.value = hooks;
+		}
+
+		$(function() {
+			// Look for forms
+			$(document).delegate('form', 'submit.placeholder', function() {
+				// Clear the placeholder values so they don't get submitted
+				var $inputs = $('.placeholder', this).each(clearPlaceholder);
+				setTimeout(function() {
+					$inputs.each(setPlaceholder);
+				}, 10);
+			});
+		});
+
+		// Clear placeholder values upon page reload
+		$(window).bind('beforeunload.placeholder', function() {
+			$('.placeholder').each(function() {
+				this.value = '';
+			});
+		});
+
+	}
+
+	function args(elem) {
+		// Return an object of element attributes
+		var newAttrs = {};
+		var rinlinejQuery = /^jQuery\d+$/;
+		$.each(elem.attributes, function(i, attr) {
+			if (attr.specified && !rinlinejQuery.test(attr.name)) {
+				newAttrs[attr.name] = attr.value;
+			}
+		});
+		return newAttrs;
+	}
+
+	function clearPlaceholder(event, value) {
+		var input = this;
+		var $input = $(input);
+		if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
+			if ($input.data('placeholder-password')) {
+				$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
+				// If `clearPlaceholder` was called from `$.valHooks.input.set`
+				if (event === true) {
+					return $input[0].value = value;
+				}
+				$input.focus();
+			} else {
+				input.value = '';
+				$input.removeClass('placeholder');
+				input == document.activeElement && input.select();
+			}
+		}
+	}
+
+	function setPlaceholder() {
+		var $replacement;
+		var input = this;
+		var $input = $(input);
+		var id = this.id;
+		if (input.value == '') {
+			if (input.type == 'password') {
+				if (!$input.data('placeholder-textinput')) {
+					try {
+						$replacement = $input.clone().attr({ 'type': 'text' });
+					} catch(e) {
+						$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
+					}
+					$replacement
+						.removeAttr('name')
+						.data({
+							'placeholder-password': $input,
+							'placeholder-id': id
+						})
+						.bind('focus.placeholder', clearPlaceholder);
+					$input
+						.data({
+							'placeholder-textinput': $replacement,
+							'placeholder-id': id
+						})
+						.before($replacement);
+				}
+				$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
+				// Note: `$input[0] != input` now!
+			}
+			$input.addClass('placeholder');
+			$input[0].value = $input.attr('placeholder');
+		} else {
+			$input.removeClass('placeholder');
+		}
+	}
+
+}(this, document, jQuery));

js/respond.min.js

@@ -0,0 +1,6 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
+window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document);
+
+/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
+(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this);