Fading the background image of the section - only background - javascript

I have this section
<section ID="Cover">
<div id="searchEngine">hello</div>
</section>
I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like
$("#Cover").css("background-image").fadeOut(); ??
(I am also setting this image for the first time in the below function)
var imageID=0;
var time=0;
function changeimage(every_seconds)
{
//change the image
if(imageID==0)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover1.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
time=1000;
}
else
{
if(imageID==1)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover2.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==2)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover3.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==3)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover4.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==4)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover5.jpg)");
$("#Cover").fadeIn(time);});
imageID=0;
}
}
}
}
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}

I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img.
Here is a working sample.
<html>
<head>
<style type="text/css">
#bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
#mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
</style>
</head>
<body>
<img src="yourImg.jpg" id="bgImg">
<section id="mainContent">
<h2>Your Heading</h2>
<p>Your content....</p>
<button id="inBtn">Background Image fade in</button>
<button id="outBtn">Background Image fade out</button>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
/*
resize function
From Dave Jay's Blog
url: http://davejay.exit42design.com/entry/Design/44/
*/
function resize(){
$("#bgImg")
.width($(window).width())
.height($(window).width() * .67);
if($("#bgImg").height() <= $(window).height()){
$("#bgImg")
.height($(window).height())
.width($(window).height() * 1.5);
}
}
$(document).ready(function(){
resize();
$("#inBtn").on("click",function(){
$("#bgImg").fadeIn();
});
$("#outBtn").on("click",function(){
$("#bgImg").fadeOut();
});
});
$(window).resize(function(){ resize(); });
</script>
</html>

Related

Convert page scroll to scroll percentage of inner div

After getting my last problems solved properly I've got a second problem.
I've got a div which is fixed. Inside of the fixed div is another div which is scrollable. I want to achieve that if I scroll anywhere on the page, even out of the scrollable div, that the scroll action only applies to the scrollable div, not the fixed div.
I made an example of the problem. I want to achieve that if I am scrolling anywhere, even in the red part, that the scroll action is in the red div.
Demo:
$(window).scroll(function () {
var s = $(this).scrollTop();
var row1 = $('#row1');
if(s>500){
row1.css({
'position': 'relative'
});
}
});
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: scroll;
height: 100vh;
}
#row1 {
width: 100vw;
height:100vh;
position: fixed;
background-color:red;
}
.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}
<div class="row" id="row1">
<div class="col-sm-6"></div>
<div class="col-sm-6" id="test">scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
$(function () {
var myCounter = 0,
myOtherCounter = 0;
var scroll = 0;
$("#test").scroll(function () {
myCounter = myCounter + 1;
$("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
});
//Firefox
$('#row1').bind('DOMMouseScroll', function (e) {
if (e.originalEvent.detail > 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#row1').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
function scrollDown() {
//scroll down
console.log('Down ' + scroll);
if (scroll < $('#test').find('div').height() - $('#test').height() + 20) {
scroll = $('#test').scrollTop() + 5;
$('#test').scrollTop(scroll);
}
};
function scrollUp() {
//scroll up
console.log('Up ' + scroll);
if (scroll > 0) {
scroll = $('#test').scrollTop() - 5;
$('#test').scrollTop(scroll);
}
};
});
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: scroll;
height: 100vh;
}
#row1 {
width: 100vw;
height:50vh;
position: fixed;
background-color:red;
}
.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="row1">
<div class="col-sm-6" id="test"><div>scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div></div>
<div id="log"></div>
<div id="log2"></div>
</div>

Developing image slider using jQuery and javascript

Below is my code in that i have developed three functions to get desired image by scrolling and i am having "prev" and "next" divs to move images.It looks good for me but there must be something wrong which is not letting it works.
<!DOCTYPE html>
<html>
<head><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" >
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$("document").ready(function(){
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right:0px});
$(prevImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right:0});
$(nextImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});
</script>
<style>
.container {
width : 90%;
margin-left: 5%;
margin-right: 5%;
height : 400px;
border : 2px solid black;
position: relative;
}
img {
width:100%;
height:400px;
position: absolute;
}
.prev, .next {
position :relative;
cursor : pointer;
width : 4%;
height: 70px;
border : 1px solid black;
margin-top: -250px;
font-size: 40px;
color:#fff;
padding-left:10px;
background: #000;
opacity: .5;
}
.next {
float:right;
margin-right: 0px;
}
.prev{
float:left;
margin-left: 0px;
}
.prev:hover, .next:hover{
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="slide1.jpg" class="slide" />
<img src="slide2.jpg" class="slide" />
<img src="slide3.jpg" class="slide" />
<img src="slide4.jpg" class="slide" />
</div>
<div class="prev" >❮</div>
<div class="next" >❯</div>
</body>
</html>
You have syntax errors
in $().css({right: 0px}); should by $().css({right: '0px'});
Getting html elements also must be after $("document").ready, because your html elements do not exist before.
It works for me:
$("document").ready(function(){
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right: '0px'});
$(prevImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right: '0px'});
$(nextImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});

Need add to my jQuery function infinite loop

