2017-01-13 1 views
0

Ich habe Probleme mit, wo einige js/jquery hinzufügen. Code. Ich habe eine js-Datei in meiner Wordpress-Vorlage und möchte ein einfaches Stück Code hinzufügen, um ein div anzuzeigen/zu verbergen, obwohl es die bestehende js/jquery bricht. Wo füge ich es in die Datei ein, damit es nicht bricht und/oder wie wird diese Datei strukturiert?Wo Code in Wordpress Js-Datei hinzufügen?

exisiting Wordpress JS-Datei ...

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(); 
    }); 



}); 

Der zweite Teil des Codes Ich möchte in die js-Datei hinzufügen, so dass es dort bereits mit dem Code arbeiten ...

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

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

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

Danke!

+0

Mit „Pause“, was meinst du genau? Was sagt deine Browserkonsole? Wie wird JS geladen? Machst du es, indem du es in eine '.js'-Datei legst und es dann über' wp_enqueue_script() 'lädst, oder es direkt in eine Themendatei legst? Außerdem lädt WP jQuery im Nicht-Konflikt-Modus, so dass Sie 'jQuery' anstelle des' $ 'Alias ​​verwenden müssen. – Terry

+0

Danke @Terry. Ich habe den Code in einer .js-Datei und es wird in meine Fußzeile geladen mit ... \t ''. Mit Pause, ich meine nur, wenn ich diesen zweiten Teil des Codes in die gleiche .js-Datei hinzufügen, scheinen sie sich gegenseitig aufzuheben und aufhören zu arbeiten. Ich weiß einfach nicht, wie man die beiden zu einer Datei zusammenfügt. Wie kann man das schreiben/bestellen? Vielen Dank! – RJM

+0

Sie haben nicht alle meine Fragen beantwortet: (1) Sie wissen, dass ** WP jQuery im kompatiblen Modus ** verwendet. Ersetzen Sie '$ (document) .ready (function() {' mit 'jQuery (function ($) {'. Und (2) was sagt Ihre Browserkonsole? ** Welche Fehlermeldungen sehen Sie? ** – Terry

Antwort

0

Ich würde erstellen Sie Datei besitzen und es dann Wordpress ist mit enqueue wp_enqueue_script() in functions.php Datei

+1

Danke @Tony Hensler. Ich habe die wp_enqueue_script() jetzt zur Funktionsdatei hinzugefügt. Wie würdest du vorschlagen, dass ich hinzufüge der zweite Teil des Codes in die .js-Datei mit dem vorhandenen js-Inhalt? Danke! – RJM

+0

Ich würde nicht ich würde meine eigene js-Datei erstellen. –

+0

meinst du haben zwei js-Dateien? Ich habe bereits meine eigene js-Datei kann die zweite Funktion einfach nicht in die bestehende js-Datei einfügen, die bereits andere Funktionen enthält – RJM