CODEWITHSUNDEEP
javascriptphpjqueryhtmlwordpress
bschottm
bschottm

Reputation: 33

One line of JS code is breaking within Wordpress. Not sure why

$(function(){
  $(".youtubeThumb").each(function(){
      $(this).bind('click touchstart', function(event){

        event.preventDefault();

      var ytLink = $(this).children('img').attr('src');
      //the line below is what keeps breaking
      var ytLink = ytLink.split('/vi/').pop().split('/').shift();
      var ytPlayList = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';

      $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');

    $('html, body').animate({
        scrollTop: $('.youtubeEmbed').offset().top
    }, 600);
      })
   })
});

//Error Below from console
Uncaught TypeError: Cannot read property 'split' of undefined ?page_id=28:169(anonymous function) ?       page_id=28:169n.event.dispatch jquery-2.1.1.min.js?ver=2.1.1:3r.handle

I have never really worked with wordpress before so I could be way off on what I am trying to do. The link to the page is http://twistedmess.com/?page_id=28

and as you see here on a separate page the code works fine http://schottmandesign.com/test3

I have tried putting the script in a separate js file and then putting it into the header.php, putting it into the actual page itself, and right now it is being contained in a shortcode plugin that I am then calling on the actual page. Any help is much appreciated.

Upvotes: 1

Views: 116

Answers (2)

gabereal
gabereal

Reputation: 304

what you want instead of children, is find. you want to look recursively through all the elements in the jquery object. children is only one level below parent deep. see this fiddle for a toy example http://jsfiddle.net/gq36et5x/1.

instead your code should look like this: 

$(function(){
  $(".youtubeThumb").each(function(){
  $(this).bind('click touchstart', function(event){

    event.preventDefault();

  var ytLink = $(this).find('img').attr('src');
  //the line below is what keeps breaking
  var ytLink = ytLink.split('/vi/').pop().split('/').shift();
  var ytPlayList = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';

  $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');

  $('html, body').animate({
    scrollTop: $('.youtubeEmbed').offset().top
}, 600);
  })
  })
});

also, its not necessary to run the each loop to bind to click event. you could just slim things down this way: 

$(function(){
  $(".youtubeThumb").click(function(e){
    e.preventDefault();
    var ytLink, ytPlaylist; 
    ytPlaylist = 'PLDMZzXD-QCET2VK_l9aGhOXNMZjWjzI0g';
    ytLink = $(this).find('img').attr('src').split('/vi/').pop().split('/').shift();

    $('.youtubeEmbed iframe').attr('src', '//www.youtube.com/embed/'+ytLink+'?list='+ytPlayList+'&wmode=transparent&autoplay=1');
    $('html, body').animate({ scrollTop: $('.youtubeEmbed').offset().top}, 600);})
  })
});

Upvotes: 1

tkounenis
tkounenis

Reputation: 630

The img tag is not a direct child of the .youtubeThumb element, therefore change children to find. Moreover, find will return an array of elements (or an empty array if there are no matches), so, you will need to check the content of what find returns before you try to access the src attribute;

var ytThumb = $(this).find('img');
if (ytThumb.length > 0) {
    var ytLink = ytThumb[0].attr('src');
    // ... the rest of the code
}

EDIT: Got answered by gabereal in the meantime.

Upvotes: 1

Related Questions