Develop Reference

Is it possible to change the autoscroll offset when dragging?

I have a single-page app written in Vue.js. The UI comprises three main elements:
a navbar with position: fixed at the top and z-index: 2
a sidebar with position: fixed on the left and z-index: 1 and padded to account for the presence of the navbar
a central area, padded to account for the presence of the other fixed elements.
The sidebar is scrollable with overflow-y: auto. Some elements in the sidebar, that I designated here with the text item X, are draggable.
Normally, when dragging towards the edges of a scrollable area, the area will automatically scroll in that direction. In my application the sidebar does not auto-scroll, because the upper edge is hidden by the navbar.
An obvious solution would be to change the structure of the sidebar so that its upper edge lies visible instead of being one top-padded div. However this might break other things.
Question:
I would like to know if there's a way to trigger auto-scroll on drag when the mouse is arbitrarily close to the edge, e.g. $navbarHeight pixels.
I'm looking for a pure HTML5 solution, vanilla js, or something with my current framework (Vue.js v3).
What I already tried:
I've done a great deal of googling but I'm probably using the wrong search queries: "auto scroll while dragging", "scroll sensitivity area", "autoscroll offset", and several combinations of quotes did not yield relevant results.
JS Fiddle: https://jsfiddle.net/7f5wh1mj/4/
What the page looks like (see the fiddle for a working example):

Nowdays, you may use grid to create such layouts , here is an example without position but grid ;)
new Vue({
el: "#app",
data: {
todos: [{
text: "Learn JavaScript",
done: false
},
{
text: "Learn Vue",
done: false
},
{
text: "Play around in JSFiddle",
done: true
},
{
text: "Build something awesome",
done: true
}
],
items: 12
},
methods: {
toggle: function(todo) {
todo.done = !todo.done
}
}
})
* {
box-sizing: border-box;
/* reset , optionnal */
}
body {
background: #20262E;
font-family: Helvetica;
overflow: hidden;
margin: 0;
height: 100vh;
/* needed */
width: 100vw;
}
#app {
background: #fff;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr;
height: 100%;
/* do not remove */
}
.navbar {
grid-row: 1;
grid-column: 1 / 3;
padding: 0.5em;
background-color: lightgreen;
}
.sidebar {
background-color: lightgray;
/* z-index: 1; no need */
overflow-y: auto;
}
.content {
background-color: #fff;
/* z-index: 0; no need */
overflow: auto;
/* make it scroll too instead body */
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
aside p {
text-align: center;
color: white;
background:gray;
position:sticky;
top:0;
margin:0;
padding:0.25em 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="navbar">
<h1>Navbar</h1>
</div>
<aside class="sidebar">
<p>Sidebar</p>
<ul>
<li draggable v-for="n in items">item {{ n }}</li>
</ul>
</aside>
<div class="content">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
</div>
edit : added comment and a sticky example inside the sidebar.

jQuery Plugin Slick Carousel image alignment

this is my first question on stackoverflow.
Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.
image
Thanks in advance!
edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 7,
slidesToScroll: 6,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 4
}
}, {
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
margin: 50px;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: blue;
}
#media screen and (max-width: 768px) {
.slick-dots {
position: initial !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x300?text=1">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/550x300?text=2">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
</section>

Check this:
https://jsfiddle.net/7pa8jq4a/5/
I used to center:
display: flex;
align-items: center;
justify-content: center;
I added wrapper div to slide and to img style max-height and max-width;

I tweaked you version a little bit (in case you do not want flex-box):
https://jsfiddle.net/fr74h8k5/2/
.slick-slide .image {
height: 200px;
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

Here is what you need:
1) at first, set section { text-align:center;}
2) set slick-track div to :
.slick-track{
display: flex;
align-items: center;
}
3) and for example
.slick-slide img {
..........
max-width: 150px;
max-height: 150px;
}
thats all (source: How to vertically center divs? )

I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.

jQuery Panzoom with contain: 'invert' inside a container with a fixed width

I'm trying to use jQuery.panzoom.js. All I have is a container with a fixed width (which might be smaller than the svg inside it). The problem is that if the svg is bigger than than the width of the container you cannot see the whole of it (even when you try to "pan it").
The html:
<div class="container">
<div id="parent">
<div class="panzoom">
<img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>
</div>
</div>
CSS:
.container {
width: 600px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid black;
}
.panzoom { width: 100%; height: 100%; }
And the javascript (as provided in the demos of this plugin):
(function() {
var $section = $('#parent');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1.1)',
increment: 0.1,
minScale: 1,
contain: 'invert'
}).panzoom('zoom');
})();
Here's a working demo, reproducing the problem: http://codepen.io/FakeHeal/pen/WreLyZ

