Develop Reference

multiple slideshow on one page works bad

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.

How to bind css animation duration to scroll

I want to make something like those website where you scroll down and some animation follows by your scrolling and if you scroll up it goes reverse.
I saw some libraries like this but I want to see can it be done some more simple way?
Thanks
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
}
#keyframes myfirst {
0% {background: rgba(0,0,0,0); top: 0px;}
100% {background: rgba(0,0,0,1); top: 400px;}
}
.scrollDown{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Besides this I just tried changing keyframes on scroll so 100% or the end of animations changes by scrolling down and 0% by scrolling up but it doesnt work:
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: 0px;}100%{background: rgba(0,0,0,1); top: '+st+'px;}}</style>');
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: '+st+'px;}100%{background: rgba(0,0,0,1); top: '+lastScrollTop+'px;}}</style>');
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
}
.scrollDown{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate-reverse;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div></div>
SOLUTION WITH TRANSITION (WITHOUT KEYFRAMES)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<style>
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
opacity: 0;
transition: opacity 0s ease;
background: rgb(0,0,0);
}
</style>
</head>
<body>
<div></div>
<script>
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
} else {
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
}
lastScrollTop = st;
});
});
</script>
</body>
</html>

It can be done more simply and without jQuery. This is a rough take, but I made it a bit more generic by adding a container and passing ratios around to get mostly full, bounded left-to-right position and zero-to-one opacity transitions:
var locked = false;
var container = document.getElementById('container');
var animated = document.getElementById('animated');
window.addEventListener('scroll', function() {
if (!locked) {
window.requestAnimationFrame(function() {
animated.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
animated.style.left = Math.min(animated.style.opacity * container.clientWidth, container.clientWidth - animated.clientWidth).toString() + 'px';
locked = false;
});
}
locked = true;
});
#container {
border: 1px solid red;
height: 200vh;
width: 80%;
}
#animated {
width: 100px;
height: 100px;
position: fixed;
opacity: 0;
background: rgb(0, 0, 0);
}
<div id="container">
<div id="animated"></div>
</div>

How to add a small description window when mouse cursor is over a element class?

I tested a method for see if it works, but... no, see:
var classname = document.getElementsByClassName('avatarTestCx');
function myFunction() {
document.write("Test.");
}
for(var i=0;i<classname.length;i++){
classname[i].addEventListener('mouseover', myFunction, false);
}
When the mouse cursor is about a element class, it calls a function to write in document (it's just a test to verify if will be possible do the small description window).
It's not working...
Do you have some method for example?

If it's just a simple tooltip I guess a title attribute would get this done.
Here is a example fiddle http://jsfiddle.net/542jwva8/1/
var classname = document.getElementsByClassName('avatarTestCx');
for(var i=0;i<classname.length;i++){
classname[i].setAttribute("title", "Small description \n Another line");
}

I would go about doing this, by using data-tooltip
Example
Inside this example it'll show a message box when hovering over an element, any questions just ask me
// Create style
var style = document.createElement('style');
document.head.appendChild(style);
// Store matching elements
var matchingElements = [];
// All elements
var allElements = document.getElementsByTagName('*');
// Loop through all elements
for (var i = 0, n = allElements.length; i < n; i++)
{
// All elements with attribute of data-tooltip
var attr = allElements[i].getAttribute('data-tooltip');
if (attr)
{
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event)
{
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Show value of "this" inside console
console.log(this);
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
// Show value of "this" inside console
console.log(this);
}
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}
/* No need for this CSS, just for example purpose */
div {
margin-top: 100px;
background-color: black;
width: 200px;
height: 20px;
}
<div data-tooltip="Test message 1"></div>
<div data-tooltip="Test message 2"></div>

The Jquery image slider doesn't work in Chrome

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.

CSS transition doesn't work

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";