We Keep Coding

Stumbled upon a puzzling issue, I'm unable to make a carousel image lead to an address in href via touch on a mobile phone

So this is my first time ever posting on stackoverflow, Usually I'm simply scouring for an answer I need , however this time after long time of searching for solutions and trying out different solutions, I've decided to try and ask some of the smart people on stackoverflow , I'm simply unable to make an image inside of a carousel to be clickable and lead to an address inside of its "href" link , on any computer this works correctly, however on the mobile phone it's just not .
I'm stumped i don't know if its related to an touch event handler+touchfingerpress event , or to it being inside of a carousel div overlapping, tried clearfix class, tried, different solutions, so far no luck lol.
this is the entire code with placeholder links for images and the rest, but you can see the mechanism none the less in this live w3space fiddle : https://menk-s-space.w3spaces.com/carousel.html
or the entire link in plain:
thanks for the helpers. I would love to learn and improve!
<!-- partial:index.partial.html -->
<div class="bootstrap-iso clearfix">
<div id="slider9" class="slider9 clearfix">
<div id="slide9r" class="slide9r clearfix d-flex aligns-items-center justify-content-center" >
<div class="wrapper9 clearfix" >
<div id="slide9s" class="slide9s clearfix" >
<span class="slide9 clearfix" >
<div class="gallery">
<a target="_blank" href="portfolio.php">
<img src="portfolio/portfolio1.png" alt="Cinque Terre">
</a>
<div class="desc">portfolio0</div>
<div class="portfolio-item-meta clearfix">
<h5>portfolio0</h5>
<p>PC solutions</p>
</div>
</div>
</span>
<span class="slide9 clearfix">
<div class="gallery">
<a target="_blank" href="portfolio1.php">
<img src="portfolio/portfolio2.png" alt="Forest" >
</a>
<div class="desc">portfolio1</div>
<div class="portfolio-item-meta clearfix">
<h5>portfolio1</h5>
<p>PC solutions</p>
</div>
</div>
</span>
<span class="slide9">
<div class="gallery">
<a target="_blank" href="portfolio2.php">
<img src="portfolio4.png" alt="Northern Lights">
</a>
<div class="desc">portfolio4</div>
<div class="portfolio-item-meta clearfix">
<h5>portfolio</h5>
<p>PC solutions</p>
</div>
</div>
</span>
<span class="slide9">
<div class="gallery">
<a target="_blank" href="portfolio3.php">
<img src="portfolio/portfolio5.png" alt="Mountains">
</a>
<div class="desc">portfolio6</div>
<div class="portfolio-item-meta clearfix">
<h5>portfolio5</h5>
<p>PC solutions</p>
</div>
</div>
</span>
<!-- <span class="slide9">slide9 5</span>-->
</div>
</div>
<a id="prev" class="control prev"></a>
<a id="next" class="control next"></a>
</div>
</div>
</div>
<!-- partial -->
<script src="js/script.js"></script>
<style>
#import url("css?family=Roboto");
* {
box-sizing: border-box;
}
text-align: center;
letter-spacing: 0.15em;
font-size: 22px;
}
.slide9r {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.wrapper9 {
position: relative;
width: 400px;
height: 300px;
z-index: 1;
}
.slide9s {
display: flex;
position: relative;
top: 0;
left: -400px;
width: 10000px;
}
.slide9s.shifting {
transition: left 0.2s ease-out;
}
.slide9 {
width: 400px;
height: 300px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 1s;
position: relative;
background: #FFCF47;
border-radius: 2px;
}
.slide9r.loaded .slide9:nth-child(2),
.slide9r.loaded .slide9:nth-child(7) {
/*background: #FFCF47;*/
background:#7adcef00;
}
.slide9r.loaded .slide9:nth-child(1),
.slide9r.loaded .slide9:nth-child(6) {
/*background: #7ADCEF;*/
background:#7adcef00;
}
.slide9r.loaded .slide9:nth-child(3) {
/*background: #3CFF96;*/
background:#7adcef00;
}
.slide9r.loaded .slide9:nth-child(4) {
/*background: #a78df5;*/
background:#7adcef00;
}
.slide9r.loaded .slide9:nth-child(5) {
/*background: #ff8686;*/
background:#7adcef00;
}
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50px;
margin-top: -20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.prev,
.next {
background-size: 22px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.prev {
background-image: url(ChevronLeft-512.png);
left: -20px;
display: none;
}
.next {
background-image: url(ChevronRight-512.png);
right: -20px;
display: none;
}
.prev:active,
.next:active {
transform: scale(0.8);
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}</style>
<script>
var slide9r = document.getElementById('slide9r'),
slide9rItems = document.getElementById('slide9s'),
prev = document.getElementById('prev'),
next = document.getElementById('next');
function slide9(wrapper9, items, prev, next) {
var posX1 = 0,
posX2 = 0,
posInitial,
posFinal,
threshold = 100,
slide9s = items.getElementsByClassName('slide9'),
slide9sLength = slide9s.length,
slide9Size = items.getElementsByClassName('slide9')[0].offsetWidth,
firstslide9 = slide9s[0],
lastslide9 = slide9s[slide9sLength - 1],
cloneFirst = firstslide9.cloneNode(true),
cloneLast = lastslide9.cloneNode(true),
index = 0,
allowShift = true;
// Clone first and last slide9
items.appendChild(cloneFirst);
items.insertBefore(cloneLast, firstslide9);
wrapper9.classList.add('loaded');
// Mouse events
items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction);
// Click events
prev.addEventListener('click', function () { shiftslide9(-1) });
next.addEventListener('click', function () { shiftslide9(1) });
// Transition events
items.addEventListener('transitionend', checkIndex);
function dragStart (e) {
e = e || window.event;
e.preventDefault();
posInitial = items.offsetLeft;
if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
items.style.left = (items.offsetLeft - posX2) + "px";
}
function dragEnd (e) {
posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftslide9(1, 'drag');
} else if (posFinal - posInitial > threshold) {
shiftslide9(-1, 'drag');
} else {
items.style.left = (posInitial) + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
function shiftslide9(dir, action) {
items.classList.add('shifting');
if (allowShift) {
if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) {
items.style.left = (posInitial - slide9Size) + "px";
index++;
} else if (dir == -1) {
items.style.left = (posInitial + slide9Size) + "px";
index--;
}
};
allowShift = false;
}
function checkIndex (){
items.classList.remove('shifting');
if (index == -1) {
items.style.left = -(slide9sLength * slide9Size) + "px";
index = slide9sLength - 1;
}
if (index == slide9sLength) {
items.style.left = -(1 * slide9Size) + "px";
index = 0;
}
allowShift = true;
}
}
slide9(slide9r, slide9rItems, prev, next);
</script>
Tried clearfix in hopes of a div overlapping but didn't work, tried looking into eventhandlers for touch but i'm not on that level yet.
tried different carousels mechanisms , still didn't work.
tried outside of the carousel , it seemed to work, but than i lose the carousel functionality.
Would love someone to enlighten me , i want for any image in the carousel upon clicking for it to lead to another page within the href address on a mobile phone with a touch screen.
Thanks for the helpers !
Simpler example which causes the same issue:
document.querySelector('p').addEventListener('touchstart', e => {
e.preventDefault()
})
<a href="?123=2">
<p>test</p>
</a>

The problem is a typo in your <style> tag. Change this:
* {
box-sizing: border-box;
}
text-align: center;
letter-spacing: 0.15em;
font-size: 22px;
}
to
* {
box-sizing: border-box;
/* text-align: center;
letter-spacing: 0.15em;
font-size: 22px; */
}
I commented those 3 lines, because it messes the styles, but you can uncomment them if you need them.
Also tested the fix on a CodeSandbox too and it's working.
Furthermore, I added a debounce function for your dragStart so the drag will not interfere with your click event.
...
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
...
const debouncedDragStart = debounce(dragStart, 100);
...
items.addEventListener("touchstart", debouncedDragStart);

Scroll loop on mobile (not Infinite scroll)

I'm trying to create a seamless looping webpage where the content repeats over and over without having to actually duplicate the divs. I came across a THIS CODEPEN, which is exactly what I was looking for, but the mobile experience is really glitchy and flickers when repositioning to the top of the page.
Any solves for mobile? Or edits to this JS?
See below and thanks!
var doc = window.document,
context = doc.querySelector('.js-loop'),
clones = context.querySelectorAll('.is-clone'),
disableScroll = false,
scrollHeight = 0,
scrollPos = 0,
clonesHeight = 0,
i = 0;
function getScrollPos () {
return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}
function setScrollPos (pos) {
context.scrollTop = pos;
}
function getClonesHeight () {
clonesHeight = 0;
for (i = 0; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
function reCalc () {
scrollPos = getScrollPos();
scrollHeight = context.scrollHeight;
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
}
}
function scrollUpdate () {
if (!disableScroll) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= scrollHeight) {
// Scroll to the top when you’ve reached the bottom
setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the bottom when you reach the top
setScrollPos(scrollHeight - clonesHeight);
disableScroll = true;
}
}
if (disableScroll) {
// Disable scroll-jumping for a short time to avoid flickering
window.setTimeout(function () {
disableScroll = false;
}, 40);
}
}
window.requestAnimationFrame(reCalc);
context.addEventListener('scroll', function () {
window.requestAnimationFrame(scrollUpdate);
}, false);
window.addEventListener('resize', function () {
window.requestAnimationFrame(reCalc);
}, false);
// Just for this demo: Center the middle block on page load
window.onload = function () {
setScrollPos(Math.round(clones[0].getBoundingClientRect().top + getScrollPos() - (context.offsetHeight - clones[0].offsetHeight) / 1));
};
html,
body {
height: 100%;
overflow: hidden;
}
.Loop {
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
section {
position: relative;
text-align: center;
min-height: 100vh;
max-height: 100vh;
height: 100%;
}
::scrollbar {
display: none;
}
body {
font-family: "Avenir Next", Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
}
.red {
background: #FF4136;
}
.green {
background: #2ECC40;
}
.blue {
background: #0074D9;
}
.orange {
background: rebeccapurple;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 80px;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
}
<main class="Loop js-loop">
<section class="green">
<h1>FIRST</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="orange">
<h1>And</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="red">
<h1>LAST</h1>
</section>
<!--
These blocks are the same as the first blocks to get that looping illusion going.
You need to add clones to fill out a full viewport height.
-->
<section class="green is-clone">
<h1>FIRST</h1>
</section>
<section class="red is-clone">
<h1>For</h1>
</section>
</main>

Jquery automatic scroll showroom

I tried to build a website similar to this. To do this I wrote the following code:
var $window = $(window);
var lastScrollTop = 0;
var shown_elements = 0;
var next_element = 0;
$window.on('scroll', scroll_to_next);
$window.trigger('scroll');
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
var scroll = $(window).scrollTop();
function scroll_to_next() {
shown_elements = Math.ceil($(window).scrollTop() / window_height);
next_element = shown_elements * window_height;
if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0) {
//$window.scrollTop(next_element);
$('html, body').animate({
scrollTop: next_element
}, 'slow');
//alert(next_element);
}
lastScrollTop = $(window).scrollTop();
}
This is the HTML:
<div class="showroom1">
<div class="showroom_left">
<img class="fixed" src="mokups/frame.png">
<img class="screen" src="mokups/screen2.png">
</div>
<div class="showroom_right">
<h3>Hello</h3>
<h4>description</h4>
</div>
</div>
<div class="showroom2">
<div class="showroom_left">
<img class="screen" src="mokups/screen1.png">
</div>
<div class="showroom_right">
<h3>Hello</h3>
<h4>description</h4>
</div>
</div>
<div class="showroom1">
<div class="showroom_left">
<img class="fixed" src="mokups/frame.png">
<img class="screen" src="mokups/screen2.png">
</div>
<div class="showroom_right">
<h3>Hello</h3>
<h4>description</h4>
</div>
</div>
This code runs the first time. And scroll automatically to the second "showroom". But when I try to scroll a second time the page will not scroll.
What is wrong with my code?

I created a JSFiddle a while a go for another question with the same issue. https://jsfiddle.net/8zgsdzy0/
Here is the code:
var lastScrollPos = 0;
var scrollFired = false;
var textConainersElement = jQuery('.text-container p');
var mainElem = jQuery("[data-main='true']");
var firstElem = jQuery("section:first-child");
var lastElem = jQuery("section:last-child");
var wrapper = jQuery(".wrapper");
jQuery(document).on('DOMMouseScroll mousewheel', function(e) {
// if the scroll has occrued already then dont fire it again until transition ended
if (scrollFired == true) {
jQuery(window).scrollTop(lastScrollPos);
return false;
}
var inviewElem = jQuery("[data-inview='true']");
var nextElem = inviewElem.next();
var prevElem = inviewElem.prev();
var currentTop = parseInt(firstElem.attr('data-top'));
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
// Scrolling down
// if viewed element is last element do nothing
if (inviewElem.index() >= lastElem.index())
return false;
// if main section is inview then scroll through its elements
if (inviewElem.index() == mainElem.index()) {
// if the active child is not the last element then process
var active = jQuery('.text-container .active');
if (active.index() != textConainersElement.length - 1) {
jQuery('.text-container .active').removeClass('active').next().addClass('active');
// Dont scroll further
return false;
}
}
var top = currentTop + 100;
firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
nextElem.attr("data-inview", 'true');
inviewElem.attr("data-inview", 'false');
} else {
// Scrolling up
// if viewed element is first element do nothing
if (inviewElem.index() <= firstElem.index())
return false;
// if main section is inview then scroll through its elements
if (inviewElem.index() == mainElem.index()) {
// if the active child is not the last element then process
var active = jQuery('.text-container .active');
if (active.index() != 0) {
jQuery('.text-container .active').removeClass('active').prev().addClass('active');
// Dont scroll further
return false;
}
}
var top = currentTop - 100;
firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
prevElem.attr("data-inview", 'true');
inviewElem.attr("data-inview", 'false');
}
// Set values to use for next scrolling event
lastScrollPos = jQuery(window).scrollTop();
scrollFired = true;
// reset scrollFired var after transition ended
firstElem.one('transitionend', function() {
scrollFired = false;
});
//prevent page fom scrolling
return false;
});
body {
margin: 0;
}
.wrapper {
display: block;
width: 100%;
height: 100vh;
overflow: hidden;
}
section {
display: block;
width: 100%;
height: 100vh;
border-bottom: 2px dashed black;
position: relative;
transition: all 0.5s;
background-color: #c4c4c4;
}
section[data-inview="true"] {
background-color: #929292;
}
.phone-container {
align-items: center;
background: #dedede none repeat scroll 0 0;
border-left: 5px solid black;
display: flex;
float: right;
height: 100vh;
justify-content: center;
width: 500px;
}
.phone {
width: 200px;
height: 500px;
background: #A6A6A6 none repeat scroll 0 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
section.long-scroll {
height: auto;
}
p {
margin-top: 80px;
}
p:first-child {
margin-top: 0px;
}
.text-container {
float: left;
width: 200px;
}
.spacer {
display: block;
width: 100%;
}
p.active {
color: #C1E7FF;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
.stuck {
position: fixed;
top: 0;
}
.fixed {
position: fixed;
top: 0;
}
.sticky-wrapper {
height: auto !important;
}
.text-container {
padding-left: 40px;
padding-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<section data-inview='true' data-top='0'>
Scroll-down
</section>
<section class="long-scroll clearfix" id="pin" data-main='true'>
<div class="text-container">
<p class="active">Text - 1</p>
<p>Text - 2</p>
<p>Text - 3</p>
<p>Text - 4</p>
</div>
<div class="phone-container">
<div class="phone">Slide-1</div>
</div>
</section>
<section id="unhook"></section>
</div>

Please add your function scroll_to_next() to $(window).scroll();
Since you are not capturing the scroll event provided by $(window). So it happens for the first time.
Example

I think the problem is with this line of code:
if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0)
Specifically
lastScrollTop != 0
The first time the code runs through the variable "lastScrollTop" is set to 0, so the if statement evaluates false and doesn't scroll, but the variables "shown_elements" and "next_element" are changed. The second time you run the code through "lastScrollTop" has been changed but it doesn't work as you would expect as the other variables have been changed.
The solution is probably to change the if statement and change "lastScrollTop != 0".

How to make this animation properly with jQuery

I am trying to make an animation, you can see my efforts at jsfiddle. And here is the code I've used:
/* JavaScript: */
var app = function () {
var self = this;
var allBoxes = $('.box');
var shadow = $('#shadow');
var busy = false;
self.init = function () {
self.events();
};
self.getBoxLeftPosition = function(id)
{
var left = 100;
if (id == 'box2')
{
left = 300;
} else if (id == 'box3')
{
left = 500;
} else if (id == 'box4')
{
left = 700;
}
return left;
};
self.events = function () {
allBoxes.on('hover mousemove', function(event) {
event.stopPropagation();
var currentBox = $(this);
if (currentBox.hasClass('inactive') && !busy)
{
busy = true;
currentBox.removeClass('inactive').addClass('active').animate({
left: '-=30',
width: 260
}, 400, function () {
busy = false;
});
shadow.fadeIn(400);
}
});
$('body').mousemove(function(event) {
var currentBox = $('.active');
var leftValue = self.getBoxLeftPosition(currentBox.attr('id'));
if (currentBox.length > 0)
{
currentBox.stop();
currentBox.animate({
left: leftValue,
width: 200
}, 300, 'swing', function () {
currentBox.removeClass('active').addClass('inactive');
}, 300);
shadow.fadeOut(300);
}
});
};
return self;
};
var main = new app();
main.init();
/* CSS: */
html, body {
margin: 0;
}
.box {
position: absolute;
top: 120px;
width: 200px;
height: 420px;
}
.box div {
text-align: center;
color: white;
position: absolute;
top: 200px;
left: 0;
right: 0;
font-size: 25px;
font-weight: bold;
}
#box1 {
left: 100px;
background: pink;
}
#box2 {
left: 300px;
background: skyblue;
}
#box3 {
left: 500px;
background: orange;
}
#box4 {
left: 700px;
background: lightgreen;
}
#shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('https://lh6.googleusercontent.com/Vz0GTzpQVaxmlIvvGgg64CSxcYBbHzu7gMQERduJ4qjU5HAg8KfisFFQvIqvKL5Vn7LIy6HZ=w1920-h916');
z-index: 10;
}
.inactive {
z-index: 5;
}
.active {
z-index: 20;
}
<!-- HTML: -->
<div id="box1" class="box inactive">
<div id="copy1">Copy 1</div>
</div>
<div id="box2" class="box inactive">
<div id="copy2">Copy 2</div>
</div>
<div id="box3" class="box inactive">
<div id="copy3">Copy 3</div>
</div>
<div id="box4" class="box inactive">
<div id="copy4">Copy 4</div>
</div>
<div id="shadow"></div>
Here is what I am trying to achieve in words: I have 4 boxes and whenever a user hovers over one of them that box needs to expand a little and everything else needs to be grayed out and whenever the mouse leaves the box it needs to go back to it's original state.
In my jsfiddle I got it working to a point but it's buggy.

take a look at this JSFiddle
$('.box').hover(function(){
$(this).siblings().addClass('inactive');
}, function(){
$(this).siblings().removeClass('inactive');
});
tried to do it with pure css but sadly there's no such thing as prev sibling selector in css. Its kinda jumpy because of z-index getting immediately change on hover.

You can achieve the same effect even with CSS
$(document).on('mouseenter', '.item', function(e){
var me = $(this);
$('.item').not(this).addClass('greyed');
});
$(document).on('mouseleave', '.item', function(e){
$('.item').removeClass('greyed');
});
ul,li{
list-style:none;padding:0;margin:0;
}
ul{
width:400px;
}
li, .item {
width:100px;
height:100px;
}
li {
float:left;
position:relative;
}
.item {
background-color: #eee;
border:1px solid #ccc;
position:absolute;
z-index:1;
-webkit-transition:all 0.3s ease-in-out;
}
.item:hover {
width:110px;
z-index:2;
}
.red{
background: red;
}
.pink{
background: pink;
}
.blue{
background: blue;
}
.yellow{
background: yellow;
}
.greyed{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
<li>
<div class="item red"></div>
</li>
<li>
<div class="item blue"></div>
</li>
<li>
<div class="item yellow"></div>
</li>
<li>
<div class="item pink"></div>
</li>
</ul>

Here is what I did.
First, I found that the background image in your css is not a valid resource, so I replaced it with regular background color (it's transparent black, you may want to adjust it).
Second, I changed allBoxes.on('hover mousemove' to allBoxes.on('mouseover', and $('body').mousemove to allBoxes.on('mouseout'.
Third, I removed the $busy flag tracking.
Fourth, I changed var currentBox = $('.active'); to var currentBox = $(event.target);.
var app = function () {
var self = this;
var allBoxes = $('.box');
var shadow = $('#shadow');
var busy = false;
self.init = function () {
self.events();
};
self.getBoxLeftPosition = function(id)
{
var left = 100;
if (id == 'box2')
{
left = 300;
} else if (id == 'box3')
{
left = 500;
} else if (id == 'box4')
{
left = 700;
}
return left;
};
self.events = function () {
allBoxes.on('mouseover', function(event) {
event.stopPropagation();
var currentBox = $(this);
if (currentBox.hasClass('inactive') && !busy)
{
//busy = true;
currentBox.removeClass('inactive').addClass('active').animate({
left: '-=30',
width: 260
}, 400, function () {
//busy = false;
});
shadow.fadeIn(400);
}
});
allBoxes.on('mouseout', function(event) {
var currentBox = $(event.target);
var leftValue = self.getBoxLeftPosition(currentBox.attr('id'));
if (currentBox.length > 0)
{
currentBox.stop();
currentBox.animate({
left: leftValue,
width: 200
}, 300, 'swing', function () {
currentBox.removeClass('active').addClass('inactive');
}, 300);
shadow.fadeOut(300);
}
});
};
return self;
};
var main = new app();
main.init();
html, body {
margin: 0;
}
.box {
position: absolute;
top: 120px;
width: 200px;
height: 420px;
}
.box div {
text-align: center;
color: white;
position: absolute;
top: 200px;
left: 0;
right: 0;
font-size: 25px;
font-weight: bold;
}
#box1 {
left: 100px;
background: pink;
}
#box2 {
left: 300px;
background: skyblue;
}
#box3 {
left: 500px;
background: orange;
}
#box4 {
left: 700px;
background: lightgreen;
}
#shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 600px;
/*background: url('https://lh6.googleusercontent.com/Vz0GTzpQVaxmlIvvGgg64CSxcYBbHzu7gMQERduJ4qjU5HAg8KfisFFQvIqvKL5Vn7LIy6HZ=w1920-h916');*/
background-color: rgba(0,0,0,0.5); /* transparent black */
z-index: 10;
}
.inactive {
z-index: 5;
}
.active {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1" class="box inactive">
<div id="copy1">Copy 1</div>
</div>
<div id="box2" class="box inactive">
<div id="copy2">Copy 2</div>
</div>
<div id="box3" class="box inactive">
<div id="copy3">Copy 3</div>
</div>
<div id="box4" class="box inactive">
<div id="copy4">Copy 4</div>
</div>
<div id="shadow"></div>

How to smoothly minimize flying draggable popup with jQuery

I write some popup window, that will fly on the view part of page while scrolling them, window is also draggable.
See it below:
var jq = jQuery.noConflict();
var $el = jq(".Box");
var $btnmini = jq(".sessionCD #btnmin");
var isMini = false; //Панелька минимизирована.
$el.draggable({
cursor: "grab",
containment: 'window',
drag: function(event,
ui) {
jq(this).css('cursor',
'grabbing');
},
stop: function(event,
ui) {
jq(this).css('cursor',
'grab');
},
});
jq("#btnmin").click(function () {
if (isMini) {
jq('.Box #content #msg').show();
jq('.Box #content #note').show();
isMini = false;
} else {
jq('.Box #content #msg').hide();
jq('.Box #content #note').hide();
isMini = true;
}
});
jq('#btn').click(function() {
$el.show();
});
jq('#btntxt').click(function() {
var i = 0;
for (i = 0; i < 50; i++) {
jq('#txt').append('<p>THIS IS SPARTA!!!</p>');
}
});
jq(window).scroll(function() {
$el.stop().animate({
"top": (jq(window).scrollTop() + 10) + "px"
}, "fast");
});
.Box {
cursor: "grab";
position: absolute;
left: 2px;
top: 2px;
width: 300px;
height: auto;
display: none;
margin: 1px;
padding: 2px;
z-index: 100000;
border-width: 1px;
border-style: solid;
border-color: #AAA #CECECE #E6E6E6;
background: none repeat scroll 0% 0% #F1F1F1;
box-shadow: 0px 1px 1px 0px #CECECE inset;
border-radius: 8px;
text-align: center;
}
.Box #header {
height: 20px;
background: none repeat scroll 0% 0% #D4E8CD;
border-bottom: 1px solid #83A478;
color: #416833;
}
.Box #header #title {
text-align: center;
font-weight: bold;
}
.minibtn {
margin-right: 2px;
}
.minibtn:hover {
cursor: pointer;
font-weight: bold;
}
.sessionCD #time {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 19px;
font-weight: bold;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="Box" title="">
<div id="header">
<table cellpadding="0px" cellspacing="0px" border="0px" width="100%">
<thead>
<col width="20px" />
<col width="88%" />
<col width="10%" />
</thead>
<tbody>
<tr>
<td id="piccha">
<img src="dragger.png" />
</td>
<td id="title">
User!
</td>
<td id="btnmin" class="minibtn">
Mini
</td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<p id="msg">text text text
<br/>text text:</p>
<span id="time">Super Numbers 12312</span>
<br/>
<p id="note">The note</p>
</div>
</div>
<button id="btn">show box</button>
<button id="btntxt">add 30 text</button>
<div id="txt">
</div>
Also avaliable on JSfiddle.net
How I can minimize this window using "Mini" button with smooth effect?
Under "minimize" I mean smooth hide #msg and #note elements, after that smooth resize window. The same for "Maximize" but smooth showing.

You can use slideUp and slideDown for smoothly showing and hiding the div elements,
The .slideUp() method animates the height of the matched elements.
This causes lower parts of the page to slide up, appearing to conceal
the items. Once the height reaches 0 (or, if set, to whatever the CSS
min-height property is), the display style property is set to none to
ensure that the element no longer affects the layout of the page.
The .slideDown() method animates the height of the matched elements.
This causes lower parts of the page to slide down, making way for the
revealed items.
Demo
You can pass "slow" or "fast" or "duration" (time in milliseconds) to control the speed of the div displayed after click event.
JQuery
jq("#btnmin").click(function () {
if (isMini) {
jq('.Box #content #msg').slideDown();
jq('.Box #content #note').slideDown();
isMini = false;
} else {
jq('.Box #content #msg').slideUp();
jq('.Box #content #note').slideUp();
isMini = true;
}
});

Try this it. it will work greatly:
jq("#btnmin").click(function () {
if (isMini) {
jq('.Box #content #msg').show(500);
jq('.Box #content #note').show(500);
isMini = false;
} else {
jq('.Box #content #msg').hide(500);
jq('.Box #content #note').hide(500);
isMini = true;
}
});
To increase speed decrease value. like: 500 -> 300.
http://jsfiddle.net/ketan156/4xatmnt7/3/