3
\$\begingroup\$

I'm using jQuery's .get() method to load content from external HTML files into my main index file. I created 25 different functions, function videoLoad1(), function videoLoad2() etc, for the 25 videos that I'm loading separately when its corresponding link is clicked. The content that is being swapped out in my HTML index file is the video src and video details. I'm new to jQuery and have been trying to find a more practical way of writing the code.

HTML - links for the onclick function:

<div class="row">
    <div id="movie_list" class="movie_sec-1 pull-left">
        <h6><a href="Javascript:void(0);" id="cars_hb">cars.com: be honest</a></h6>
        <h6><a href="Javascript:void(0);" id="cars_t">cars.com: tag</a></h6>
    </div>
</div>

HTML for video inclusion:

<div id="kz-video" style="display: none;"></div>

External HTML file that is being loaded via $.get() (file name is cars_bh.html):

<div class="video-info">
    <h1>Video</h1>
    <h4>Now Playing</h4>
    <h4>cars.com: be honest</h4>
</div>
    <!-- Video -->
<video id="kz-player" width="100%" height="100%" controls preload>
    <source src="vid/CarscomBeHonest.mp4"  type='video/mp4;'>
    <source src="vid/CarscomBeHonest.webmhd.webm" type='video/webm;'>
    <source src="vid/CarscomBeHonest.oggtheora.ogv"  type='video/ogg;'>
</video>

jQuery function:

function videoLoad2() {

$("a#cars_hb").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.get('cars_hb.html', function( data ) {
  $('#kz-video').html( data );
  });
});

//close overlay/hide content
$('.close').click(function (e) {
e.stopPropagation();
$('#kz-player')[0].pause();
$('#kz-video').hide();
$('.close').fadeOut(800);
$('#video_overlay').fadeOut(800);
});
}
\$\endgroup\$

1 Answer 1

3
\$\begingroup\$

When you say

I created 25 different functions for the 25 videos that I'm loading separately when its corresponding link is clicked.

Does that mean you have multiple function videoLoad#() { ?

I think this will help:

$("div#movie_list a").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    id = e.target.id;
    loadVideo(id);
});

function loadVideo(id) {
    file = id + ".html";
    $.get(file, function (data) {
        $('#kz-video').html(data);
    });
});
\$\endgroup\$
4
  • \$\begingroup\$ yes. I created 25 different functions as you mentioned, ie function videoLoad1(), function videoLoad2(), etc. I'll try your suggestion. thanks! \$\endgroup\$
    – RENE VILLA
    Feb 28, 2014 at 20:47
  • \$\begingroup\$ I am writing a similar function to handle closing your videos in the same dynamic way. I'll edit my answer with a jsfiddle link soon. - Oh, nevermind. You only show one video at the time. \$\endgroup\$
    – Qwiso
    Feb 28, 2014 at 20:53
  • \$\begingroup\$ Note that I had improperly closed my click function. I have edited the line from } to }); \$\endgroup\$
    – Qwiso
    Feb 28, 2014 at 20:57
  • \$\begingroup\$ yeah, but please share your fiddle. it might help someone else in the future! \$\endgroup\$
    – RENE VILLA
    Feb 28, 2014 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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