He needs to do a loop by acting in this way:
$(window).load(function(){
$('.slogan').delay('2000').fadeOut('300', function(){
$('.slogan2').fadeIn('slow').removeAttr('display');
});
});
div .slogan for 3 seconds and div .slogan2 for 3 seconds and 3 seconds after the return to the div .slogan - and so on to infinity.
Can someone please add something to my code?
The following will overlap the fades
function fade(delay, speed) {
$('.slogan1').delay(delay).fadeToggle(speed);
$('.slogan2').delay(delay).fadeToggle(speed, function() {
fade(delay, speed)
});
}
fade(2000, 1000);
.slogan {
width: 200px;
height: 200px;
position: absolute;
}
.slogan {
background: blue;
}
.slogan2 {
background: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slogan slogan1"></div>
<div class="slogan slogan2"></div>
The following will play the fade one after the other
function fade(delay, speed) {
var slogan1 = $('.slogan1'),
slogan2 = $('.slogan2');
slogan1.delay(delay).fadeOut(speed, function() {
slogan2.fadeIn(speed, function() {
slogan2.delay(delay).fadeOut(speed, function() {
slogan1.fadeIn(speed, function() {
fade(delay, speed)
});
})
});
});
}
fade(2000, 1000);
.slogan {
width: 200px;
height: 200px;
}
.slogan {
background: blue;
}
.slogan2 {
background: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slogan slogan1"></div>
<div class="slogan slogan2"></div>
Move the animation to a separate function and call it when it's finished, the long version would be:
function animateSlogan() {
$('.slogan')
.delay('3000')
.fadeOut('slow', function() {
// when fadeout complete, start next fadeIn
$('.slogan2')
.fadeIn('slow')
.delay('3000')
.fadeOut('slow', function() {
// when fadeout complete, fadein the original as it's not at the start
$('.slogan').fadeIn('slow', function() {
// when fadein complete, start again
animateSlogan();
});
})
});
}
$(function() {
animateSlogan();
});
you can do it in the following way:
HTML:
<div class="slogan">slogan</div>
<div class="slogan2" style="display: none;">slogan2</div>
JavaScript:
$(document).ready(function(){
doInfiniteLoop(3000, 1000);
});
function doInfiniteLoop(delayTime, fadeTime){
$('.slogan').delay(delayTime).fadeOut(fadeTime,function(){
$('.slogan2').fadeIn(fadeTime,function(){
$('.slogan2').delay(delayTime).fadeOut(fadeTime,function(){
$('.slogan').fadeIn(fadeTime, function(){
doInfiniteLoop(delayTime, fadeTime);
});
});
});
});
}
DEMO

How to call a image class on a regular interval

I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again
html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/
Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>
#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>
not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});
what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .

Non maximized browser messes up background image

I'm attempting to create a full screen changeable background image. I've spent a long time perfecting it to work on other PC's. It works perfectly on my screen, but on other monitors it changes.
The problem now is that the image is all over the place if the browser is not maximized.
It works fine once maximized.
The background image changes every 5 seconds, so it's not as simple as just setting the background image. Here is my code:
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementById("myimage").src="Minecraft.jpg";
imageID++;
}
else if(imageID==1)
{
document.getElementById("myimage").src="Minecraft1.jpg";
imageID++;
}
else if(imageID==2)
{
document.getElementById("myimage").src="Minecraft2.jpg";
imageID++;
}
else if(imageID==3)
{
document.getElementById("myimage").src="Minecraft4.jpg";
imageID++;
}
else if(imageID==4)
{
document.getElementById("myimage").src="Minecraft5.jpg";
imageID++;
}
else if(imageID==5)
{
document.getElementById("myimage").src="Minecraft6.jpg";
imageID++;
}
else if(imageID==6)
{
document.getElementById("myimage").src="Minecraft7.jpg";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
<style>
#myimage {
width: 100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecraft.jpg'/>
</div>
</body>
----------Edit--------------
I used your code (Hopefully correctly) but now the image isn't loading at all.
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementByTagName("body").className="pic1";
imageID++;
}
else if(imageID==1)
{
document.getElementByTagName("body").className="pic2";
imageID++;
}
else if(imageID==2)
{
document.getElementByTagName("body").className="pic3";
imageID++;
}
else if(imageID==3)
{
document.getElementByTagName("body").className="pic4";
imageID++;
}
else if(imageID==4)
{
document.getElementByTagName("body").className="pic5";
imageID++;
}
else if(imageID==5)
{
document.getElementByTagName("body").className="pic6";
imageID++;
}
else if(imageID==6)
{
document.getElementByTagName("body").className="pic7";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>
<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecrft.jpg'/>
</div>
</body>
What am I doing wrong?
Using a 100% x 100% absolutely positioned div for your background image is probably what's causing the issue.
Switch to CSS classes on < body >
.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc
And then instead of changing the src of the image tag you would change the class of < body >. This will allow you to remove the absolute positioning of that div and layout the site "normally".
You can do something like this:
var imageClass = 'pic';
if(imageID) {
imageClass += imageID;
}
document.body.className = imageClass;
imageID++;
And CSS:
.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}
etc.
To resize the background, you can choose the CSS alternative, which best fits to your site, for example:
body {
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: cover cover;
}
A live demo at jsFiddle.

Categories