Question

I have some code that works but I just need to know whether I can reduce this down/streamline the script a bit better. The script works in conjuction with JQUERY's reveal script and stops Vimeo video playing when the reveal window is closed. I got the original script from StckOverlow but this was based on one video - I have 11.

My script is as follows and as you'll see there seems to be alot of repetition. Is there any way to streamline this:

 <script type="text/javascript">
         jQuery(document).ready(function($) {
           $('body').live('click',function(){
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-1 iframe').attr('src');
                $('#myModal-1 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-2 iframe').attr('src');
                $('#myModal-2 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-3 iframe').attr('src');
                $('#myModal-3 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-4 iframe').attr('src');
                $('#myModal-4 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-5 iframe').attr('src');
                $('#myModal-5 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-6 iframe').attr('src');
                $('#myModal-6 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-7 iframe').attr('src');
                $('#myModal-7 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-8 iframe').attr('src');
                $('#myModal-8 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-9 iframe').attr('src');
                $('#myModal-9 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-10 iframe').attr('src');
                $('#myModal-10 iframe').attr('src','').attr('src',resourceVideo);
                };
            if($('div.reveal-modal-bg').is(':visible')){
                var resourceVideo = $('#myModal-11 iframe').attr('src');
                $('#myModal-11 iframe').attr('src','').attr('src',resourceVideo);
                };                                      
            })
        });
        </script>

Any help would be appreciated.

Many thanks

Was it helpful?

Solution

I would go with something like this:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('body').live('click',function(){
            if($('div.reveal-modal-bg').is(':visible')){
                $('div[id*=myModal] iframe').each(function() {
                    $(this).attr('src', $(this).attr('src'));
                });
            };                                      
        })
    });
</script>

The $('div[id*=myModal] iframe') selects all divs with an ID that contains "myModal", please note that you would need to change this if you are using a different HTML tag.

Despite this, I am not sure of the purpose of your code, what you are trying to achieve.

OTHER TIPS

I think you are looking to do something like this:

if($('div.reveal-modal-bg').is(':visible')){
    $('iframe').each(function(){
        $(this).attr('src', $(this).attr('src'));
    });
};

Why are you trying to set the src attribute to exactly the same value?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top