Tag: blogmode

WP Mobile with Headroom.js

The mobile screen is quite small so why waste place for Menu logo in the head section while the user would like read and explore your content . We first try to create an animated resizing header on touch scroll, headroomJS simply adds and removes CSS classes from an element in response to a scroll event to keep the header menu all time in reach.

This is a BlogLog post :Upgrading from V0.7.0 [2014] to  last version V0.9.3 (2016-04-15)

Here headroom.js helps . We add the library in our custom blog Plugin metastyle and some extra parameter to work for us. We want the blog operates differently on orientation of the mobile. Why ? because we have many videos on the blog and watching them full screen on Horizontal Mobile is a user case many people know from youtube , the same experience we would like to have on the blog

 

Identify if we have a mobile, if there is no Orientation we have a mobile Device visiting our blog, there we add all mobile specific functions and calls

if(typeof window.orientation !== ‘undefined’){

}

 

Load Enque the Scripts we need both headroom.js and JQuery.headroom.min.js for WordPress

function wpb_adding_metascript() {
wp_register_script(‘headroom’, plugins_url(‘js/headroom.min.js’, __FILE__), array(‘jquery’),’1.1′, false);
wp_register_script(‘headroomjq’, plugins_url(‘js/jQuery.headroom.min.js’, __FILE__), array(‘jquery’),’1.1′, false);
wp_enqueue_script(‘headroom’);
wp_enqueue_script(‘headroomjq’);

}

 

Init the headroom with our haedrom Div, we should add a Setting for the Div #masthead as this will be different on every blog . Or we can autodetect the menu header.

jQuery(“#masthead”).headroom();

 

The Headroom Script from Wicky Nilliams  is available at GIT  there is also a AngularJS directive

There is also a WordPress Plugin that use this Lib WP Sticky Menu with some additional features , suprise Zero Votes in the WP Plugin repository .