You have to set the Dimension of the .panzoom class the same size as your image. So i expect your image is 600px in with and has a height of 900px use this css part
CSS-File
.panzoom {
width: 600px;
height: 900px;
}

JavaScript Wrap Around Carousel

I am looking for some information from some front end experts on how to go about creating a custom wrap around js carousel gallery. The idea is simple really I have a carousel of images, text, or whatever and when I get to the end I want it to wrap around. I don't want the content to simply fadeIn and out to the next piece of content. This is a gallery of div's currently but suppose it's images or whatever have you.
HTML
<div id="outside-container">
<div id="inside-container" class="cf">
<div class="items" id="item1"></div>
<div class="items" id="item2"></div>
<div class="items" id="item3"></div>
<div class="items" id="item4"></div>
</div>
</div>
<div id="directions">
<h4 id="left-button">Left</h4>
<h4 id="right-button">Right</h4>
</div>
CSS
#outside-container{
display: block;
width: 400px;
height: 125px;
overflow: hidden;
border: 1px solid #000;
margin: 0px auto;
}
#inside-container{
display: block;
width: 800px;
overflow: hidden;
height: 100%;
}
.items{
float: left;
margin: 0px;
width: 200px;
height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }
#directions{
display: block;
width: 400px;
margin: 0px auto;
text-align: center;
}
#left-button, #right-button{
display: inline-block;
cursor: pointer;
margin: 10px;
}
JS
var move = 0;
$("#left-button").click(function(){
move += 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
$("#right-button").click(function(){
move -= 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
Here is the codepen. So to sum all this up. I am asking for a way to create an infite loop for a gallery. I have always programmed these sorts of things to come to an end and then the user has to go back the other way. If this sounds confusing follow check out the codepen. Thanks in advance.

Here you go
http://codepen.io/nickavi/pen/cpFCE
But for the love of god, please don't use jQuery animate... at least add velocity.js to it, or the GSAP plugin, you don't even have to alter your JS you just add it in and it replaces the animate function with a more efficient one.
Cheers JBSTEW

First set move to the default slider and margin reset amount:
var move = 200;
Then, set the container margin to slide left by the move amount:
var margin_reset = (move * -1) + 'px'
$("#inside-container").css('margin-left', margin_reset);
Then, adjust the animation margin slide using move variable again, and execute a function when the animation is complete that moves the last/first item to the beginning/end of the container using prepend/append.
$("#left-button").click(function(){
$("#inside-container").animate({
marginLeft: 0
}, 500, function() {
$(this).prepend( $(this).find('.items:last') )
.css('margin-left', margin_reset);
});
});
$("#right-button").click(function(){
$("#inside-container").animate({
marginLeft: (move * -2) +"px"
}, 500, function() {
$(this).append( $(this).find('.items:first') )
.css('margin-left', margin_reset);
});
});
To avoid an initial draw jump, you could change the default css #inside-container as:
#inside-container{
...
margin-left: -200px;
}
see: Codepen

edit object while animating

I am writing a small animation to a div: Flag flips when you click on it. On the click, the image has to change.
HTML:
<div id="lang"></div>
...
<div id="langnl" class="invisible">
<img id="flag" src="en.jpg" onclick="change(-1,'en')"/>
</div>
<div id="langen" class="invisible">
<img id="flag" src="nl.jpg" onclick="change(-1,'nl')"/>
</div>
CSS:
.footer #lang {
float:right;
width: 30px;
height: 20px;
text-align:center;
}
.footer #lang img {
width: 30px;
height: 20px;
margin: 0px auto;
border-radius: 5px;
}
JS:
if (!flipping) {
flipping = true;
$('#flag').animate( {
width: 0,
}, flipTime, function () {
$('#lang').html($('#lang'+lang).html());
}).animate( {
width: 30,
}, flipTime, function () {flipping = false;});
}
My observations: The first flag flip works, but does not animate the second part, because I remove #flag, and replace it. The next flips do not work, because flipping is still false.
How to solve this, and continue animating, but replacing the content of the div?

The problem was that I has two divs with the same ID, not that I was changing the div I was animating.