a beginner here : )
I know it's been asked before but I couldn't find a solution yet. I have two automatic slideshows running one beneath the other on one page. they both work, but work awfully bad, the timing is not as set and it's not looping as it should be. but - if I keep only one slideshow in the page, it works perfectly fine. I'm struggling with it for hours already.
this is my html:
<div class= "gallry">
<ul id="slides" dir="rtl" onclick="nextSlide">
<li class="slide showing"> <img id="firstImg" src=".img.jpg"> </li>
<li class="slide"> <img src=".img1.jpg"></li>
<li class="slide"><img src=".img2.jpg"></li>
</ul>
</div>
<div class="gallery">
<ul id="slides2" dir="rtl">
<li class="slidetwo showing"> <img id="firstImg2" src=".img3.jpg"></li>
<li class="slidetwo"><img src=".img4.jpg"></li>
<li class="slidetwo"><img src=".img5.jpg"></li>
</ul>
</div>
this is my css
#slides {
position: relative;
height: 100%;
padding: 0;
margin:0;
list-style-type: none;
}
#slides2 {
position: relative;
height: 100%;
padding: 0;
margin:0;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.slidetwo {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img {
max-height: 95vh;
max-width: calc(100vw - 80px);
}
.showing {
opacity: 1;
z-index: 2;
}
and this is my javascript:
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide = 0;
var slideInterval = setInterval(nextSlideTwo,1000);
function nextSlideTwo() {
slides2[currentSlide].className = 'slidetwo';
currentSlide = (currentSlide+1)%slides2.length;
slides2[currentSlide].className = 'slidetwo showing';
}
thanks a lot !
So the first thing I see is that you're trying to reuse the same global variables for both slideshows. What's happening is that when both of those calls in the setInterval() are running, they're addressing the same variables, which would result in the images being displayed out of order, timing issues, and other similar things.
What I'd recommend trying would be trying to separate the variables out, so that nextSlide() and nextSlideTwo() are addressing and updating different things as they run. For example:
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide2 = 0;
var slideInterval2 = setInterval(nextSlideTwo,1000);
function nextSlideTwo() {
slides2[currentSlide2].className = 'slidetwo';
currentSlide2 = (currentSlide2+1)%slides2.length;
slides2[currentSlide2].className = 'slidetwo showing';
}
Will throw this in a fiddle shortly to see how it runs and if any additional tweaks are needed.
Related
the first transition runs instantly and the second one runs perfect. I been trying to run it at the same time with the transition-duration. Some help would be highly appreciated. Thanks :)
<script type="text/javascript">
function Scroll(){
var top = document.getElementById('header');
var ypos = window.pageYOffset;
document.getElementById('color-change-on-scroll').innerHTML=ypos;
if(ypos > 2350) {
var elem = document.getElementById('homer_pic');
elem.style.transition="top 1.0s linear 0s"; // runs instantly
elem.style.top="0px";
elem.style.transition="opacity 1.0s linear 0s"; // runs perfect
elem.style.opacity=1;
document.getElementById('color-change-on-scroll').innerHTML=ypos+" yposhigher then 2350";
}
}
window.addEventListener("scroll",Scroll);
</script>
#homer_pic{
position: relative;
float: left;
height: auto;
width: 33.333333%;
background-color: #f2f2f2;
text-align: center;
padding-top: 120px;
padding-bottom: 150px;
opacity: 0;
top:100px;
}
Each element can only have one CSS transition property.
elem.style.transition="top 1.0s linear 0s"; // runs instantly
elem.style.top="0px";
elem.style.transition="opacity 1.0s linear 0s"; // runs perfect
elem.style.opacity=1;
The second transition definition overrides the first one. That's why it seems to run instantly. To transition multiple properties on the same element you'd have to do it like this:
elem.style.transition = "top 1.0s linear 0s, opacity 1.0s linear 0s";
elem.style.top = "0px";
elem.style.opacity = 1;
function Scroll() {
var top = document.getElementById('header');
var ypos = window.pageYOffset;
document.getElementById('color-change-on-scroll').innerHTML = ypos;
if (ypos > 50) {
var elem = document.getElementById('homer_pic');
elem.style.transition = "top 1.0s linear 0s, opacity 1.0s linear 0s";
elem.style.top = "0px";
elem.style.opacity = 1;
document.getElementById('color-change-on-scroll').innerHTML = ypos + " yposhigher then 50";
} else {}
}
window.addEventListener("scroll", Scroll);
body {
height: 400px;
}
#homer_pic {
position: relative;
float: left;
height: auto;
width: 33.333333%;
background-color: black;
text-align: center;
padding-top: 120px;
padding-bottom: 150px;
opacity: 0.5;
top: 100px;
}
<div id="homer_pic">
Pic
</div>
<div style="position: fixed" id="color-change-on-scroll">
0
</div>
I'm working on a slideshow and it works, except for the animations. The animation for sliding out works fine but the animation for sliding in from the left does not. The left margin gets set to 0% but there is no animation, even though it is set to -100% at first.
Javascript:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
]
function slideShow(startAt){
var holder = document.getElementById("currentImage");
var img = document.createElement("img");
img.src = images[startAt];
holder.appendChild(img);
nextPicture(startAt, img);
}
function nextPicture(current, currentElement){
var holder = document.getElementById("currentImage");
setTimeout(function(){
currentElement.className = "translateLeft";
current += 1;
var img = document.createElement("img");
img.src = images[current];
img.style.marginLeft = "-100%";
holder.appendChild(img);
img.className = "translateIn";
if (current == 5){
current = -1;
nextPicture(current, img);
} else {
nextPicture(current, img);
}
}, 5000)
}
slideShow(0);
CSS:
.translateLeft {
transition: 3s;
margin-left: 100% !important;
}
.translateIn {
transition: 3s;
margin-left: 0% !important;
}
Here is a solution for you.
https://jsfiddle.net/smaefwrp/2/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
img {
position: absolute;
top:0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
#currentImage {
height: 100%;
width: 1920px;
}
.translateOrigin {
transition: none;
transform: translate3d(-100%, 0, 0) !important;
}
.translateLeft {
transition: transform 3s;
transform: translate3d(100%, 0, 0) !important;
}
.translateIn {
transition: transform 3s;
transform: translate3d(0, 0, 0) !important;
}
</style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
var imageEle = [];
var currImage = 0;
var holder = document.getElementById("currentImage");
function imagesPreload() {
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i];
img.className = "translateOrigin";
holder.appendChild(img);
imageEle.push(img);
}
}
imagesPreload();
document.onkeydown = function(event){
if(event.keyCode === 13) {
nextPicture();
}
};
function slideShow(startAt) {
var holder = document.getElementById("currentImage");
imageEle[currImage].className = "translateIn";
nextPicture();
}
function nextPicture() {
setTimeout(function () {
var img = imageEle[currImage];
img.addEventListener("transitionend", transitionEnd, false);
img.className = "translateLeft";
if (currImage == 5) {
currImage = 0;
} else {
currImage++;
}
imageEle[currImage].className = "translateIn";
/* Reset the image to original position */
function transitionEnd() {
img.className = "translateOrigin";
img.removeEventListener("transitionend", transitionEnd, false);
nextPicture();
}
}, 5000)
}
slideShow(currImage);
</script>
</body>
</html>
To create a nice slideshow I suggest to use css transform property rather than the margin. The idea is to create the placeholder element currentImage with relative position, and then create all images inside it with position set to absolute. Then by default all images are translated out of the placeholder element, and adding/removing classes show and hide you can place them inside the view and then outside of it, like this:
var images = [
'http://i.imgur.com/ByyUANz.png',
'http://i.imgur.com/S5FfOOB.png',
'http://i.imgur.com/EuefPdv.png',
'http://i.imgur.com/Ucvm4pJ.png',
'http://i.imgur.com/pK5WBHN.png',
'http://i.imgur.com/nuOLVpy.png'
];
// Get the holder
var holder = document.getElementById("currentImage");
// Create the images
images.forEach(function(url) {
var img = document.createElement("img");
img.src = url;
holder.appendChild(img);
});
// Image counter
var counter = 0;
// Slide show interval
var slideshow = setInterval(function() {
// When we reach the end of images we shut down the slide show
// or you can reset the counter to start over
if(counter === images.length) {
clearInterval(slideshow);
return;
}
// Get all images
var nodes = holder.getElementsByTagName("img");
// Hide previous image
if(nodes[counter - 1]) {
nodes[counter - 1].className = "hide";
}
// Show next image
nodes[counter].className = "show";
counter++;
}, 2500);
#currentImage {
background: gray;
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#currentImage img {
width: 100%;
position: absolute;
transform: translateX(-110%);
-webkit-transition: -webkit-transform 1.0s ease 0s;
-moz-transition: -moz-transform 1.0s ease 0s;
-o-transition: -o-transform 1.0s ease 0s;
transition: transform 1.0s ease 0s;
}
#currentImage img.show {
transform: translateX(0%);
}
#currentImage img.hide {
transform: translateX(110%);
}
<div id="currentImage">
</div>
You can try something like:
// HTML
<div id="currentImage">
<div class="window">
<div class="image-list">
<div>
<img src="http://i.imgur.com/ByyUANz.png" />
</div>
<div>
<img src="http://i.imgur.com/S5FfOOB.png" />
</div>
<div>
<img src="http://i.imgur.com/EuefPdv.png" />
</div>
<div>
<img src="http://i.imgur.com/Ucvm4pJ.png" />
</div>
<div>
<img src="http://i.imgur.com/pK5WBHN.png" />
</div>
<div>
<img src="http://i.imgur.com/nuOLVpy.png" />
</div>
</div>
</div>
</div>
And CSS
// CSS
img {
height: 50px;
width: 50px
}
.window {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid red;
overflow: hidden
}
div {
display: inline-block
}
.image-list {
list-style-type: none;
display: inline-block;
padding-left: 0px;
margin: 0px;
width: 350px;
animation: slidingli 30s ;
}
#keyframes slidingli {
0% {
transform: translateX(0px)
}
16% {
transform: translateX(-50px)
}
32% {
transform: translateX(-100px)
}
48% {
transform: translateX(-150px)
}
64% {
transform: translateX(-200px)
}
80% {
transform: translateX(-250px)
}
100% {
transform: translateX(-300px)
}
}
Checkout this fiddle. Also there are many libraries out there which provide what need For example: http://fotorama.io/customize/autoplay/
I have two images which are inside a container. The images are uploaded, so I won't know their sizes ahead of time. I used this function to resize the images to fit their container. The resizing works fine, but the animation is choppy. I was wondering if there was a way to make it look smoother.
$(window).load(function() {
window.SurveyCreator = new SurveyCreator();
setTimeout(function() {
equalheight('.options-container');
}, 1000);
});
$(window).resize(function() {
equalheight('.options-container');
});
equalheight = function(container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
Here's the html:
<div id="options-box" class="options-box">
<div class="options-container">
<img class="question-option" id="question-option-a">
</div>
<div class="options-container">
<img class="question-option" id="question-option-b">
</div>
</div>
Here's the css:
.question-option {
width: 100%;
}
.options-container {
width: 48%;
float: left;
background-color: #F2F1F5;
padding: 30px;
text-align: center;
margin: 0 1%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.options-box {
margin-top: 25px;
}
try adding a transition to the css of the container.
.options-container {
transition: 1s;
}
you may want to add browser specific versions of "transition" as well:
.options-container {
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-ms-transition: 1s;
}
also, to only animate height write "height 1s" instead of "1s".
Have you considered refactoring this to use .animate()? If you were to do that you could utilize VelocityJS which would make it smoother.
I added a Jquery image slider to my website. But it doesn't work on Google Chrome. It works perfectly in Firefox. Any idea why? The site url : http://lit-falls-8182.herokuapp.com/
Can you see the last image smaller than the rest? and all the images disappear and never come back. It need to loop.
HTML code :
<div id="scroller" >
<div class="innerScrollArea">
<ul>
<% #slideimages.each do |simage| %>
<li><%= image_tag simage.gsub("app/assets/images/", ""), alt: "Slide Image", class: "slide-image" %></li>
<% end %>
</ul>
</div>
</div>
Css code :
#scroller {
border-bottom: 2px solid #FF9500;
box-shadow: 0 2px 20px #C4C4C4;
height: 160px;
position: relative;
width: 100%;
z-index: 19;
.innerScrollArea {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
ul {
padding: 0;
margin: 0;
position: relative;
}
li {
padding: 0;
margin: 0;
list-style-type: none;
position: absolute;
}
.slide-image{
z-index: 1;
padding: 2px;
display: block;
opacity:0.8;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
&:hover {
z-index: 2;
border: 2px solid #FF9500;
transform: scale(1.1);
opacity:1;
padding: 0px;
}
}
}
Javascript code :
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += 224;
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:1};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
});
In your css file you have this bit of code:
img{
max-width:100%;
height:auto
}
Remove max-width:100%; to fix both of your problems.
I see your issue in Chrome, but I tried to replicate it on my system by pulling your scripts and it's not the same.
Having said that, you can see if you 'Inspect Element' that the images are there but just progressively smaller after the ones that show on the screen until they can't be seen. It could be related to screen size (which is why most commenters can't see it)
I'd try adding an explicit image size to the img tags width='220' height='165' or setting it in the javascript (jQuery) with something like:
$(".slide-image").width(220);
$(".slide-image").height(165);
before, during and/or after the scroll.
My sidebar.css :
body
{
margin: 0;
padding: 0;
}
#header
{
background-color: #577481;
float: left;
height: 50px;
width: 100%;
}
#sidebar
{
background-color: #4ea9d1;
float: left;
height: 100%;
left: -200px;
position: absolute;
top: 50px;
width: 200px;
}
#wrapper
{
float: left;
height: 100%;
width: 100%;
}
#content
{
background-color: #d6b141;
float: left;
height: 500px;
width: 100%;
}
#sideBarButton
{
background-image: url('SideBarButton.png');
background-position: center;
background-repeat: no-repeat;
background-size: 70% 70%;
border-radius: 25px;
height: 50px;
margin-left: 30px;
width: 50px;
}
My index.html:
<<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sidebar.css">
<script>
function slideIn(element1, element2, element3) {
var elem = document.getElementById(element1);
var elem2 = document.getElementById(element2);
var elem3 = document.getElementById(element3);
elem.style.transition = "left 0.5s ease-in 0s";
elem.style.left = "0px";
elem2.style.transition = "marginLeft 0.5s ease-in 0s";
elem2.style.marginLeft = "200px";
elem2.style.opacity = 0.75;
elem3.style.backgroundImage = 'url(SideBarButtonHover.png)';
elem3.style.backgroundColor = '#3f545d';
}
function slideOut(element1, element2, element3) {
var elem = document.getElementById(element1);
var elem2 = document.getElementById(element2);
var elem3 = document.getElementById(element3);
elem.style.transition = "left 0.5s ease-out 0s";
elem.style.left = "-200px";
elem2.style.transition = "marginLeft 0.5s ease-out 0s";
elem2.style.marginLeft = "0px";
elem2.style.opacity = 1;
elem3.style.backgroundImage = 'url(SideBarButton.png)';
elem3.style.backgroundColor = '#577481';
}
</script>
</head>
<body>
<div id="header">
<div id="sideBarButton" onMouseOver="slideIn('sidebar', 'content', 'sideBarButton');" onMouseOut="slideOut('sidebar', 'content', 'sideBarButton');"></div>
</div>
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Hallo
</li>
</ul>
</div>
<div id="content">Ich bin der Content</div>
</div>
</body>
</html>
The transition with the first element(sidebar) works but not with the second one(content). It should work like this when you hover over the sidebarbutton, the sidebar will come out and the content will move at the same time to the right. My question is why doesn't the content transition work? Thanks for your help guys!
The transition with the first element(sidebar) works but not with the second one(content).
It should work like this when you hover over the sidebarbutton, the sidebar will come out and the content will move at the same time to the right. My question is why doesn't the content transition work?
Thanks for your help guys!
When setting a style value in javascript your style name should be camelCase'd, but if setting a value with a CSS property within it you should use the CSS property syntax. Correctly being:
elem2.style.transition = "margin-left 0.5s ease-in 0s";
elem2.style.marginLeft = "200px";