I am making a slideshow and am having some trouble with the javascript.
When I click right once it works all good and then if I hit left it works too but then if I click on right again it should just go to the next image but it skips it and goes to the following. Anyone knows the solution?
$('#droite').click(function() {
if (photo == 4) {} else {
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
photo++;
}
});
$('#gauche').click(function() {
if (photo == 1) {} else {
$('#plateau-gallerie').animate({
left: (-300 * (photo - 2)) + 'px'
}, 500);
photo--;
}
});
#gallerie {
width: 60vw;
height: 300px;
background-color: #a9a9a9;
border-radius: 10px;
border: 3px solid #999;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#plateau-gallerie {
width: 1780px;
float: left;
top: 50px;
position: absolute;
}
#gallerie img {
height: 200px;
margin: 0 0px 0 80px;
float: left;
}
.bouton {
position: absolute;
height: 100px;
width: 60px;
top: 100px;
background-color: #444;
opacity: 0.7;
cursor: pointer;
z-index: 99;
font-size: 3em;
}
.bouton:hover {
background-color: #222;
}
#gauche{
left:15px;
}
#droite{
right:15px;
}
<section id="gallerie">
<button class="bouton" id="gauche"><</button>
<section id="plateau-gallerie">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
<img src="img/pc-gallerie.jpg" alt="ordinateur">
</section>
<button class="bouton" id="droite">></button>
</section>
Anyone got an idea on why this is?
I have change the script, change the logic of slide left and right
Change the image width to 300px, and align it to center
#gallerie img {
height: 200px;
float: left;
width:300px;
text-align: center;
}
Here is the js fiddle https://jsfiddle.net/bqg2aheh/
$('#left').click(function() {
if (!(photo < 0)) {
photo--;
$('#plateau-gallerie').animate({
left: (-300 * (photo)) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
$('#right').click(function() {
if (!(photo > 5)) {
photo++;
$('#plateau-gallerie').animate({
left: (-300 * photo) + 'px'
}, 500);
console.log(photo + ' ' + (-300 * photo));
}
});
please ignore the style
I am not able to reproduce the behavior you are describing. I've created a fiddle (fiddle id eozpp6vo) with your code and the gallery seems to be working as expected.
Related
I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
I am wanting to make a website that uses a background that moves based on the position that the curser is on the website. I have found this website that gives a visual representation of what I want to do. http://www.alexandrerochet.com/I just need to know how to make the letters move. I will replace them with images later.
You can achieve that using css properties.
Based on Lea Verou's talk
const root = document.documentElement;
document.addEventListener("mousemove", evt => {
let x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
root.style.setProperty("--mouse-x", x);
root.style.setProperty("--mouse-y", y);
});
html {
height: 100%
}
:root {
--mouse-x: .5;
--mouse-y: .5;
}
body {
height: 100%;
background-image: radial-gradient( at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), transparent, black);
}
You may want to try using parallax.js to achieve the desired effect.
Demo site.
Quick jsfiddle.
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
parallaxInstance.friction(0.2, 0.2);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: #F9F871;
width: 100vw;
height: 100vh;
}
.scene {
top: 30%;
}
.layer {
width: 100%;
height: 200px;
}
.item {
width: 50px;
height: 50px;
border-radius: 200px;
background-color: red;
position: relative;
}
.item-1 {
background-color: #FF9671;
left: 30%;
}
.item-2 {
background-color: #D65DB1;
left: 60%;
}
.item-3 {
background-color: #FF6F91;
left: 40%;
}
.item-4 {
background-color: #FFC75F;
left: 70%;
}
<div class="container">
<div id="scene" class="scene">
<div data-depth="0.2" class="layer layer-1">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
<div data-depth="0.6" class="layer layer-2">
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>
On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>
It seems you've got getElementById() when you meant getElementsByClassName()
I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.
Is it possible to add a duration of a css change so that when I change the left, top, width and height of a div this could be animated?
In the jQuery code I want to animate the duration of the css properties.
Thanks a lot if you could help me, Its appreciated!
My code
HTML:
<div id="slideshow">
<img class="image1" src="images/car1.jpg"></img>
<img class="image2" src="images/car2.jpg"></img>
<img class="image3" src="images/car3.jpg"></img>
<img class="image4" src="images/car4.jpg"></img>
<img class="image5" src="images/car5.jpg"></img>
</div>
CSS:
#slideshowshadow{
background: yellow;
border-radius: 100px;
width: 700px;
height: 500px;
position: absolute;
opacity: 0.2;
margin: 50px 50px;
box-shadow: 0px 0px 100px 15px yellow;
-moz-box-shadow: 0px 0px 100px 15px rgba yellow;
-webkit-box-shadow: 0px 0px 100px 15px yellow;
}
#slideshow{
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
#slideshow img{
color: white;
}
.image2, .image3, .image4, .image5{
position: absolute;
width: 300px;
height: 200px;
}
.image1{
position: absolute;
width: 350px;
height: 250px;
top: 175px;
left: 225px;
z-index: 2;
}
.image2{
top: 0px;
left: 250px;
z-index: 1;
}
.image3{
top: 200px;
left: 500px;
z-index: 1;
}
.image4{
top: 400px;
left: 250px;
z-index: 1;
}
.image5{
top: 200px;
left: 0px;
z-index: 1;
}
JQUERY (This is where the magic happens :p):
$(".image2").click(function(){
$(".image1").css("top", "0px");
$(".image1").css("left", "250px");
$(".image1").css("width", "300px");
$(".image1").css("height", "200px");
$(".image1").css("z-index", "1");
//middle
$(".image2").css("top", "175px");
$(".image2").css("left", "225px");
$(".image2").css("width", "350px");
$(".image2").css("height", "250px");
$(".image2").css("z-index", "2");
$(".image3").css("top", "200px");
$(".image3").css("left", "500px");
$(".image3").css("width", "300px");
$(".image3").css("height", "200px");
$(".image3").css("z-index", "1");
$(".image4").css("top", "400px");
$(".image4").css("left", "250px");
$(".image4").css("width", "300px");
$(".image4").css("height", "200px");
$(".image4").css("z-index", "1");
$(".image5").css("top", "200px");
$(".image5").css("left", "0px");
$(".image5").css("width", "300px");
$(".image5").css("height", "200px");
$(".image5").css("z-index", "1");
});
You should either use animate where 5000 is the time in milliseconds.
$( ".image5" ).animate({
opacity: 0.25,
left: "+=50",
height: "25px"
// css goes here, last one should not have comma
}, 5000, function() {
// Animation complete.
});
Or to use CSS animations, set the CSS transition time via jQuery:
var time = 5000
$('.image5').css({
'webkitTransition': 'all ' + time + 's ',
'mozTransition': 'all ' + time + 's ',
'msTransition': 'all ' + time + 's ',
'oTransition': 'all ' + time + 's ',
'transition': 'all ' + time + 's '
});
Perhaps you looking for:
transition-duration
see: http://css-tricks.com/almanac/properties/t/transition-duration/ for further details