Ive got a weird issue. I'm trying to apply to my wordpress page a piece of code which works perfectly inside codepen. You can find it here:
https://codepen.io/anon/pen/rzmWVE
JS Code:
jQuery(document).ready(function( $ ) {
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#btnplay");
if(pauseButton) pauseButton.addEventListener("click", function() {
if (vid.paused) {
vid.play();
$(".hide-section").fadeOut();
} else {
vid.pause();
$(".hide-section").fadeIn();
}
});
$('#videoreplay').click(function () {
var vid = document.getElementById("bgvid");
vid.currentTime = 0;
});
$(".notice1, .notice2, .notice3, .notice4, .notice5, .notice6, .notice7").hide();
$("#cairns").hover(function(){
$(".notice1").show();
},function(){
$(".notice1").hide();
});
$("#brisbane").hover(function(){
$(".notice2").show();
},function(){
$(".notice2").hide();
});
$("#perth").hover(function(){
$(".notice3").show();
},function(){
$(".notice3").hide();
});
$("#goldcoast").hover(function(){
$(".notice4").show();
},function(){
$(".notice4").hide();
});
$("#sydney").hover(function(){
$(".notice5").show();
},function(){
$(".notice5").hide();
});
$("#melbourne").hover(function(){
$(".notice6").show();
},function(){
$(".notice6").hide();
});
$("#adelaide").hover(function(){
$(".notice7").show();
},function(){
$(".notice7").hide();
});
});
What I am doing wrong that this code is not working on a real website? I am reffering to the part from:
$(".notice1, .notice2, .notice3, .notice4, .notice5, .notice6, .notice7").hide();
till the end of code.
Composer simply ignores that.. I have no idea why. Can you help me with this issue? thanks..