CODEWITHSUNDEEP
javascriptjqueryvideo
Lieutenant Dan
Lieutenant Dan

Reputation: 8264

Hiding a #div after click / play

This is what I'm trying;

$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: '<div id="playdiv" onclick="vidplay()"><img src="imgs/poster1.png" style="min-height: 300px;"/></div>',

How Can I keep the functionality of the video playing; onClick but also have the #div with the image inside of it; disappear after click. 

function vidplay() {
   var video = document.getElementById("video");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      (playdiv).style.display="none";

Library in reference: http://cuepoint.org/

SO. What you guys are saying; is this, huh?

 function vidplay() {
     var video = document.getElementById("video");
     var button = document.getElementById("play");
     if (video.paused) {
     video.play();
     $("#playdiv").hide();

But this doesn't work. Instead it just stops all functionality; and the video is frozen on first frame.

Second fix attempt.

0: '<div id="playdiv" onclick="vidplay()"><img id="supercoolimg" src="imgs/poster1.png" style="min-height: 300px;"/></div>',



 function vidplay() {
     var video = document.getElementById("video");
     var button = document.getElementById("play");
     if (video.paused) {
     video.play();
     document.getElementById('supercoolimg').style.display='none';

Fail log. 11:59AM. 11 degrees. NYC. (Not doing this outside, but still.)

Below is my FULL code pasted within pastebin.

Can anyone advise what I'm doing wrong here? Still nothing.

http://pastebin.com/MYJk5gv1

Most recent (fail) attempt;

  $(playdiv).find('img').css("display","none");

Upvotes: 0

Views: 1760

Answers (4)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

This should do it.

function vidplay() {
   var video = document.getElementById("video");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      $("#playdiv").find('img').css("display","none");
   ...

Upvotes: 1

Ricardo Vieira
Ricardo Vieira

Reputation: 740

you can use like this ;)

$("#playdiv").hide();

Upvotes: 1

Toping
Toping

Reputation: 755

Add a id to the img and 

document.getElementById('idoftheimg').style.display='none';

Upvotes: 1

sdespont
sdespont

Reputation: 14025

Using JQuery (I assume that pause property and play function exists)

Remove onclick="vidplay()" declaration and define click event like this :

$('#playdiv').click(function(){
   var $video = $("#video");
   if ($video.paused) {
      $video.play();

   //Hide the div
   $(this).fadeOut(300);
});

Upvotes: 0

Related Questions