2017-01-13 2 views
0

У меня возникли проблемы с добавлением js/jquery. код. У меня есть js-файл в моем шаблоне wordpress и вы хотите добавить простой кусок кода, чтобы показать/скрыть div, хотя он прерывает exjiting js/jquery. Где я могу добавить его в файл, чтобы он не сломал его и/или как структурировать этот файл?Где добавить код в wordpress js файл?

Wordpress JS поддержки существующих файлов ...

jQuery(document).ready(function($) { 


//VIDEO 

    var iframe = $('.videoPlayer')[0], 
     player = $f(iframe), 
     status = $('.status'); 

// When the player is ready, add listeners for pause, finish, and playProgress 
    player.addEvent('ready', function() { 
     status.text('ready'); 

     player.addEvent('pause', onPause); 
     player.addEvent('finish', onFinish); 
     player.addEvent('playProgress', onPlayProgress); 
    }); 

    // Call the API when a button is pressed 
    $('.playPause').bind('click', function() { 
     player.api($(this).text().toLowerCase()); 
     console.log('clicked'); // triggers 
     player.api('paused', function(paused) { 
     console.log('inside paused'); // doesn't trigger 
      if (paused) { 
       player.api('play'); 
      } 
      else { 
       player.api('pause'); 
      } 
     }); 


    });  


    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 

    // IFRAME RESIZE 

    function videoWrapper() { 
     var winW = $(window).width(); 
     var winH = $(window).height(); 
     var winR = winH/winW; 
     var video = $("#videoContainer iframe"); 
     // console.log(winW, winH, winR); 

     // ratio of original video 
     var vidR = video.attr("height")/video.attr("width"); 
     // ratio of iframe 
     var ifrR = video.height()/video.width(); 
     // ifrR nedds to be 0.65 

     //var diff = winW/(winH/vidR); 
     if (winR > vidR) { 
      // diff between current video height and winH 
      var diff = winH/(winW * vidR); 

      var newW = winW * diff; 
      var newH = winW * diff * 0.65; 

      video.css({ 
       "width": newW, 
       "margin-left": 0 - (newW - winW)/2, 
       "margin-top": 0 - (newH - winH)/2, 
       "height": newH 
      }); 
     } else {    
      video.css({ 
       "width": winW, 
       "margin-left": "", 
       "margin-top": 0 - ((winW * 0.65) - winH)/2, 
       "height": winW * 0.65 
      });   
     } 
    } 

    // VIDEO SELECT 

    if (iOS) { 
     $("#kvVideo").remove(); 
     $("#kvVideoMobile").show(); 
    } 

    // VIDEO MUTE 

    if (iOS) { 
     var iframe = document.getElementById("kvVideoMobile"); 
    } else { 
     var iframe = document.getElementById("kvVideo"); 
    } 

    var player = $f(iframe); 

    player.addEvent('ready', function() { 
     // player.api('setVolume', 0); 

     // $("#videoContainer").on('click', function() { 
     //  // Play the video 
     //  player.api('play'); 
     //  alert("play"); 
     // }); 
    }); 

    function muteVideo() { 
     player.api('setVolume', 0); 
     mute = true; 
     $("#mute_button").hide(); 
     $("#volume_button").show(); 
     // console.log("mute"); 
    } 

    function unmuteVideo() { 
     player.api('setVolume', 1); 
     mute = false; 
     $("#mute_button").show(); 
     $("#volume_button").hide(); 
     // console.log("unmute");   
    } 

    var mute = false; 
    $('#button').on("click", function(){ 
     // console.log("button click"); 
     if (!mute) { 
      muteVideo(); 
     } else { 
      unmuteVideo(); 
     } 
    }); 



    // EVENTS 

    $(window).on("load", function(){ 
     videoWrapper(); 
    }).on("resize", function(){ 
     videoWrapper(); 
     sectionCalc(); 
    }); 



}); 

Вторая часть кода, я хочу, чтобы добавить в файл JS, поэтому он будет работать с кодом уже там ...

$(document).ready(function(){ 
    $(".colophon").hide(); 
    $(".newsletter").hide(); 

    $("#colophon").click(function(){ 
     $(".newsletter").hide(); 
     $(".colophon").fadeToggle('slow');  
    }); 

    $("#newsletter").click(function(){ 
     $(".colophon").hide(); 
     $(".newsletter").fadeToggle('slow');  
    }); 
}); 

Спасибо!

+0

Под «перерыв», то, что вы имеете в виду? Что говорит консоль вашего браузера? Как загружается JS? Вы делаете это, поместив его в файл .js', а затем загрузив его через 'wp_enqueue_script()' или поместив его непосредственно в файл темы? Кроме того, WP загружает jQuery в неконфликтном режиме, поэтому вам придется использовать 'jQuery' вместо' '' alias. – Terry

+0

Спасибо @Terry. У меня есть код в файле .js и он загружается в мой нижний колонтитул с использованием ... \t ''. Перерыв, я просто имею в виду, когда добавляю эту вторую часть кода в тот же .js-файл, они, кажется, отменяют друг друга и перестают работать. Я просто не знаю, как добавить два в один файл. Каким образом писать/заказывать это? благодаря! – RJM

+0

Вы не ответили на все мои вопросы: (1) вы знаете, что ** WP использует jQuery в совместимом режиме **. Замените '$ (document) .ready (function() {' с помощью 'jQuery (function ($) {'. И (2) что говорит ваш журнал консоли браузера? ** Какие сообщения об ошибках вы видите? ** – Terry

ответ

0

Я бы создать собственный файл, а затем епдиеие его с помощью WordPress-х wp_enqueue_script() в вашем файле functions.php

+1

Спасибо @Tony Hensler. Я добавил wp_enqueue_script() теперь в файл функций. Как бы вы предложили добавить вторая часть кода в файл .js с существующим содержимым js? спасибо! – RJM

+0

Я бы не хотел создавать свой собственный файл js. –

+0

Вы имеете в виду, что у меня есть два js-файла? У меня уже есть собственный js-файл. просто не могу добавить вторую функцию в exisiting js-файл, который уже включает в себя другие функции. – RJM

Смежные вопросы