CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Nata2ha Mayan2
Nata2ha Mayan2

Reputation: 484

How to make these functions stop interfering

I have two functions, one plays a video on click (and changes the video that plays) on click, and then a function that is supposed to make a DIV's opacity go to zero. I tried to put them together because you're supposed to click on the same spot to activate both, but it doesn't work.

For some reason, when I put the div that contains the video (even without its function), the second function stops working. What can I do to make then work?

The function for the video player is:

$(window).load(function(){
    $('li', '.thumbs').on('click', function() {
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
            myVideo = document.getElementById('myVid');

        myVideo.src = videos[numb]; 
        myVideo.load();
        myVideo.play();

    });
});

And for the image:

$(window).load(function(){
    $(function() {
        $('li', '.thumbs').click(function() {
            $('#MyT').addClass('clear');
        });
    });
});

I know that both shouldn't have $(window).load(function(), that just because these are the separate ones.

Upvotes: 1

Views: 127

Answers (3)

elclanrs
elclanrs

Reputation: 94101

Are you sure your multiple selector syntax is what you want?, the comma separated selectors must be quoted just once if you want to apply it to all those element otherwise the you're just passing a context. In any case, I usually find the context unnecesary unless it's a previously cached selector. More info at the jQuery API.

$('li, .thumbs') // All `li` and all `.thumbs`
$('.thumbs li') // All 'li` within `.thumbs`

Notice that you're also using (window).load() and (document).ready(). When you combine both choose one or the other. There's a slight but important difference. Then you can combine everything like this and it should work.

$(document).ready(function () {

    $('li, .thumbs').on('click', function () {

        // Add class
        $('#MyT').addClass('clear');

        // Video stuff
        var numb = $(this).index(),
            videos = [
                'images/talking1.m4v',
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

        myVideo.load();
        myVideo.play();

    });

});

Upvotes: 1

jamesmortensen
jamesmortensen

Reputation: 34038

Why not just combine the two together like this? I suspect that one of your click event handlers may be overriding the other click handler and causing it not to register. 

$(window).load(function(){
    $('li', '.thumbs').on('click', function() {
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
            myVideo = document.getElementById('myVid');
        myVideo.src = videos[numb]; 

        myVideo.load();
        myVideo.play();

        $('#MyT').addClass('clear');
    });
});

Upvotes: 0

PitaJ
PitaJ

Reputation: 15022

If his doesn't work, separate the functions and call them with window.onload(*function*).

Like this:

function vP() {
   $('li', '.thumbs').on('click', function() {
      var numb = $(this).index(),
      videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
      myVideo = document.getElementById('myVid');
      myVideo.src = videos[numb]; 
      myVideo.load();
      myVideo.play();
   });
}
function iM() {
   $('li', '.thumbs').click(function() {
      $('#MyT').addClass('clear');
   });
}
window.onload(iM();vP();)

Upvotes: 0

Related Questions