I just got started with JQuery and JavaScript today, so it's possible that I'm doing something very basic wrong. Basically I have a in the mark-up, JavaScript then defines this section height to be the viewer port height. Inside that I have 4 each one containing one Image, I want them to fade out one after the other. Here is what I came up with, it's doing nothing and I have no clue why, I tried debugging it, but couldn’t find why as well. Can someone point out what am I doing wrong? What I'd like to accomplish is a very simple full screen slide-show, because everywhere I look for it there are just ready to use templates and I'd like to know how to code it from scratch.
Here is the HTML
<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<!--END CSS-->
<!--SCRIPT-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery/my_jquery_funcs.js"></script>
<!--END SCRIPT-->
<title>Patrick Oliveira</title>
</head>
<body>
<!--HERO COMECA AQUI-->
<section id="hero-slider">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</section>
<script>
realTimeHeight();/*Atualiza em tempo real a altura do slide show*/
</script>
<!--HERO TERMINA AQUI-->
</body>
</html>
The CSS
#hero-slider{
width: 100%;
}
#slide-1, #slide-2, #slide-3, #slide-4{
width: 100%;
height: inherit;
position: absolute;
}
#slide-1{
background: url("../imgs/imagem1.jpeg") no-repeat center;
background-size: cover;
}
#slide-2{
background: url("../imgs/imagem2.jpg") no-repeat center;
background-size: cover;
}
#slide-3{
background: url("../imgs/imagem3.jpg") no-repeat center;
background-size: cover;
}
#slide-4{
background: url("../imgs/imagem4.jpg") no-repeat center;
background-size: cover;
}
And the JavaScript
var i = 4;
$(document).ready(function(){
$(window).resize(function(){
realTimeHeight();
});
setTimeout(function(){
fadeItOut("#slide-"+i);
}, 2500);
});
function fadeItOut(objectID){
var fadeTime = 2500; /*time to fade out*/
$("#"+objectID).fadeOut(fadeTime);
if(i == 1){
i = 5;
}
i--;
}
function realTimeHeight(){
var altura = $(window).height();
$("#hero-slider").css("height",altura);
}
P.s: I just want to learn how to make one from scratch, after that I'll start using templates for time saving.
You were very close, just one error.
objectIDalready has the hash. Basically'#' + objectIDreturns##slide-4Should be
(Demo)