ajaxifying mercury theme

functions.php code

<?php

function theme_ajax_scripts() {

	wp_enqueue_script( 'jquery.history.js', '//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js', array( 'jquery'), '1.0', true);
	wp_enqueue_script( 'custom-js', dirname( get_bloginfo('stylesheet_url') ) . '/ajax_it.js', array( 'jquery'), '1.0', true);

}

add_action( 'wp_enqueue_scripts', 'theme_ajax_scripts' );

 

style.css code:

/*
 Theme Name:   Mercury Child
 Theme URI:    http://tweaky.com
 Description:  Child Theme for tweaky changes
 Author:       alhoseany
 Author URI:   http://alhoseany.com
 Template:     mercury
 Version:      1.0.0
*/

@import url("../mercury/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

html {
    overflow-y: scroll; 
}

#menu_wrapper .nav ul, #menu_wrapper div .nav {
  margin: 37px 0 0;
}

.loader {
  background: url("490.GIF") no-repeat scroll center center rgba(0, 0, 0, 0);
  height: 300px;
  width: 100%;
}

.one_half.gallery2:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}
.one_third.gallery3:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}
.one_fourth.gallery4:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}
.post_img:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}
.mansory_thumbnail:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}
.wall_thumbnail:hover img.blur_effect {
	-webkit-filter: blur(0);
	filter: blur(0);
	-moz-filter: blur(0);
}

javascript code: ajax_it.js

jQuery(document).ready(function() {

var History = window.History;
    // Bind to StateChange Event
    History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
    });

    jQuery("#nav_wrapper a").click(function(event) {
        event.preventDefault();
        var mylink = jQuery(this);
        jQuery("#page_content_wrapper").html('<div class="loader"></div>');

        jQuery("#page_content_wrapper").load(mylink.attr('href') + " #page_content_wrapper .inner", function(response) {
            jQuery("#nav_wrapper a").parent('li').removeClass('current-menu-item');
            mylink.parent('li').addClass('current-menu-item');
            jQuery(window).resize();
            newPage = jQuery(response)
            History.pushState({state: mylink.index()}, newPage.filter('title').text(), mylink.attr('href'));
        });

    });

});

window.onpopstate = function(e) {

        var mylink1 = History.getState();
        var mylink = jQuery('#nav_wrapper a[href="' + mylink1.url + '"]');
        console.log(mylink);
        jQuery("#page_content_wrapper").html('<div class="loader"></div>');

        jQuery("#page_content_wrapper").load(mylink.attr('href') + " #page_content_wrapper .inner", function(response) {
            jQuery("#nav_wrapper a").parent('li').removeClass('current-menu-item');
            mylink.parent('li').addClass('current-menu-item');
            jQuery(window).resize();
        });

};

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *