Develop Reference

Scroll function on hover won't work unless resizing screen

I miss 1% to finish my script, I just don't know how to do it :D
When you hover over the target to the left, you can see the image will scroll. But after clicking on a new image it won't. I then have to resize the window to make it work again. How to fix that? Below is my code but for a working example, here's a CodePen
(function($) {
// virables
var layoutContainer = '.container';
var layoutTarget = '#target';
var layoutTargetIMG = '#target img';
var layoutIMG = '.container .gallery .item img';
var layoutIMGFirst = '.container .gallery .item:first-child img';
// Add first image to target
$(layoutIMGFirst).clone().appendTo(layoutTarget);
// Add image to target when click on gallery image
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
// Image scroll on hover
// This won't work after clicking on an image unless resizing the browser
$(window).resize(function() {
// If i remove this it won't work on the start image.
// Any other solution?
setTimeout(function() {
$('#target img').each(function() {
var itemHeight = $('#target').outerHeight();
var imgHeight = $(this).outerHeight();
// Work out what percentage the image is of the item and remove 100% from that
var topHeight = (imgHeight / itemHeight) * 100 - 100;
//Make the animation speed proptional to that ratio
var animationSpeed = (imgHeight / itemHeight) / 1; //change 2 to tweak the speed
$(this).css({
transition: 'all ease ' + animationSpeed + 's'
});
$(this).mouseleave(function() {
$(this).css({
top: '0'
});
})
// The 'top' property of the image needs
// to be set as as a percentage of the parent
$(this).mouseenter(function(e) {
$(this).css({
top: '-' + topHeight + '%',
});
})
});
}, 200);
});
$(document).ready(function() {
setTimeout(function() { // Add delay after resize so function will load
$(window).triggerHandler('resize');
}, 200);
});
})(jQuery);
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-left: -40px;
max-width: 1000px;
background: lightblue;
padding: 20px;
.column {
flex: 1;
min-width: 30%;
margin-left: 40px;
.target {
height: 400px;
background: pink;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.cta {
display: flex;
a {
background: lightgreen;
width: 50%;
padding: 16px 8px;
;
text-align: center;
justify-content: center;
text-decoration: none;
&:last-child {
background: orange;
}
}
}
.gallery {
display: flex;
flex-flow: row wrap;
margin-left: -4px;
.item {
flex: 1;
margin-left: 4px;
position: relative;
overflow: hidden;
&::before {
content: '';
padding-top: 80%;
display: block;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="column">
<div id="target" class="target"></div>
<div class="cta">
SE DEMO
KØB LAYOUT
</div>
</div>
<div class="column">
<div class="gallery">
<div class="item">
<img src="https://picsum.photos/600/1200" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/500/1600" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/2000" alt="">
</div>
</div>
</div>
</div>

Just change this
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
to
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
$(window).triggerHandler('resize'); // added this line
});

How to add different logo when i scroll down?

I have made a page which has a transperant header and a logo in white color.
But when i scroll down my logo isn't visible because of white body color. I want to add black logo when i scroll down. How to do it ?
This is my code. :
$(window).on('scroll', function () {
if ($(this).scrollTop()) {
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
but its not working

You need to add scroll amount. Replace your code with this one.
$(window).on('scroll', function () {
if ($(this).scrollTop() > 70) { // Set position from top
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
Hope It works. Thanks !

Try This:
$(window).scroll(function(){
if($(this).scrollTop()>70) {
$('#header img').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/600px-Apple_logo_black.svg.png');
}
else {
$('#header img').attr('src','https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png');
}
})
body {
height: 1500px;
}
#header {
height: 70px;
background-color: #ccc;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
#header img {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png">
</div>

Take a look on this, it will help you.
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>

scrollTop will return a value while this line if ($(this).scrollTop()) will look for a boolean value.
So test the value in the loop condition
if ($(this).scrollTop()===someNumber) {
//rest of code
}

animate to right on scroll down and animate back to the left on scroll up

I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?

You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

why mouse cursor and red line not same position when add zoom 0.5 in to body tag?

why mouse cursor and red line not same position when add zoom 0.5 in to body tag ?
When use on zoom 1; it's work good,
How can i do work on zoom 0.5 (except zoom 1;) ?
https://jsfiddle.net/ksfqgv0p/6/
var isResizing = false;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
container.on('mousemove', function (e) {
isResizing = true;
});
container.on('mouseout', function (e) {
isResizing = false;
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
left.css('width', e.clientX - container.offset().left);
handle.css('margin-left', e.clientX - container.offset().left);
});
});

The problem is that e.clientX returns mouse position on screen not on your object, so then this value is applied to width attribute it is 2x smaller than it must be, so you need to divide this value by zoom level to get correct mouse position on that zoomed out object.
Like this:
left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));
Here's jsFiddle
var isResizing = false;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
container.on('mousemove', function (e) {
isResizing = true;
});
container.on('mouseout', function (e) {
isResizing = false;
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
console.log(container.offset().left);
console.log(e.clientX);
left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));
});
});
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 500px;
/* Disable selection so it doesn't get annoying when dragging. */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
#container #left {
position: absolute;
width: 750px;
height: 100%;
background-image: url("http://www.pilsnertop.com/wp-content/uploads/2015/12/Dog-Header3.jpg");
overflow: hidden;
background-repeat: no-repeat;
z-index: 9;
}
#container #right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100%;
background-image: url("http://www.twitrcovers.com/wp-content/uploads/2014/06/Dog-Butterfly-l.jpg");
overflow: hidden;
background-repeat: no-repeat;
}
#container #handle {
background: red;
height: 500px;
margin-left: 742px;
top: 0;
bottom: 0;
width: 8px;
cursor: w-resize;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="
width: 100%;
height: 100%;
margin: 0;
padding: 0;
zoom:0.5;
"
>
<div id="container">
<!-- Left side -->
<div id="left">
<!-- Actual resize handle -->
<div id="handle"></div> This is the right side's content!
This is the left side's content! </div>
<!-- Right side -->
<div id="right">
</div>
</div>
</body>

