Develop Reference

How i will add a time limit of pop up image

When click on the small image it will open as pop-up for 15 seconds, and then automatically opens the second one.
Is it possible to add certain time limit of pop-up image and after that the next image will open? closely same with Whatsapp or Facebook status.
Here is my HTML, CSS and JavaScript code:
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*End style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
<!--End image popup-->
Thank you.

window.onload = function() {
setTimeout(function() {
document.getElementById('mydiv').style.display = 'block';
}, 10000);
}

You can use this code but I guess you can easily find more examples for this on google.
$(function() {
"use strict";
var timeOut;
var intervalMs = 15000;
$(".popup img").click(function() {
var src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", src);
if (timeOut != null)
clearTimeout(timeOut);
var that = $(this);
timeOut = setTimeout(function() {
if (that.next() == null)
that.siblings().first().click();
else
that.next().click();
}, intervalMs);
});
$("span, .overlay").click(function() {
clearTimeout(timeOut);
$(".show").fadeOut();
});
});

display a popup once a day using cookies

I'm trying to display a popup once per day using cookies, but it's not working. Here's the html, css & js:
function showpopup() {
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.9);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
$('.window .close').click(function(e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
}
$(function() {
if ($.cookie('alreadyShow') === null) {
$.cookie('alreadyShow', true, {
expires: 1
});
showpopup();
}
});
#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #26262c;
display: none;
}
#boxes .window {
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 850px;
display: none;
z-index: 9999;
padding: 20px;
border-radius: 5px;
text-align: center;
}
#boxes #dialog {
width: 450px;
height: auto;
padding: 10px 10px 10px 10px;
background-color: #ffffff;
font-size: 15pt;
}
.agree:hover {
background-color: #D1D1D1;
}
.popupoption:hover {
background-color: #D1D1D1;
color: green;
}
.popupoption2:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lab.alexcican.com/set_cookies/cookie.js"></script>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
<div id="san">
<a href="#" class="close agree">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" />
</a>
<br><br> Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>.
</div>
</div>
<div id="mask"> </div>
</div>

Your problem is the condition below:
if ($.cookie('alreadyShow') === null)
When the cookie is not set $.cookie() returns undefined.
Maybe you want to read about the difference between undefined and null.
Whatever of the next statements will work:
if ($.cookie('alreadyShow') === undefined)
if ($.cookie('alreadyShow') == null)
if (!$.cookie('alreadyShow'))
Also, you are using a very old version (v1.4.0) of the js-cookie library. Its author moved the code to a new project after removing the jQuery dependency. You should consider to upgrade and to point out to a proper CDN.
Note that the new project use slightly different semantics. Your code would look like below:
if (!Cookies.get('alreadyShow')) {
Cookies.set('alreadyShow', true, {
expires: 1
});
showpopup();
}

Draggable split-pane windows in flexbox can't get past child elements [duplicate]

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
I implemented my own split-pane with HTML/JS/CSS Flexbox.
I'm having trouble with the splitter in the following case- one of the panels has a fixed size (in px), and the other one is set to grow (flex-grow: 1).
In case the other panel has children with size, it won't scroll to the end. It gets stuck at the size of the children.
Can this be fixed with CSS on the split-pane panels but not on the children?
It's very important for me to use flex as I want to maintain responsiveness of my application, and want to avoid fixed sizes wherever I can.
This is a JSFiddle sample
of my question.
Code snippet given below. Thanks!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>

In case the other panel has children with size, it won't scroll to the end. It gets stuck at the size of the children.
This is because an initial setting of a flex container is min-width: auto on the flex items. This means that a flex item, by default, cannot be smaller than the size of its content.
Can this be fixed with CSS on the split-pane panels but not on the children?
Yes. Override the default with min-width: 0 or with any overflow other than visible:
.c1 {
background-color: blue;
flex: 1;
height: 100%;
overflow: hidden; /* or min-width: 0 */
}
revised fiddle
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>

It gets stuck at the size of the children
This is expected behavior when using a flexbox. I guess if you want to scroll to the end then you can use position: absolute for the grandchild relative to c1:
.grandchild {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
Give overflow: hidden to c1 too:
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
Cheers!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>
Solution:
So I guess your strategy should be to use an absolute grandchild that fills the whole side-panel, and then put the content inside like:
<div class="grandchild">
<div class="content"></div>
</div>
and change these styles:
.grandchild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.grandchild .content{
background-color: red;
width: 50px;
height: 50px;
}
Example below:
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.grandchild .content{
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild">
<div class="content"></div>
</div>
</div>
<div id="c2" class="c2"></div>
</div>

JQuery Custom LightBox - Opacity Fade

I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}

You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO

Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.

Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.

how do you add a poster image in an <iframe></iframe> tag before the start of a video?

need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown.
would appreciate all the help I could get.
( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)
Thank you
Falkon

Try this as you have jquery tagged.
$(function() {
var videos = $(".video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }
.video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.video.player img { display: none; }
.video.player:after { display: none; }
<div class="video">
<img src="poster.jpg">
<iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>