I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?
The output is fullscreen with a fixed footer which displays logo, some messages and the time.
jQuery
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = ['welcome','movie']; // Which slides
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 1; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index === slides.length) { // If at end
index = 0; // Start again
}
div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
index++;
}
setInterval(function () {
loop();
}, time);
});
HTML
<iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
Using setTimeout and buttons to start and stop the loop.
http://jsfiddle.net/nirmaljpatel/75tmnmbq/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
<div id="content"></div>
</body>
<script>
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
//var slideObj = JSON.parse(slides);
//alert(slides);
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 0; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index == slides.length) { // If at end
index = 0; // Start again
}
div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
index++;
}
if(index==0)
loop();
setInterval(loop, slides[index].Time);
});
</script>
</html>
Related
I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>
I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`
I added this pop up to my site, and try add autoplay, but the problem is even the pop dont come up each time you refresh your website, you can still hear the sound.how can i stop the autoplay when pop up doesn't show?
I tried to solve problem by doing this but is still not working
<script>
$( document ).ajaxComplete(function() {
$("#popup_87 flex-video iframe").attr("src","https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
});
</script>
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&showinfo=0&autoplay=1" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
</div>
/////
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
Try
<script>
function LoadVideo() {
// If it's visible
if($("#popup_87").is(":visible"))
{
// Load the video and auto play
$("#popup_87 flex-video iframe").attr("src","http://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
}
}
</script>
EDIT since more code was added, put the trigger when they click on the link to load the video into the pop-up, otherwise don't load the video in the iframe:
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<!-- Removed the source -->
<iframe allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
I'm not sure if the following code works, but I just added LoadVideo to your script.
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
LoadVideo();
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
I've been beating my head against this all day. I'm writing this little slider/image rotating script and I cannot get it to change these elements. I can animate the images from the console with $('.slide:nth-child(1)').animate({display: 'block'});, but nothing from the script.
html
<div id="main">
<div class="wrapper">
<div class="slider">
<div class="slide">
<img src="/_site/images/interior-decor.jpg" />
</div>
<div class="slide">
<img src="/_site/images/Showhome-Living-Room.jpg" />
</div>
<div class="slide">
<img src="/_site/images/SL-Master-bedroom-1.jpg" />
</div>
</div>
</div>
</div>
javascript
var sl = {} || [];
sl.imgs = $('.slide');
sl.cnt = 1;
sl.wait = 6000;
sl.num = sl.imgs.length; //count length of .slide divs
//hide all but first image
$('.slide:nth-child(n + 2)').css('display', 'none');
//
sl.func = function() {
var prev = sl.cnt;
sl.cnt++;
var next;
if (sl.cnt > (sl.num)) {
sl.cnt = 1;
next = 1;
}
else {next = sl.cnt;}
$('.slide:nth-child(' + next + ')').animate({display: 'block'});
$('.slide:nth-child(' + prev + ')').animate({display: 'none'});
console.log('Previous: '+prev+' Next: '+next);
};
window.setInterval(function() {
sl.func()
}, sl.wait);
The script consoles out Previous: 1 Next: 2 and so forth every six seconds, but nothing changes.
You cannot animate display property. You can animate opacity or max-height instead:
$('.slide:nth-child(' + next + ')').animate({opacity: 1})
$('.slide:nth-child(' + prev + ')').animate({opacity: 0});
I have a problem. I have two .html files.
<!DOCTYPE html>
<html><head>...</head>
<body>
<ul><li id="home"><a>Home</a></li></ul>
<div class="content"></div>
<script type="text/javascript" src="Javascripts/navigation.js"></script>
</body>
</html>
and
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded">
</div>
<div id="textPanel" style="background:blue;"></div>
In my navigation.js I load the second .html file into the "content"-div of the first .html:
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
$('#textPanel').height( $('#imgPanel').height() );
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
The loading works! My question is now:
How can I get the id of the div's of the second .html I loaded into the first one?
The var = $("#textPanel"); is null.
Since the content gets loaded asynchronously, you might want to change your code like this, to execute $('#textPanel').height() when it is available:
function home(){
content.load("home.html", function(){
$('#textPanel').height( $('#imgPanel').height() );
});
}
From this specification of callbacks
EDIT
Alternative:
HTML of loaded content
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()">
</div>
<div id="textPanel" style="background:blue;"></div>
JavaScript
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
function setHeight(){
$('#textPanel').height($('#imgPanel').height());
}