I made a little jQuery code that changes the background image in the box.
HTML
<div class="content-wrapper" id="box">
<div class="content">
CONTENT
</div>
</div>
jQUERY
slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide);
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
setInterval(function() {
$("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
slide++; if(slide>6) slide=1;
}, 6000
);
CSS
.content-wrapper{
display:table;
width:100%;
color:black;
text-align:center;
margin:0 0 0 0 !important;
padding:0px !important;
height:600px;
}
.content-wrapper > .content{
width:100%;
display: table-cell;
vertical-align:middle;
text-align:center;
font-size:36px;
font-weight:bold;
}
#box {
background-repeat: no-repeat;
background-position:center top;
background-attachment:fixed;
background-size:cover;
}
#box > .content{
background:rgba(0,0,0,0.5);
color:#FFF;
}
DEMO
My idea is when page is loaded each time show random pictures and start slide that changes image every 6 seconds. All this works nicely, but I do not know how to make a nice transition. fadeIn() or fadeOut() is out of the question because over the images I have fixed text content. I do not want to use too large libraries for background slider, so I'm interested in the simplest solution. Thank you very much.
so if you want to slide left and right Fiddle:Demo:
$(document).ready(function () {
var delay = 3000,
fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i % len]).hide("slide", function(){
$(banners[++i % len]).show("slide", {
direction: "left"
});
setTimeout(cycle, delay);
});
}
});
if you want to slide up and down : Fiddle
$(document).ready(function() {
var delay = 3000, fade = 1000;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i%len]).slideUp(fade, function() {
$(banners[++i%len]).slideDown(fade, function() {
setTimeout(cycle, delay);
});
});
}
});
you can try to combine those to come up with a nice transition.
Related
Here's the thing:
got multiple divs which are on window.onload hidden via CSS
upon window.onload JS in set intervals make random div shown for some amount of time
every time some of these random divs becomes shown it pushes other divs (which are always shown) down below and when it becomes hidden it will push the other divs of class .wanna-stay-where-I-am back on original position
I tried to apply for both classes combinations of properties: position:relative, white-space: pre-wrap;, overflow:hidden or even wrap those to superordinal divs with fixed heigth, f.e. 50 to 50 %, but still can't figure this out for life..
var todo = null;
var div_number;
var used_numbers;
window.onload = (event) => {
div_number = 1;
used_numbers = new Array();
if (todo == null) {
todo = setInterval(showQuotes, 3000);
}
}
function showQuotes() {
used_numbers.splice(0, used_numbers.length);
$('.bad-pusher').hide();
for (var inc = 0; inc < div_number; inc++) {
var random = get_random_number();
$('.bad-pusher:eq(' + random + ')').show();
}
$('.bad-pusher').delay(4000).fadeOut(1000);
}
function get_random_number() {
var number = randomFromTo(0, 100);
if ($.inArray(number, used_numbers) != -1) {
return get_random_number();
} else {
used_numbers.push(number);
return number;
}
}
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
.bad-pusher {
float:left;
font-size:17px;
max-width: max-content;
max-height: content;
border:1px solid #6A6A6A;
color:#6A6A6A;
margin:0.3%;
padding:0px 10px;
transition: 0.2s;
display: none;
white-space: pre-wrap;
}
.wanna-stay-where-I-am {
float:left;
font-size:30px;
font-weight: 200;
max-width: content;
max-height: content;
border:1px solid #0074FF;
color:#0074FF;
margin:.3%;
padding:2px 10px;
transition: 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="bad-pusher">I am pushing others down</div>
<div id="100" class="bad-pusher">I am pushing others down</div>
<div class="wanna-stay-where-I-am">Hey stop pushing me down</div>
QUESTION: How to amend the code so the class .bad-pusher won't have any positioning impacts on class .wanna-stay-where-I-am and so the content on page will remain fixed even on .show() and .hide() changes which are underway on page load via JS.
Sorry if that's messy, tried to clarify that the best I can.
Anyone?
I have a slideshow of 5 images, every couple seconds. It's supposed to go to the next image, and loop.
What is currently occurring is the first image shows up, then transitions to the next. When the next appears, it flashes back to the first image. Then it goes to the third image as it should in the series, but flashes back to the first image again. This continues all the way through to the fifth image.
But once it cycles through to the first image again (after going through all five) everything works fine from there on. Each image sits for 3 seconds and then moves on, no jumping back to image one or anything.
Here's the code I'm using.
Html:
<div id="slideshow">
<div>
<img src="Images/1.gif">
</div>
<div>
<img src="Images/2.gif">
</div>
<div>
<img src="Images/3.gif">
</div>
<div>
<img src="Images/4.gif">
</div>
<div>
<img src="Images/5.gif">
</div>
</div>
CSS:
#slideshow {
clear: both;
margin: 50px auto;
position: relative;
max-width: 960px;
height: 643px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow img {
max-width: 100%;
}
JS:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(800)
.next()
.fadeIn(800)
.end()
.appendTo('#slideshow');
}, 3000);
The actual site I'm putting together is here so you can see it in action:
schmelzerwedding.com
Any help to make it not jump back like that would be greatly appreciated. Thank you!
Like I mentioned in my comment I think the use of appendTo() may be the culprit. I also believe it's not the best thing to do performance wise.
Here's a version that simply keeps track of which slide we're on and increases the number.
(function () {
var slideshow = document.getElementById('slideshow');
var slides = slideshow.getElementsByTagName('img');
var currSlide = 0;
var numSlides = slides.length;
// Set first slide to active
slides[currSlide].classList.add('active');
setInterval(function () {
slides[currSlide].classList.remove('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides[currSlide].classList.add('active');
}, 2000);
})();
#slideshow {
position: relative;
width: 200px;
height: 200px;
}
#slideshow img {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .2s ease-out;
}
#slideshow img.active {
opacity: 1;
}
<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>
Edit: If you (for some reason) don't want to use pure JS, here's the same code in jQuery:
(function () {
var slideshow = $('#slideshow');
var slides = slideshow.find('> *');
var currSlide = 0;
var numSlides = slides.length;
slides.eq(currSlide).addClass('active');
setInterval(function () {
slides.eq(currSlide).removeClass('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides.eq(currSlide).addClass('active');
}, 200);
})();
Using jQuery:
//Just for demo - takes a few secs to load the images
setTimeout(function(){
$('#ld').hide();
},500);
var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);
function showSlide() {
cnt++;
cnt = (cnt>3)?0:cnt;
$("#slideshow > div").fadeOut();
$("#slideshow > div:eq("+cnt+")").fadeIn();
setTimeout(showSlide, 2000);
}
#slideshow {clear:both;margin:50px auto;position:relative;max-width:960px;height:643px;padding:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}
#slideshow > div {position:absolute;top:10px;left:10px;right:10px;bottom:10px;}
#slideshow img {max-width:100%;}
/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div><img src="http://placekitten.com/550/200"></div>
<div><img src="http://placekitten.com/548/200"></div>
<div><img src="http://placekitten.com/550/202"></div>
<div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>
Boostrap cannot pickup jQuery right away, try changing the order that they are called in the head.
I have created the following code that on page load adds opacity: 1 to all divs on the page. In doing so all the images are seen on pageload, but I want each to fade in slowly and after one has completely loaded/is visible I want the 2nd image to load exactly the same then followed by the third.
How can I accomplish this via the code below; what needs to be changed/added? Please note it must use pure Javascript; no CSS3 or jQuery as the proprietary framework I'm working in requires pure JS.
var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');
function fadeIn() {
imageOne.style.opacity = '1';
imageTwo.style.opacity = '1';
imageThr.style.opacity = '1';
}
#imageOne {
background: url('https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg');
background-repeat: no-repeat;
width: 50px;
height: 50px;
margin-right: 20px;
float: left;
opacity: 0;
}
#imageTwo {
background: url('http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png');
background-repeat: no-repeat;
width: 50px;
height: 50px;
margin-right: 20px;
float: left;
opacity: 0;
}
#imageThr {
background: url('http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png');
background-repeat: no-repeat;
width: 50px;
height: 50px;
float: left;
opacity: 0;
}
<body onload="fadeIn()">
<div id="wrapper">
<div id="imageOne"></div>
<div id="imageTwo"></div>
<div id="imageThr"></div>
</div>
</body>
You can use CSS transitions, which is faster and won't require jQuery.
.fadeIn {
transition: opacity 1.25s;
}
Add the class fadeIn to your image elements, and now it'll fade.
To make it fade one after the other, use JavaScript timers to space out setting opacity to 1. Example:
var elements = [ /* Image elements to fade */ ];
for (var i = 0; i < elements.length; i++) {
setTimeout(function() {
elements[i].style.opacity = 1;
}, 1250 * i);
}
You can use callback function of fadeIn to load other image
function fadeIn() {
$("#imageOne").fadeIn("fast",function(){
$("#imageTwo").fadeIn("fast", function(){
$("#imageThr").fadeIn("fast");
});
});
}
This is what I came up with so far. Unfortunately, I haven't figure how to have them fade in, as the below just makes them appear one after the other. Though it's pure Javascript.
Any suggestions?
var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');
function fadeIn(element) {
element.style.opacity += 0.9;
if (element.style.opacity < 1) {
setTimeout(function() {
fadeIn(element);
}, 100);
}
}
setTimeout(function() {
fadeIn(document.getElementById("imageOne"));
}, 1000);
setTimeout(function() {
fadeIn(document.getElementById("imageTwo"));
}, 5000);
setTimeout(function() {
fadeIn(document.getElementById("imageThr"));
}, 10000);
I am using javascript to change my css class background image every few seconds. It is working great the problem is it just stops after it shows the last image. Can anyone show me what to add to this code so that it will continuously loop itself?
$(window).load(function() {
$(document).ready(function() {
setInterval(fadeDivs, 5000); //call it every 2 seconds
function fadeDivs() {
var visibleDiv = $('.bckgnd:visible:first'); //find first visible div
visibleDiv.fadeOut(400, function() { //fade out first visible div
var allDivs = visibleDiv.parent().children(); //all divs to fade out / in
var nextDivIndex = (allDivs.index(visibleDiv) + 1) % allDivs.length; //index of next div that comes after visible div
var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div
var lastDiv = $('.backgnd3');
var firstDiv = $('.backgnd1');
if (currentDiv != lastDiv) {
var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div
} else {
var nextdiv = firstDiv; //the next div will be the first div, resulting in a loop
}
nextdiv.fadeIn(400); //fade it in
});
};
});
});
.backgnd1 {
width: 100%;
height: 452px;
background: url ('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/backgnd1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
}
.backgnd2 {
width: 100%;
height: 452px;
background-image: url ('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/the_lodge.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
}
.backgnd3 {
width: 100%;
height: 452px;
background-image: url('http://quaaoutlodge.com/sites/all/themes/marinelli/img/backgrounds/getting_here.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
}
.index_roof_background {
background-color: #000;
width: 1600px;
height: 452px;
margin: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
}
<div class="index_roof_background">
<div style="position:absolute; z-index: 2;display:block; background-color:#000;" class="bckgnd backgnd1"></div>
<div style="position:absolute; z-index: 2;display:none; background-color:#000;" class="bckgnd backgnd2"></div>
<div style="position:absolute; z-index: 2;display:none; background-color:#000;" class="bckgnd backgnd3"></div>
</div>
A better approach:
You don't need all those backgnd2 classes since you have only those DIVs inside a common parent.
Don't use inline styles! Use your stylesheet.
Don't use fixed width (px). Use % for responsive design.
2000*1331px images are
not suited for the web. Specially not for mobile devices. Care about
your user's bandwidth. When setting a background-image to cover you
don't need to worry about it being repeated.
Make your JS more flexible to element's indexes, count your elements using length.
Create a "current index counter", iterate over it increment it and
resetting using % (reminder).
For a better UX, allow the user to pause on hover.
Here's an eample:
jQuery(function($) { // DOM ready. $ alias in scope.
$('.gallery').each(function() {
var $gal = $(this),
$sli = $gal.find(">*"),
tot = $sli.length,
c = 0,
itv = null;
$sli.hide().eq(c).show(); // Hide all but first slide
function anim() {
c = ++c % tot; // increment/reset counter
$sli.fadeOut().eq(c).stop().fadeIn();
}
function play() {
itv = setInterval(anim, 3000);
}
function pause() {
clearInterval(itv);
}
$gal.hover(pause, play); // Pause on hover
play(); // Start loop
});
});
.gallery {
position: relative;
height: 200px;
}
.gallery>* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none 50%;
background-size: cover;
}
<div class="gallery">
<div style="background-image:url(http://placehold.it/800x600/0bf?text=1)"></div>
<div style="background-image:url(http://placehold.it/800x600/f0b?text=2)"></div>
<div style="background-image:url(http://placehold.it/800x600/0fb?text=3)"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First put the firstDiv, lastDiv in their own variables.
Then you will need something like this
if (currentDiv != lastDiv) {
var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div
} else {
var nextdiv = firstDiv; //the next div will be the first div, resulting in a loop
}
nextdiv.fadeIn(400); //fade it in
Tell me if you need more help.
You need to use 2 timeouts to make it loop. A timeout only fires once. The FadeOutDivs function counts down, each time setting a timeout to call itself. Then at zero it fades sets a timeout the call fadeInDivs which start the whole cycle over.
I've got this running on codepen.
$(document).ready(function () {
var interval = 2000;
var fadeDuration = 400;
var allImages = $('.bckgnd');
var count = allImages.length - 1;
var imageCount = allImages.length;
setTimeout(fadeOutDivs, interval);
function fadeOutDivs() {
allImages.eq(count).fadeOut(fadeDuration);
console.log(count);
if (count > 1) {
count--;
setTimeout(fadeOutDivs, interval);
} else {
count = allImages.length - 1;
setTimeout(fadeInDivs, interval)
}
}
function fadeInDivs() {
allImages.fadeIn(fadeDuration);
setTimeout(fadeOutDivs, interval);
}
});
I'm trying to make a background fade in when you mouse over a box.
Box1 is the box I mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. I need to add some kind of stop function..
Content is a text that changes in a contentbox when I mouseover. This works fine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
I've also tried with var, but I still have the same problem. If I mouseover fast, the fading keeps running.
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
Css code -v-
/* CSS Document */
body
{
background-color:#B1EB78;
}
#wrapper
{
border:5px white solid;
border-radius:15px;
background-image:url(../images/mill.jpg);
}
#header
{
height:120px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
#content
{
height:250px;
background-image:url(../images/trans_white.png);
border:1px black solid;
border-radius:5px;
}
#space
{
height:40px;
}
#space2
{
height: 10px;
}
#box1
{
height:250px;
background-image:url(../images/trans_green.png);
}
#background
{
width:100%;
height:100%;
border-radius:9px;
}
.hover1
{
background-color:red;
}
.nohover
{
}
var goeft = 0;
$("#box1").mouseenter(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseleave(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
I have no idea about the classes but i think mouseenter and mouseleave are better alternative for mouseout and mouseover