Jquery Issue WordPress

• SOLVED

Hi,

The header for this website has an animation where the logo disappears and a second compacted menu appears the you scroll down.

In chrome and firefox it works fine, but in Safari it becomes glitchy.

I am attaching a video for you to see the glitch im talking about.

Chrome video:
https://dl.dropboxusercontent.com/u/30519637/nnjquery.gif

Safari video:
https://dl.dropboxusercontent.com/u/30519637/nnjserror.gif

The js that gets used is called header.js.

jQuery(function($) {

var mh = $('#et-top-navigation');
var ml = $('#logo-transition-trigger');
var ms = $('#social-top');
var msa = $('#social-top-ani');
var body = $('body');
var width = parseFloat(body.css("width"));

$(window).scroll(function(){
if (width >= 964) {
if ($(this).scrollTop() > 62) {
mh.addClass("blue");
ms.addClass("Social-transition");
ml.removeClass("logo-transition");
msa.removeClass("social-icon-transition");
} else {
mh.removeClass("blue");
ms.removeClass("Social-transition");
ml.addClass("logo-transition");
msa.addClass("social-icon-transition");
}
}
});

$(window).resize(function(){

width = parseFloat(body.css("width"));
if (width < 964 || $(this).scrollTop() > 62) {
mh.removeClass("blue");
}
});
});

Jquery is loaded via a function:



// load jquerry
function lammworks_theme_scripts() {
wp_enqueue_script( 'mailchimp', get_stylesheet_directory_uri() . '/JS/gaspar.js', array( 'jquery' ), '1.0.0', true );
if(is_front_page() || is_page_template('page-tabulario.php') ) wp_enqueue_script( 'head-ani', get_stylesheet_directory_uri() . '/JS/header.js', array( 'jquery' ), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'lammworks_theme_scripts' );




Website:
http://wordpress-5665-40072-135812.cloudwaysapps.com/

Answers (3)

2016-08-08

Rempty answers:

In your style.css line:355
.blue {
max-width: 100% !important;
border-top: none !important;
border-bottom-color: #B3ADAD !important;
background-color: rgba( 250, 250, 250, .9) !important;
}
change to
.blue {
border-top: none !important;
border-bottom-color: #B3ADAD !important;
background-color: rgba( 250, 250, 250, .9) !important;
}

and add
.et_fixed_nav #et-top-navigation{
transition:none!important;
}

---

dipka comments:

Well i guess it was a css issue.
This works.

Thanks

2016-08-08

Shoeb mirza answers:

Unable to get your issue. Can you explain what glitch is there in the safari? Is it design issue in safari ? - this is what I see in Safari browser.

2016-08-08

Jayaram Y answers:

i see its not because of the jquery but the css.

Please comment out the below lines and check once. (Divi/style.css) line no 1619



.et_fixed_nav #et-top-navigation{
/* -webkit-transition: all 0.4s ease-in-out; */
/* -moz-transition: all 0.4s ease-in-out; */
/* transition: all 0.4s ease-in-out; */
}



Or you can simply add the below lines in custom css

.et_fixed_nav #et-top-navigation{
transition:none!important;
}