3
\$\begingroup\$

I have three divs that change a video link when they are hovered. I have the code working in three different blocks but I am not sure how to combine them since it is very repetitive.

$('#videolink-sd').mouseenter(function(event) {
    //$(this).toggleClass('home-pager-hover');

    $('.top-clock').stop( true, true ).fadeOut();
    $('#'+videoID).stop( true, true ).hide();

    $('#'+videoID).stop( true, true ).get(0).pause();
    $('#'+mp4ID).stop( true, true ).attr('src', sdmp4);
    $('#'+oggID).stop( true, true ).attr('src', sdogg);   
    $('#'+videoID).stop( true, true ).get(0).load();
    $('#'+videoID).stop( true, true ).get(0).play(); 

    $('.top-clock').stop( true, true ).removeClass('top-clock--visible');
    $('.top-clock-sd').stop( true, true ).addClass('top-clock--visible');

    $('#'+videoID).stop( true, true ).delay('500').fadeIn();
    $('.top-clock-sd').stop( true, true ).delay('500').fadeIn();
}); 



$('#videolink-sk').mouseenter(function(event) {
    //$(this).toggleClass('home-pager-hover');

    $('.top-clock').stop( true, true ).fadeOut();
    $('#'+videoID).stop( true, true ).hide();

    $('#'+videoID).stop( true, true ).get(0).pause();
    $('#'+mp4ID).stop( true, true ).attr('src', skmp4);
    $('#'+oggID).stop( true, true ).attr('src', skogg);   
    $('#'+videoID).stop( true, true ).get(0).load();
    $('#'+videoID).stop( true, true ).get(0).play(); 

    $('.top-clock').stop( true, true ).removeClass('top-clock--visible');
    $('.top-clock-sk').stop( true, true ).addClass('top-clock--visible');

    $('#'+videoID).stop( true, true ).delay('500').fadeIn();
    $('.top-clock-sk').stop( true, true ).delay('500').fadeIn();
}); 



$('#videolink-rb').mouseenter(function(event) {
    //$(this).toggleClass('home-pager-hover');

    $('.top-clock').stop( true, true ).fadeOut();
    $('#'+videoID).stop( true, true ).hide();

    $('#'+videoID).stop( true, true ).get(0).pause();
    $('#'+mp4ID).stop( true, true ).attr('src', rbmp4);
    $('#'+oggID).stop( true, true ).attr('src', rbogg);   
    $('#'+videoID).stop( true, true ).get(0).load();
    $('#'+videoID).stop( true, true ).get(0).play();   

    $('.top-clock').stop( true, true ).removeClass('top-clock--visible');
    $('.top-clock-rb').stop( true, true ).addClass('top-clock--visible');

    $('#'+videoID).stop( true, true ).delay('500').fadeIn();
    $('.top-clock-rb').stop( true, true ).delay('500').fadeIn();
}); 

$('.home-pager li').mouseenter(function(event){
    $('.home-pager li').stop( true, true ).removeClass('home-pager-hover');
    $(this).stop( true, true ).addClass('home-pager-hover');
});
\$\endgroup\$
2
\$\begingroup\$

It's been a while since I've done Javascript, but I think that you want something that looks like this:

function set_video_on_mouseenter(suffix, video_ID, mp4_ID, ogg_ID, mp4_value, ogg_value) {
  $('#videolink-' + suffix).mouseenter(function(event) {
    //$(this).toggleClass('home-pager-hover');

    $('.top-clock').stop( true, true ).fadeOut();
    $('#'+video_ID).stop( true, true ).hide();

    $('#'+video_ID).stop( true, true ).get(0).pause();
    $('#'+mp4_ID).stop( true, true ).attr('src', mp4_value);
    $('#'+ogg_ID).stop( true, true ).attr('src', ogg_value);   
    $('#'+video_ID).stop( true, true ).get(0).load();
    $('#'+video_ID).stop( true, true ).get(0).play();   

    $('.top-clock').stop( true, true ).removeClass('top-clock--visible');
    $('.top-clock-' + suffix).stop( true, true ).addClass('top-clock--visible');

    $('#'+video_ID).stop( true, true ).delay('500').fadeIn();
    $('.top-clock-' + suffix).stop( true, true ).delay('500').fadeIn();
  }); 
}

set_video_on_mouseenter('sd', videoID, mp4ID, oggID, sdmp4, sdogg);
set_video_on_mouseenter('sk', videoID, mp4ID, oggID, skmp4, skogg);
set_video_on_mouseenter('rb', videoID, mp4ID, oggID, rbmp4, rbogg);

$('.home-pager li').mouseenter(function(event){
    $('.home-pager li').stop( true, true ).removeClass('home-pager-hover');
    $(this).stop( true, true ).addClass('home-pager-hover');
});

There isn't enough code here to actually run, so I didn't test. If you post a link to a page that actually has the code working, I can try to do more.

I didn't try to make the code more elegant. This is a very mechanical refactor. I looked at what changed and extracted that as well as variable uses from the original code. Then I just call my new function with the extracted parameters. You could probably do this without extracting the three ID variables, but I think this is more reliable since I can't verify that the code works.

\$\endgroup\$
  • \$\begingroup\$ Thank you for answering my question without the full code. I was not sure how to convert everything into a function so this was I was looking for! \$\endgroup\$ – user3614447 Oct 10 '14 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.