1

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..

Julia Galden
  • 449
  • 10
  • 23
  • put an `alert()` after the hover, `$("#cairns").hover(function(){` and see if the alert box prompts after hover on Cairns. Also check if you have referenced the correct versions of your jQuery files. – Souvik Ghosh Aug 09 '17 at 08:43
  • @SouvikGhosh - when puting alert -> nothing happens inside console. what do you mean by correct versions of jquery? I am using native jquery from wordpress. – Julia Galden Aug 09 '17 at 09:13
  • link to the development version is http://colorfill.ionic.host/v1 – Julia Galden Aug 09 '17 at 09:23
  • Check if you have other jQuery(document).ready() function is working. To check that, put an alert after- `jQuery(document).ready(function( $ ) {` – Souvik Ghosh Aug 09 '17 at 09:37
  • it displays alert properly. – Julia Galden Aug 09 '17 at 10:41
  • Hmmm. Looks like some problem with the referencing of script/HTML files. Have you referenced the jQuery file/CDN correctly for your HTML file in Wordpress? This is the jQuery CDN from your CodePen- https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js. Also check the HTML source if it contains any element with `id="cairns"` – Souvik Ghosh Aug 09 '17 at 10:49
  • ok I've found out that you are partially right = so when im opening the console then i see the element (i must expand a svg file). But while opening source there is only a link to svg file (no id=cairns). So i have no clue how to do it. – Julia Galden Aug 09 '17 at 13:21
  • 1
    SVG takes time to load and `jQuery(document).ready` may not work while the SVG has still not loaded. Use `jQuery(window).load` instead. – Souvik Ghosh Aug 10 '17 at 05:45

0 Answers0