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 create image zoom effect using jquery?

I'm trying to create an image zoom effect similar to this one. I've managed to search a plugin called prefixfree.js and tried it in my code, but it did not work, its just showing the image but when I hover it there is no image zoom effect.
The link for the plugin is this. It should suppose to work like this.
Also for additional info, the size for the large image is 1406X1275 and the small image is 200X200. Kindly help me on solving this one or provide better alternatives.
$(document).ready(function() {
var native_width$ = 0;
var native_height = 0;
$(".magnify").mousemove(function(e) {
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if (!native_width && !native_height) {
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
} else {
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if (mx < $(this).width() && my < $(this).height( && mx > 0 && my > 0) {
$(".large").fadeIn(100);
} else {
$(".large").fadeOut(100);
}
if ($(".large").is(":visible")) {
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width() / 2;
var py = my - $(".large").height() / 2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({
left: px,
top: py,
backgroundPosition: bgp
});
}
}
})
})
* {
margin: 0;
padding: 0;
}
.magnify {
width: 200px;
margin: 50px auto;
position: relative;
}
.large {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*Lets load up the large image first*/
background: url('microsoftLogo1.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
#subPic1 {
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}
#subPic2 {
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="magnify">
<div class="large"></div>
<img class="small" src="microsoftLogo1Small.jpg" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<img id="subPic1" src="microsoftLogo1.jpg" onclick="getImage1()" /><br/>
<img id="subPic2" src="microsoftLogo2.jpg" onclick="getImage2()" />

HTML
<img src="sample.png" class="zoom" />
CSS
img.zoom {
width: 350px;
height: 200px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
JavaScript
$(document).ready(function(){
$('.zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});

HTML
<div class="item">
<img src="pepsi.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

Want a smoother animation when resizing images javascript

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.

how to have fix menu with animation

here is my fiddle : http://jsfiddle.net/k3AHM/23/
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
$('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');
} else {
$('.menu-container').removeClass("fix-menu");
}
});
now when menu get fixed it's not smooth like this : demo
Any idea ? what's wrong with my code ?

may be you will accept this my update:
https://jsfiddle.net/k3AHM/37/
What I did:
1. You need to check whether function of animation already ran or not (otherwise on every scroll it will be called). This can be done by checking some outer var for 0 or 1 (it will show whether animation ran or not)
2. I used not "animate" function, but slideDown() - I think it's interesting too, though you can use animate instead, of course.
So here's my updated code:
var AlreadyRun=0;
$(document).ready(function(){
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
//$('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');
if(AlreadyRun == 0){
AlreadyRun=1;
//alert('function starts, AlreadyRun='+AlreadyRun);
$('.menu-container').hide().addClass( "fix-menu" ).slideDown('slow');
}
} else {
AlreadyRun=0;
$('.menu-container').removeClass("fix-menu");
}
});
});
and I also think you don't need "transition" in CSS, so I also updated CSS:
.menu-container {
/* transition: all .3s ease-in-out; */
background:red;
margin-top:0;
}
.fix-menu{
/* transition: all .3s ease-in-out;*/
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
top:0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
/* transition: all 0.2s ease-in; */
}
Hope it is what you needed.

CSS transition solution
http://jsfiddle.net/k3AHM/46/
var fixed = false;
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
if (!fixed)
{
fixed = true;
$('.menu-container').addClass( "fix-menu" );
}
}
else
{
fixed = false;
$('.menu-container').removeClass("fix-menu");
}
});
.menu-container {
transition: top .3s ease-in-out;
background:red;
margin-top:0;
top: -54px;
}
.fix-menu{
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
top: 0;
}
jQuery animation solution
http://jsfiddle.net/k3AHM/47/
var fixed = false;
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
if (!fixed)
{
fixed = true;
$('.menu-container').addClass( "fix-menu" ).css('top', '-54px').animate({top: '0px'});
}
}
else
{
fixed = false;
$('.menu-container').removeClass("fix-menu");
}
});
.menu-container {
background:red;
margin-top:0;
}
.fix-menu{
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
}

check this fiddle:
http://jsfiddle.net/k3AHM/24/
.menu-container {
transition: all .3s ease-in-out;
background:red;
margin-top:0;
top:-110px; /* add this */
}
You can add a position to thetop property at the menu-cointeiner and your code works smoothly.

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>