I am trying to get about 8 or 9 divs to fade in and fade out in timed intervals. One after another in 5 second intervals overlapping each other by 1 second. I am not really sure where to start. I am thinking the CSS and then create a js for an onclick array...
Any ideas?
Chris
Working code :-)
</script>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 300;
function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 7 * 1000); // do this every 5 seconds
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
</script>
<!--#include file="header.asp"-->
<% if Request("interactive") = "on" then %>
<form name="tutorial">
<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>
<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>
<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>
<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>
<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>
<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>
<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>
<% end if %>
Related
I am trying to display images from a database with a time delay between each image. The time delay is selectable from the user interface
and stored in seconds in the same record as the image. I aalready have the images displaying but I need to incororate the dynamic time delay.
The time delay is stored in a field named "TimeLapse". Below I have tried to used the content of "TimeLapse as $HoldTime each time
the while loop display a new image.
Image one has a TimeLapse of "5000".
Image two has a TimeLapse of "15000".
But it looks like it's only using the first TimeLapse of 5000 for both images."
Can anyone see how I can do this.
PHP CODE
while($row_fb = mysqli_fetch_array($fb)){ ?>
<?php $url = $ImagePath.''.$row_fb['SignageImageName'];
$HoldTime = $row_fb['TimeLapse']?>
<div class="outer">
<div class="banner-container">
<div id="wrapper">
<a><img src="/<?php echo $url;?>" class="responsive"/></a>
</div>
</div>
</div>
<?php
}
JAVASCRIPT
(function() {
var a = $('.outer').children();
var index = 0;
run()
function run() {
a.filter('.active').fadeOut(500).removeClass('active');
a.eq(index).fadeIn(500).addClass('active');
index = (index + 1) % a.length;
setTimeout(run, <?php echo $HoldTime;?>);
}
})();
I would put the delay time into an HTML data- attribute and read it in the JavaScript to set the delay. (Note use of alternative syntax and short echo tags, this makes your PHP code more readable when mixed with HTML.)
<?php while($row = $fb->fetch_array()): ?>
<div class="outer">
<div class="banner-container" data-delay-time="<?=$row['TimeLapse']?>">
<div id="wrapper">
<a>
<img src="/<?=$ImagePath . $row['SignageImageName']?>" class="responsive"/>
</a>
</div>
</div>
</div>
<?php endwhile ?>
The JS has been cleaned up to eliminate any dependency on variables from outside the function. Instead it just looks for the active banner's next sibling, looping to the beginning if it doesn't have one. Some test HTML is included for a runnable example.
(function() {
$("div.outer div.banner-container").hide();
run();
function run() {
// get a list of all the banners
var banners = $("div.outer div.banner-container");
if (!banners.length) {
return;
}
// active is the one with "active" class, or the first one
var active = banners.filter(".active").first();
if (!active.length) {
active = banners.first();
}
// get the next one or loop to the beginning again
var next = active.next("div.banner-container");
if (!next.length) {
next = banners.first();
}
active.fadeOut(500).removeClass("active");
next.fadeIn(500).addClass("active");
// get the delay time from the data-delay-time attribute
setTimeout(run, next.data("delayTime"));
}
})();
.active {
background: blue;
color: white
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
<div class="banner-container" data-delay-time="1000">foo</div>
<div class="banner-container" data-delay-time="2000">bar</div>
<div class="banner-container" data-delay-time="6000">baz</div>
<div class="banner-container" data-delay-time="10000">boo</div>
</div>
I've got 3 individual slide down menu's at the top of my page.
Page Menu
Account dropdown
Cart Dropdown
I've created individual open and close functions for each one
function menu_open(){
document.getElementById("myNav_overlay").style.height = "100%";
document.getElementById("myNav").style.height = "100%";
$('.menu-link').text("menu_open");
}
function menu_close() {
document.getElementById("myNav_overlay").style.height = "0%";
document.getElementById("myNav").style.height = "0%";
$('.menu-link').text("menu");
}
function account_open(){
document.getElementById("myAccount_overlay").style.height = "100%";
document.getElementById("myAccount").style.height = "100%";
$('.account-link').text("person");
}
function account_close() {
document.getElementById("myAccount_overlay").style.height = "0%";
document.getElementById("myAccount").style.height = "0%";
$('.account-link').text("person");
}
function cart_open(){
document.getElementById("myCart_overlay").style.height = "100%";
document.getElementById("myCart").style.height = "100%";
$('.cart-link').text("shopping_cart");
}
function cart_close() {
document.getElementById("myCart_overlay").style.height = "0%";
document.getElementById("myCart").style.height = "0%";
$('.cart-link').text("shopping_cart");
}
and then 3 individual click count functions to determine if the menu needs to open or close.
$(function() {
var menuclickCount = 0;
var accountclickCount = 0;
var cartclickCount = 0;
$('.menu-link').click(function () {
if(menuclickCount%2==0){
//do when open
menu_open();
account_close();
cart_close();
}else{
//do when closed
menu_close();
}
clickCount++;
});
$('.account-link').click(function () {
if(accountclickCount%2==0){
//do when open
account_open();
menu_close();
cart_close();
}else{
//do when closed
account_close();
}
accountclickCount++;
});
$('.cart-link').click(function () {
if(cartclickCount%2==0){
//do when open
cart_open();
menu_close();
account_close();
}else{
//do when closed
cart_close();
}
cartclickCount++;
});
});
This seems rather large compared to what it has to be and seems like there may be a better/simpler way of doing it. But honestly not sure how this would typically be done.
Is it better to leave a setup like this as is where each one is controlled individually and manually closes the other? OR, is it better to combine these into a more robust, smaller function that still controls them as needed?
If it is better to combine into a simpler function, how would this be done to where it still opens and closes each dropdown section?
I took 1 working function and duplicated it to make this work as is. So now I'm curious to see how this compares to what is considered industry standard and practical.
The HTML is simple....
Menu content
<div id="myNav_overlay" class="overlay_background"></div>
<div id="myNav" class="nav-overlay">
<div class="overlay-content">
MENU
</div>
</div>
Account content
<div id="myAccount_overlay" class="overlay_background"></div>
<div id="myAccount" class="account-overlay">
<div class="overlay-content">
ACCOUNT
</div>
</div>
Cart content
<div id="myCart_overlay" class="overlay_background"></div>
<div id="myCart" class="cart-overlay">
<div class="overlay-content">
CART
</div>
</div>
Without getting into styling the example too much, using the wonder of jQuery, you can do this:
(1) On click, select all menu containers (class .ddown in my example)
(2) return all menu containers to their default height of zero (by removing the .showMenu class with its new height)
(3) for the clicked container only, apply a style that increases container height.
$('.ddown').click(function(){
$('.ddown').removeClass('showMenu');
$(this).addClass('showMenu');
});
.container{height:100px;}
.ddown{display:inline-block;width:100px;border:1px solid #ccc;overflow:hidden;}
.mnuTitle{height:20px;}
.mnuContent{height:0;background:white;}
.showMenu{height:100px;background:palegreen;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div id="myNav" class="ddown">
<div class="mnuTitle">Menu</div>
<div class="mnuContent">
MENU CONTENT
</div>
</div>
<div id="myAccount" class="ddown">
<div class="mnuTitle">Account</div>
<div class="mnuContent">
ACCOUNT CONTENT
</div>
</div>
<div id="myCart" class="ddown">
<div class="mnuTitle">Cart</div>
<div class="mnuContent">
CART CONTENT
</div>
</div>
</div><!-- .container -->
I have 5 divs every div call H4.
I create this by javascript to get the result and it works but now I need it to do this automatically in sequence without user interactivity to be like auto slider, for example, caption1 should click first and show caption1content after 8 seconds caption 2 clicks and show captoin2content and so on how can I do this by javascript.
JS:
$("#caption1").on('click', function() {
$("#caption1content").fadeIn();
$("#caption2content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption2").on('click', function() {
$("#caption2content").fadeIn();
$("#caption1content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption3").on('click', function() {
$("#caption3content").fadeIn();
$("#caption1content,#caption2content,#caption4content,#caption5content").fadeOut();
});
$("#caption4").on('click', function() {
$("#caption4content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption5content").fadeOut();
});
$("#caption5").on('click', function() {
$("#caption5content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption4content").fadeOut();
});
HTML:
<div id="caption">
<h4 id="caption1content" class="ccntnt">text1</h4>
<h4 id="caption2content" class="ccntnt">text2</h4>
<h4 id="caption3content" class="ccntnt">text3</h4>
<h4 id="caption4content" class="ccntnt">text4</h4>
<h4 id="caption5content" class="ccntnt">text5</h4>
</div>
<div id="captionbtns">
<div id="caption1">text1</div>
<div id="caption2">text2</div>
<div id="caption3">text3</div>
<div id="caption4">text4</div>
<div id="caption5">text5</div>
</div>
well it is pretty simple you can use setInterval and you can do it like this not the perfect way but working.
it will click after every 8 seconds it will only loop through it once and further you can use a if condition to reset the count if you want to run it again and again;
let count = 1;
setInterval(function(){
$(`#caption${count}`).click();
count++;
},8000);
I have inside 3 divs inside one one aside another and every of those 3 divs shows one image.
How to make that at the time only one is visible and after 5 seconds visible fade out and next fade in and same in round indefinite time.
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
You can Do Some thing like This
var i = 0;
window.setInterval(function() {
$("#container").find("div").each(function() {
$(this).hide();
});
$("#container").find("div:eq(" + i + ")").slideDown(500);
i++;
if (i==2) {
i = 0;
}
}, 5000);
I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.
I have this wrapped in a setInterval function. Is this possible?
So far, I’ve got:
var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
// …
}, 2000);
"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).
This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.
sketch: http://jsfiddle.net/fl00r/HSGF3/4/
<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>
<script>
$(function(){
fadeByEachSlice(".hidden",6)
})
function fadeByEachSlice(object, step){
var i = 0;
objects = $(object)
function nextSlice(){
if(i%step == 0){
if( i <= objects.length ){
slice = objects.slice(i, step+i);
fadeSlice(slice)
}
}
}
function fadeSlice(slice){
$(slice).fadeIn().delay(1000).fadeOut("fast", function(){
i+=1; nextSlice();
})
}
nextSlice()
}
</script>
you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.