Make the header sticky and reduce the size on page scroll

I have this code in which I want the header to stick on page scroll and also reduce the header size. however I managed only the sticky header on scroll down. I want all this effect to get reverted when scrolling top. any solution ?
This is my code: (also on jsFiddle)
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Just add an else that removes the class:
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else { // <=== New
$(".clearHeader").removeClass("darkHeader"); // <=== bit
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
} else {
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
However, as the scroll event happens a lot as the user scrolls, it may be appropriate to reduce the amount of work we do on scroll by maintaining a flag:
// Scoping function to avoid creating a global
(function() {
var haveDarkHeader = false;
$(window).scroll(function() {
var wantDarkHeader = $(window).scrollTop() >= 500;
if (wantDarkHeader != haveDarkHeader) {
haveDarkHeader = wantDarkHeader;
$(".clearHeader").toggleClass("darkHeader", haveDarkHeader);
}
});
})();
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
It's more code, though, and duplicated state (we have the flag both in our JavaScript code and in the fact that the element does or doesn't have the class).

Use toggleClass() to add or remove the class based on the scroll position:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
If scroll is greater or equal to 500, the darkHeader class will be applied. Otherwise, it will be removed.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".clearHeader").toggleClass("darkHeader", scroll >= 500);
});
.clearHeader {
height: 200px;
background-color: rgba(107, 107, 107, 0.66);
position: fixed;
top: 200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height: 2000px;
}
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Add these and see the magic
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".clearHeader").addClass("darkHeader");
}
else{
$(".clearHeader").removeClass("darkHeader");
}
});
.clearHeader{
height: 200px;
background-color: #333;
position: fixed;
top:200;
width: 100%;
}
.darkHeader {
height: 100px;
}
.wrapper {
height:2000px;
}
for more, check out my fiddle : - http://jsfiddle.net/Jinukurian7/w9EgE/5/