Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Site fades as video comes on. Then click to get site back. Client doesn't like it.

Posted on 2013-12-03
12
Medium Priority
?
479 Views
Last Modified: 2013-12-07
rockypointendoscopy.com/cirrhosis.html

Hi- you'll see on the video that the site fades to grey a little(as client requested). Then, when you close the video, you have to click twice to get the site to come back from grey.

The client doesn't like that, he wants it to come back from grey when the video is closed. Is there a way to do that within the framework I have? Thanks.
0
Comment
Question by:mel200
12 Comments
 
LVL 18

Expert Comment

by:Steven Harris
ID: 39693185
You can manually trigger a close event by calling .trigger('close') on the element you have lightboxed.

$ele.lightbox_me();
$ele.trigger('close');

Or you can use the closeClick option.
0
 

Author Comment

by:mel200
ID: 39693204
Thanks- you're going to have to hold my hand a little more, though. :)

Where would either of those go in the code? Thanks.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39693210
You should be able to use player ended

https://developers.google.com/youtube/js_api_reference#Adding_event_listener and on ended you would call the close function of your modal.  

Events

onStateChange
This event fires whenever the player's state changes. The value that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:
YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED


Are you using bootstrap's modal? http://getbootstrap.com/javascript/#modals  If you are, then you would call $('#myModal').modal('hide') once you detect the movie is over via the event listner
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:mel200
ID: 39693261
Thanks, padas, I'm pretty green at this, so I don't really understand how to use what you posted, although it sounds right..
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 39702444
On your cirrhosis.html file, change this code:

    <script>
        $(function () {
            $('.youtube').click(function (e) {
                $('#video_container').lightbox_me({
                    centered: true
                });
                e.preventDefault();
            });
        })
        $('.youtube').click(function (e) {
            $('#video_container').lightbox_me({
                centered: true,
                opacity: .5,
                onClose: function () { alert('Sopas'); }
            });
            e.preventDefault();
        });
    </script>

Open in new window


By this one
    <script>
        $(function () {
            $('.youtube').click(function (e) {
                $('#video_container').lightbox_me({
                    centered: true
                });
                e.preventDefault();
            });
        })
        /*$('.youtube').click(function (e) {
            $('#video_container').lightbox_me({
                centered: true,
                opacity: .5,
                onClose: function () { alert('Sopas'); }
            });
            e.preventDefault();
        });*/
    </script>

Open in new window

And in jquery.lightbox_me.js change this code:
$self.delegate(opts.closeSelector, "click", function(e) {
            closeLightbox(); e.preventDefault();
            });

Open in new window

By this one:
$(opts.closeSelector).click(function (e) {
                closeLightbox();
                e.preventDefault();
            });

Open in new window

0
 

Author Comment

by:mel200
ID: 39702471
Thanks, I'll try that right now!
0
 

Author Comment

by:mel200
ID: 39702482
Better- but I still have to click once on the page to get it back...is there a way to have the page come back on close? So click close, the page is available? Thanks a lot for your help!
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 39702552
Mmm... weird, can you refresh your cache?, I think your browser is using the previous version of the js file.
0
 

Author Comment

by:mel200
ID: 39702678
I cleared my cache, and also tried it on internet explorer, which I'd never had this site on. Same thing, have to click on the site to bring it back. If I look at source, then the js file, I see the correct change on that file.
0
 
LVL 15

Accepted Solution

by:
jorge_toriz earned 2000 total points
ID: 39702751
Ups, sorry, I forgot another change, this is the current code:
<div onclick="yt_hide()">

Open in new window

And must be changed by this one:
<div onclick="yt_hide()" class="close">

Open in new window

0
 

Author Closing Comment

by:mel200
ID: 39703169
Thanks so much! Works perfectly!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question