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\$
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\$
  • \$\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 '14 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 '14 at 20:53
  • \$\begingroup\$ Note that I had improperly closed my click function. I have edited the line from } to }); \$\endgroup\$ – Qwiso Feb 28 '14 at 20:57
  • \$\begingroup\$ yeah, but please share your fiddle. it might help someone else in the future! \$\endgroup\$ – RENE VILLA Feb 28 '14 at 20:58

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.