We Keep Coding

Popup cannot close once opened multiple times

I have a simple popup that plays a movie and have a cross to close the popup and movie.
This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.
Anyone have any suggestions? It seems as though the cross function is only working once.
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
e.stopPropagation();
});
$('.close-video').click(function(f) {
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
height: 500px;
display: none;
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: -50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pdf-video-block">
<div class="video-img">
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="video-container">
<div class="close-video">X</div>
<iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
Thanks

You need to change your close function like:
$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {
Because after you change parent element (like below) you can't access this element anymore.
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());

It works like this for me:
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$('.video-container, .close-video').fadeIn();
e.stopPropagation();
e.stopPropagation();
});
$('.close-video').click(function(f) {
//vimeoWrap = $('.video-container');
//vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-popup {
width: 100px;
height: 100px;
}
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
margin-top: 0;
margin-left: 0;
height: 500px;
display: none;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: 100px;
left: 20px;
display: none;
cursor: pointer;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html());.
Just put the listener on the parent and it will work even when you reset the html (just changed the first line):
$('.video-container').on("click",".close-video", function(f) {
...
});

Unable to locate canvas elements present on the page using casperjs

I am new to casperjs and still exploring it. One problem i am facing here is i am unable to locate element on the page. basically there is one plot and i want to use this.test.assertExixts but it is failing.
the element i want to locate on the page's html code is:
<div id="htmlwidget_container" style="position: absolute; top: 40px; right: 40px; bottom: 40px; left: 40px;">
<div id="htmlwidget-db33fd07312733aaf5e4" class="dygraphs html-widget html-widget-static-bound" style="width: 100%; height: 100%;">
<div style="text-align: left; position: relative; width: 520px; height: 320px;">
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas class="dygraph-rangesel-bgcanvas" style="position: absolute; z-index: 9; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<canvas class="dygraph-rangesel-fgcanvas" style="position: absolute; z-index: 9; cursor: default; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 113.737px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 424.919px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<input style="display: none; position: absolute; z-index: 10; top: 231px; left: 57px;" size="2" type="text"/>
<div style="position: absolute; left: 0px; top: 0px; width: 515px; height: 28px; text-align: center; font-size: 20px; font-weight: bold; z-index: 10;">
<div class="dygraph-legend" style="position: absolute; font-size: 14px; z-index: 10; width: 250px; top: 28px; left: 264px; background: white none repeat scroll 0% 0%; line-height: normal; text-align: left; overflow: hidden;">
and casperjs code part is :
casper.then(function () {
this.waitForSelector("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", function () {
this.test.assertExists("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", "Confirmed!. element exists");
});
});
also tried to get element info using below but it is returning anything
casper.then(function () {
var temp = this.getElementInfo("#htmlwidget_container").tag;
this.echo('Image :' + temp);
});

Make an iframe as thumbnails on IE, make it not interactive

I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe.
Any other ideas of how to achieve the same result ?
EDIT:
I am using the IE 11.
The iframe is placed inside a tooltip generated by the qtip2.
The HTML generated is something like that:
<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10"
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite"
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;"
aria-atomic="false" tracking="false" data-qtip-id="10">
<div class="qtip-tip"
style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
<canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
</canvas>
</div>
<div class="qtip-titlebar">
<div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
</div>
<div class="qtip-content" id="qtip-10-content" aria-atomic="true">
<div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
URL: http://portal/sites/test2/Pages/default.aspx
</div>
<iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
</iframe>
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
</div>
</div>
And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:
.qtip-content:after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-content::after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-customized {
}
.iframeLinkUrl{
transform: scale(0.32, 0.31) translate(-73%,-99%);
}
As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>

Javascript lightbox won't function inside a html section tag

Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.

The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>

How to position Twitter follow-button on top of image

I am trying to position a Twitter follow-button on top of a background splash image using:
<style>
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.twitter-follow-button
{
position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
top: 0px;
left: 0px;
}
</style>
<div class="splash">
<img src="image_1.png">
<a href="https://..." style="position: absolute; top: 320px; left: 225px;">
<img src="image_2.png">
</a>
Email
Link
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
Follow #twitter_handle
</a>
</div>
But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.
EDIT:
This is the script Twitter provides for this button:
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}
(document, 'script', 'twitter-wjs');

I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle
#splash {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.twitter-follow-button {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
}
a.links1 {
position: relative;
display: inline-block;
float: left;
top: 258px;
width: auto;
padding-right: 20px;
color: white;
text-decoration: none;
font-weight: 900;
}
a.links {
position: absolute;
display: inline-block;
top: 320px;
float: left;
color: white;
text-decoration: none;
font-weight: 900;
}
<div id="splash">
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
<img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
<a class="links" href="#">Home</a>
<a class="links1" href="#">Mailto</a>
<a class="links1" href="#">Other Link</a>
</a>
</div>

Try using a z index like so:
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}