CODEWITHSUNDEEP
jqueryhtmloverlay
ENev
ENev

Reputation: 79

Open/Close Div Overlay

My current script is a little broken. Clicking on the link in the table successfully creates my div overlay. Then I close my div and click on another link and the div overlay opens again the close button stops working.

I'm guessing the problem is that that DOM doesn't recognize my empty divs again after I use "replaceWith".

Any help would be appreciated.

<table id="tableBin" border="0">
    <tr>
        <th>name</th>
        <th>description</th>
    </tr>
<tbody>
    <tr>
        <td><a href="clip/location/A001C012_111129_R1VL.mov">A001C012_111129_R1VL.mov</a></td>
        <td>Adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
    <tr>
        <td><a href="clip/location/A001C012_111130_R1VL.mov">A001C012_111130_R1VL.mov</a></td>
        <td>Consectetur adipiscing elit. Fusce bibendum, leo non.</td>
    </tr>
</tbody>

</table>

<div id="overlay">
    <div id="blackOut" class="hide">
        <div id="box" class="hide">
            <div id="controls" class="hide"><a href="#"><img border="0" alt="close" width="25px" hieght="25px" src="images/close.png"></a></div>
        </div>
    </div>
</div>

<script>
    $("#tableBin a").on("click", function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        var video = jQuery('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>');

        $('#blackOut').removeClass("hide").addClass("blackOut");
        $('#box').removeClass("hide").addClass("box");
        $('#controls').removeClass("hide").addClass("controls");
        $('#box').append(video);
    });
</script>

Upvotes: 1

Views: 2359

Answers (2)

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

This seems to work:

http://jsfiddle.net/aramk/WesNb/2/

$(document).ready(function () {
    $("#tableBin a.video").click(function(e) {
            e.preventDefault();
            var url = $(this).attr("href");
            var video = $('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>');

            $('#overlay').removeClass("hide");
            $('#blackOut').removeClass("hide").addClass("blackOut");
            $('#box').removeClass("hide").addClass("box");
            $('#controls').removeClass("hide").addClass("controls");
            $('#video-container').removeClass("hide").html(video);
        });

        $("#close-button").click(function(e) {
            $('#overlay').addClass("hide");
            $('#video-container').addClass("hide").html("");
            return false;
        });
});
​

I wasn't sure if you wanted to replace the playing video or not, so I've added a container which has its contents replaced with the loaded video on each click.

Also, your original code replaced everything when close was clicked - this is very destructive and unmaintainable. Changing anything in the HTML would mean changing everything in the JS - in a string - which is very messy.

Upvotes: 1

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20183

Try

$("#box img").on("click", function(e) {
        $('#overlay').html('<div id="blackOut" class="hide"><div id="box" class="hide"><div id="controls" class="hide"><a href="#"><img border="0" alt="close" width="25px" hieght="25px" src="images/close.png"></a></div></div></div>');
    });

instead

Upvotes: 0

Related Questions