Develop Reference

move img with mousemove

I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it becomes too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: all 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: all 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>

Since you're using transform: scale() for the zoom effect it's faster and more correct to modify transform-origin to change the center point of the zoom effect on mousemove:
// Zoom in/out clothing img
$('.image').click(function() {
$(this).toggleClass('normal-zoom zoom-in');
});
$('.image').on('mousemove', function(event) {
// This gives you the position of the image on the page
var bbox = event.target.getBoundingClientRect();
// Then we measure how far into the image the mouse is in both x and y directions
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
// Then work out how far through the image as a percentage the mouse is
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
// Then we change the `transform-origin` css property on the image to center the zoom effect on the mouse position
//event.target.style.transformOrigin = xPercent + '% ' + yPercent + '%';
// It's a bit clearer in jQuery:
$(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
// We add the '%' units to make sure the string looks exactly like the css declaration it becomes.
});
// If you want it to automatically trigger on hover
$('.image').on('mouseenter', function() {
$(this).addClass('zoom-in');
$(this).removeClass('normal-zoom');
});
// and stop when not hovering
$('.image').on('mouseleave', function() {
$(this).addClass('normal-zoom');
$(this).removeClass('zoom-in');
});
.container {
width: 800px;
margin: 0 auto;
border: 2px solid black;
display: flex;
}
.img-wrapper {
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
}
.text {
width: 40%;
padding: 20px;
}
.normal-zoom {
transform: scale(1);
cursor: zoom-in;
transition: transform 250ms;
}
.zoom-in {
transform: scale(1.6);
cursor: zoom-out;
transition: transform 250ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="img-wrapper">
<img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
</div>
<p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>

You can use the mousemove event listener on the image with class .zoom-in to change the left and top CSS params. Make sure to set position:relative; on the image.
Example:
$(document).on('mousemove', '.zoom-in', function( event ) {
$(".text").text(event.pageX + ", " + event.pageY);
var positionLeft = event.pageX - $(this).width()/2;
var positionTop = event.pageY - $(this).height()/2;
$(this).css({'left': positionLeft, 'top': positionTop});
});
Here is a fiddle.

How do I make my flipping image display a different image on either side with javascript?

I'm trying to make the different sides of the object display different images; however, any similar question I've seen has an incredibly overcomplicated answer. I'm not too fluent in js just yet but I'd appreciate the help.
<script>
var k = 0;
function flip() {
var j = document.getElementById("card");
k += 720;
j.style.transform = "rotatey(" + k + "deg)";
j.style.transitionDuration = "7s"
}
</script>
<div id="card" onmouseover="flip()"><img src="day.png"></div>
That is my html and here is my CSS:
#card {
display: block;
width: 300px;
height: 300px;
padding: 25px;
}
Let me know if any clarification is needed, thanks for the help!
Edit: I currently have an object that rotates along the y-axis when moused over. I would like there to be another image displayed after the initial image has rotated 90 degrees (displaying from 90-270 degrees, and then switching back to the previous image from 270-450 degrees, and so on). Not sure why the post was downvoted, but I hope this is the ludicrous specificity they were looking for.

You can actually do this with CSS and HTML alone.
.card-container {
perspective: 1000px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.card-container, .front, .back {
width: 200px;
height: 200px;
}
.front, .back {
background: #efe;
}
.card {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
<div class="card-container">
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
</div>

I'm new to Javascript too and I don't know if this is the best solution to use in a production environment but here's what I came up with.
Basically, you can rotate the image 180 degrees and change the image source attribute halfway. So, if you set your rotation to complete in 1 second, you can use setTimeout with a delay of around half a second to call a function that will change the image source.
var k = 0;
var imgSrc1 = "https://static.pexels.com/photos/9291/nature-bird-flying-red.jpg";
var imgSrc2 = "http://media-channel.nationalgeographic.com/media/uploads/photos/content/video/2014/10/29/349582915975_349582915975_720p_5994_Racing_Speeds_DMS.jpg";
var img = document.getElementById("img");
img.onmouseover = flip;
img.style.transitionDuration = "1s";
function flip() {
k += 180;
img.style.transform = "rotatey(" + k + "deg)";
setTimeout(changeImgSrc(), 300);
}
function changeImgSrc() {
return function() {
if(img.getAttribute("src") === imgSrc1)
img.src = imgSrc2;
else
img.src = imgSrc1;
}
}
img { width:150px; height: 150px;}
<img id="img" src="https://static.pexels.com/photos/9291/nature-bird-flying-red.jpg">

Trying to make continuous JavaScript slider

The problem with my slider is that when it gets to the last slide and i click next it jumps over the two slides to get to the first one. Similarly when i am on the first slide and click previous, it jumps over slides to get to the last one. I would like to make it that when i get to the last slide and click NEXT the first slide would come from the right to left. (similar concept for the PREVIOUS button on first slide). I tried using insertBefore() and appendChild() for the slides but couldn't figure it out...
Here is my code:
// Slider
const slider_wrapp = document.querySelector('.tract-slider');
const slider = document.querySelector('.tract-slider-wrapp');
var slide = document.getElementsByClassName('tract-slide');
const leftBtn = document.querySelector('.slide-left');
const rightBtn = document.querySelector('.slide-right');
let swWidth = slider_wrapp.clientWidth;
let sliderWidth = swWidth * slide.length;
let slideWidth = 0;
slider.style.width = sliderWidth + "px";
for (var i = 0; i < slide.length; i++) {
slide.item(i).style.width = swWidth + "px";
}
function moveRight() {
slideWidth === sliderWidth - swWidth ? slideWidth = 0 : slideWidth += swWidth;
slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}
function moveLeft() {
slideWidth === 0 ? slideWidth = sliderWidth - swWidth : slideWidth -= swWidth;
slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}
rightBtn.addEventListener("click", function() {
moveRight();
});
leftBtn.addEventListener("click", function() {
moveLeft();
});
.tract-slider {
width: 100%;
height: 75vh;
position: relative;
overflow: hidden;
}
.tract-slider-wrapp {
height: 100%;
position: relative;
-webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
-o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
transition: all 350ms cubic-bezier(.08, .13, 0, .81);
}
.tract-slide {
height: 100%;
float: left;
position: relative;
display: block;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.tract-slide:nth-child(1) {
background-image: url("https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}
.tract-slide:nth-child(2) {
background-image: url("https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}
.tract-slide:nth-child(3) {
background-image: url("https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}
.tract-slider-control {
position: absolute;
left: 0;
bottom: 0;
background: #ffffff;
padding: 1em;
}
.tract-slider-btn {
display: inline-block;
cursor: pointer;
margin-left: 1em;
}
.tract-slider-btn:nth-child(1) {
margin-left: 0;
}
<div class="tract-slider">
<div class="tract-slider-wrapp">
<div class="tract-slide"></div>
<div class="tract-slide"></div>
<div class="tract-slide"></div>
</div>
<div class="tract-slider-control">
<div class="tract-slider-btn slide-left">Prev</div>
<div class="tract-slider-btn slide-right">Next</div>
</div>
</div>
PS. Please use JavaScript for solution

Creating an infinite slider means you need to move your slides around in DOM so they give the impression of a continuous track.
The first thing you need to change is having their backgrounds tied up to their position in DOM. If we want to slide back from first slide to the last one, we need to take the last slide, prepend it before the first one but, considering your current CSS, that will change the backgrounds of all slides, as they are currently bound to their position in DOM (...:nth-child {background-image:...}...).
The second thing that needs changing is positioning the slides into the slider track. If they're floated, whenever we change their order, all the rest of the slides will be affected. By positioning them with position:absolute each slide moves independently, without affecting the others, so it's easier to rearrange them while keeping control.
Long story short, I started from scratch and placed all methods inside a single object: theSlider.
The reset() function does the heavy lifting: it puts before class on first element, current on second and after on all the rest. So you have to put the "last" slide first, because the slider will start with it appended before the "current" one.
The sliding is done by applying go-left and go-right classes to the track. After the transition is done, I just move the first/last slide into the new position, depending on case, and run reset() again (which strips all classes and reapplies them based on new positions).
Animations are handled by CSS. All JavaScript does is apply/remove classes and move the slides in DOM.
var theSlider = {
track : document.querySelector('.tract-slider-wrapp'),
// has to match `transition-duration` in CSS:
duration : 600,
reset : function() {
var slides = document.querySelectorAll('.tract-slider-wrapp > div');
for (var i = 0; i < slides.length; i++) {
slides[i].className = '';
slides[i].classList.add(i > 1? 'after' : (i ? 'current':'before'))
}
},
init : function() {
theSlider.reset();
theSlider.track.classList.remove('not-loaded')
},
next : function() {
theSlider.track.classList.add('go-right');
setTimeout(function(){
var firstSlide = document.querySelector('.tract-slider-wrapp > div:first-child');
theSlider.track.appendChild(firstSlide);
theSlider.reset();
theSlider.track.classList.remove('go-right')
},theSlider.duration)
},
prev : function() {
theSlider.track.classList.add('go-left');
setTimeout(function() {
var lastSlide = document.querySelector('.tract-slider-wrapp > div:last-child');
theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
theSlider.reset();
theSlider.track.classList.remove('go-left')
},theSlider.duration)
},
prevButton : document.querySelector('.slide-left'),
nextButton : document.querySelector('.slide-right')
};
window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
.tract-slider {
width: 100%;
height: 75vh;
position: relative;
overflow: hidden;
background-color: #f5f5f5;
}
.tract-slider-wrapp {
height: 100%;
transition: all 350ms cubic-bezier(.08, .13, 0, .81);
opacity: 1;
}
.tract-slider-wrapp.not-loaded {
opacity: 0;
}
.tract-slider-wrapp>div {
height: 100%;
position: absolute;
background: transparent no-repeat 50% 50% /cover;
width: 100%;
}
.tract-slider-wrapp > div.before {
margin-left: -100%;
}
.tract-slider-wrapp > div.current + div {
margin-left: 100%;
}
.tract-slider-wrapp > div.after ~ div {
opacity: 0;
}
.tract-slider-control {
position: absolute;
width: 100%;
z-index: 1;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.tract-slider-control div {
background-color: rgba(0,0,0,.35);
padding: .5rem 1rem;
color: white;
cursor: pointer;
}
.tract-slider-control :first-child {
border-radius: 0 17px 17px 0;
}
.tract-slider-control :last-child {
border-radius: 17px 0 0 17px;
}
body {
margin: 0;
}
.go-right div {
transform: translateX(-100%);
}
.go-left div {
transform: translateX(100%);
}
.go-right div, .go-left div {
transition-property: transform;
transition-timing-function: cubic-bezier(.4,0,.2,1);
/* has to match `duration` in js: */
transition-duration: 600ms;
}
<div class="tract-slider">
<div class="tract-slider-wrapp not-loaded">
<div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')"></div>
<div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')"></div>
<div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')"></div>
</div>
<div class="tract-slider-control">
<div class="tract-slider-btn slide-left">Prev</div>
<div class="tract-slider-btn slide-right">Next</div>
</div>
</div>
If you want to change the animation duration you need to change it in both js and css.
The only current limitation is it needs at least 3 slides to work. I guess it could be adjusted to work with only two slides by: cloning the "inactive" slide into third position, removing the clone after transition and cloning the other one.
ToDo's:
prefix CSS so it works in more browsers
replace .classList.add('whatever') with .className += ' whatever' and
.classList.remove('whatever') with .className.replace('whatever', '') if you want to show IE some love.
I told the above just to tell you this: if you want to get going, don't reinvent the wheel.
It's great you use vanilla javascript. But sooner or later you'll end up writing your own wrappers for common things. Depending on how good you are/have become, you'll write your own, limited, custom version of jQuery. Allow me to put things into perspective: Google included a lite version of jQuery into AngularJS. It's that good.
You, as an single developer, do not stand a chance at writing a better, more streamlined and tested version of it. And besides, you don't have to. Use your skill and abilities to go forward, not sideways.

CSS imageviewer: Image rotation (and scaling)

I'm trying to have a simplistic image viewer in a react project of mine.
Is there a way to implement rotation (and ideally scaling) without referencing the current dimensions of the DOM node in JS?
So far I tried something like this (reduced case/taken from my jsfiddle):
function getTransform() {
switch (rotation) {
case 90: return {
transform: 'translateY(-100%) rotate(90deg)',
'transform-origin': 'bottom left'
};
case 180: return {
transform: 'translate(100%, -100%) rotate(180deg)',
'transform-origin': 'bottom left'
}
case 270: return {
transform: 'translateX(-100%) rotate(270deg)',
'transform-origin': 'top right'
};
default: return {
transform: 'none'
}
}
}
and apply that as styles on my element. Unfortunately that doesn't work. While I can use the 100%/relative values for Y (i.e. 90 degrees works, 180 degrees works for the Y axis at least), I cannot use it to translate the X axis - parts of the image are offscreen.
Demo: https://jsfiddle.net/7huLa8e1/2/
Is there a way to use relative values alone or do I have to grab the DOM node and use width/height in absolute pixel values to make this work?

If I understand your question correctly, your problem is that the image overflows the container to the right in an unspecified size.
We need to get around this. My idea is to float right the image inside the container. we will need a clearfix to keep it taking the correct size.
I have redone the jquery to works with css classes, since it is the easiest way to modify the child (the image)
var rotation = 0;
function rotate(deg) {
rotation = (360 + rotation + deg) % 360;
$('#image-viewer').attr('class', 'rotate' + rotation);
}
$(function(){
$('#rotateLeft').click(
function(event) {
rotate(-90);
}
);
$('#rotateRight').click(
function(event) {
rotate(90);
}
);
});
#image-viewer {
position: relative;
cursor: pointer;
border: solid red 2px;
}
.image-viewer-root {
height: 100vh;
}
.image-viewer-viewport {
height: 90%;
overflow: auto;
}
.rotate90 {
transform: rotate(90deg) translate(0%, -100%);
transform-origin: left top;
}
.rotate180 {
transform: rotate(180deg);
transform-origin: center center;
}
.rotate180 img {
float: right;
}
.rotate270 {
transform: translate(-100%, 0%) rotate(270deg);
transform-origin: right top;
}
.rotate270 img {
float: right;
}
.clearfix {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-viewer-root">
<nav class="toolbar navbar navbar-dark bg-faded">
<div class="nav navbar-nav">
<button id="rotateLeft" class="btn nav-item">RotateLeft</button>
<button id="rotateRight" class="btn nav-item">RotateRight</button>
</div>
</nav>
<div class="image-viewer-viewport">
<div id="image-viewer">
<img src="https://sstatic.net/stackexchange/img/logos/so/so-logo.png?v=9c558ec15d8a">
<div class="clearfix"></div>
</div>
</div>
</div>

How do I make a div go left and then right in javascript? (no jQuery)

This should be simple but I guess no jQuery makes it a bit difficult.
I want to repeat a process where a div goes 100px to the right (with animation) and then 100px to the left (so i want a continuous movement).
There seems to be plenty of jQuery answers to this question yet no pure javascript solution. I'm probably missing something obvious here yet I can't find it.
Here is the code:
var left = 0;
var id = setInterval(function(){goRight()}, 10);
var ed = setInterval(function(){goLeft()}, 10);
function goRight(){
var redpixel = document.getElementById("redpixel");
left++;
redpixel.style.left = left + "px";
if (left>100) {
clearInterval(id)
goLeft();
}
}
function goLeft(){
var redpixel = document.getElementById("redpixel");
left-=1;
redpixel.style.left = left + "px";
if (left<100) {
clearInterval(ed);
goRight()
}
}
HTML:
<button onclick="goRight()">Go Right</button>
<div id="redpixel"></div>
CSS:
.container {
width: 480px;
height: 800px;
border: 1px solid black;
}
#redpixel {
position: absolute;
top: 200px;
left: 0;
background: red;
width: 25px;
height: 25px;
}
Last comments:
The animation starts without me calling any function (without using the button), how is that possible?
The animation works but stops when it hits the first 100px.
(Additional question) - if i put the var redpixel out of the function it doesn't work at all, why?
All help appreciated, thanks!

The problem with your code is that you set left and right animations at the same time, and the left one is cleared immediately because left<100. Fixed code:
var left = 0,
id = setInterval(goRight, 10);
ed;
function goRight() {
var redpixel = document.getElementById("redpixel");
left++;
redpixel.style.left = left + "px";
if (left > 100) {
clearInterval(id);
ed = setInterval(goLeft, 10);
}
}
function goLeft() {
var redpixel = document.getElementById("redpixel");
left -= 1;
redpixel.style.left = left + "px";
if (left < 1) {
clearInterval(ed);
id = setInterval(goRight, 10);
}
}
#redpixel {
position: absolute;
top: 50px;
left: 0;
background: red;
width: 25px;
height: 25px;
}
<div id="redpixel"></div>
One more point, is as demonstrated by Adjit it really makes sense to look at CSS approach as simpler and more effective.

You don't need any JavaScript at all actually, and it is quite simple to do with CSS3.
Just need to set up keyframes and animation like so: (obviously including the necessary browser compatibility)
#box {
height: 100px;
width: 100px;
background: red;
position: relative;
animation: waver 2s infinite;
-webkit-animation: waver 2s infinite;
}
#keyframes waver {
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
}
#-webkit-keyframes waver {
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
}
See this fiddle for an example: http://jsfiddle.net/bwsd3eoy/