var time = null; // Clicking on the whole box focus input $(".search-field").click(function(e){ $(".search-field-input").focus(); }); // On focus, remove placeholder and add class to expand input size $(".search-field-input.empty").focus(function(e){ $(this).removeAttr("placeholder").closest('.search-field').addClass("focus"); }); // On blur, recover placeholder and remove class to collapse input size $(".search-field-input.empty").blur(function(e){ $(this).attr("placeholder",$(this).data('placeholder')).closest('.search-field').removeClass("focus"); }); // On typping, add class if there is value to keep expanded $(".search-field-input").keyup(function(e){ if($(this).val() != ""){ $(this).addClass("full-width"); } else { $(this).removeClass("full-width"); } }); // Click on the magnify toggles input box, hidding menu content $("#nav-search-input").click(function(e){ showSearch(); }); // Click on close, or other places on the view, returns original state $("#nav-search-close").click(function(e){ $("#searchBoxNav").animate({width: 0}, 300, 'swing', function(){ $("#nav-overlay").removeClass("onSearch"); $(".header-logo-img").css("opacity",1); }); }); $(document).click(function(e){ if($(e.target).closest(".nav-search-field").length == 0 && $("#nav-overlay").hasClass("onSearch")){ $("#searchBoxNav").blur().animate({width: 0}, 300, 'swing', function(){ $("#nav-overlay").removeClass("onSearch"); $(".header-logo-img").css("opacity",1); }); } }); // Recalculate search input width on resize $(window).resize(function(e){ if($("#nav-overlay").hasClass("onSearch")){ if(time != null){ clearTimeout(time); } var time = setTimeout(function(){ inputWidth = $(window).innerWidth() - 113; //magnify icon + padding offset $("#searchBoxNav").clearQueue().finish(function(){ }).animate({width:inputWidth}, 250).focus(); },180); } }); $("#nav-overlay").ready(function(e){ $nav = $("#nav-overlay"); if($nav.data('termsearch')){ showSearch(); } }); function showSearch(){ if($("#nav-overlay").hasClass("onSearch")){ return; } $(".header-logo-img").css("opacity",0); $("#nav-overlay").addClass("onSearch"); inputWidth = $(window).innerWidth() - 113; //magnify icon + padding offset $("#searchBoxNav").animate({width:inputWidth}, 300).focus(); }