Develop Reference

Centering overflow:auto content inside DIV

I'm trying to create a grid inside of a DIV viewport with overflow set to auto and want to add a zoom feature to it. The user should be able to zoom in/out but I want to keep the content center-aligned throughout the zoom process.
When zooming, the overflowing content on the horizontal axis is centered and, when scrolled left and right, I can see all 8 grid boxes on that axis - this is perfect. However, for some strange reason, the overflowing content on the Y axis is not centering when zoomed and the uppermost part of the grid disappears out of the viewport and annoyingly can't be seen or scrolled to.
When you zoom in, pay attention to how the horizontal scrollbar remains centered and that you can scroll left and right and see all 8 boxes but the vertical axis doesn't work the same way.
I welcome your suggestions and/or a solution. Thanks.
$(function() {
var $container = $('.container');
var current_zoom = 1;
var current_cell_size = 20;
var cells_x = 8;
var cells_y = 8;
var grid_size_x = cells_x * current_cell_size;
var grid_size_y = cells_y * current_cell_size;
var $grid = $('<div />').addClass('grid').css({
'width': grid_size_x,
'height': grid_size_y
});
for (var x = 0; x < cells_y; x++) {
var $row = $('<div />').addClass('row');
for (var y = 0; y < cells_x; y++) {
var $cell = $('<div />').addClass('cell').css({
'width': current_cell_size,
'height': current_cell_size
});
$row.append($cell);
}
$grid.append($row);
}
$container.append($grid);
center_viewport();
// ----- EVENTS
$('.zoom-in-btn').click(zoom_in);
$('.zoom-out-btn').click(zoom_out);
// ----- FUNCTIONS
function center_viewport() {
$container.scrollLeft((grid_size_x - $container.width()) / 2);
$container.scrollTop((grid_size_y - $container.height()) / 2);
}
function zoom_in() {
current_cell_size = current_cell_size + 10;
grid_size_x = cells_x * current_cell_size;
grid_size_y = cells_y * current_cell_size;
$grid.css({
'width': grid_size_x,
'height': grid_size_y
}).find('.cell').css({
'width': current_cell_size,
'height': current_cell_size
});
center_viewport();
}
function zoom_out() {
current_cell_size = current_cell_size - 10;
grid_size_x = cells_x * current_cell_size;
grid_size_y = cells_y * current_cell_size;
$grid.css({
'width': grid_size_x,
'height': grid_size_y
}).find('.cell').css({
'width': current_cell_size,
'height': current_cell_size
});
center_viewport();
}
});
html,
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html .container,
body .container {
position: fixed;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
overflow: auto;
border: solid 1px #000;
}
html .container .grid,
body .container .grid {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
html .container .grid .row,
body .container .grid .row {
display: flex;
}
html .container .grid .row:nth-child(odd) .cell:nth-child(odd),
body .container .grid .row:nth-child(odd) .cell:nth-child(odd) {
background: #EEE;
}
html .container .grid .row:nth-child(even) .cell:nth-child(even),
body .container .grid .row:nth-child(even) .cell:nth-child(even) {
background: #EEE;
}
html .container .zoom-btns,
body .container .zoom-btns {
position: fixed;
z-index: 2;
right: 50px;
bottom: 50px;
}
html .container .zoom-btns button,
body .container .zoom-btns button {
margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<div class="zoom-btns">
<button class="zoom-in-btn">Zoom In</button>
<button class="zoom-out-btn">Zoom Out</button>
</div>
</div>
Demo Fiddle here.

I think that instead of using width/height CSS properties to zoom, you should consider using transform and transform-origin properties. You can use the scale value of transform to zoom, then assign the coordinates of the center of the item as the transform-origin value.
CSS Transform
CSS Transform Origin

Text content disappears in div as scrolling

I am trying to expand a child element to the very top of its parent with the following code. However, the text disappears after a while of scrolling downward in the child element. How do I fix this?
function setHeight() {
var panel = document.getElementById("panel");
var container = document.getElementById("container");
var panelHeight = container.offsetHeight;
var y = panel.scrollTop;
// YOU MUST SET THE PERCENTAGE, OR A MAX HEIGHT
maxHeight = panelHeight * 0.9;
var targetHeight = Math.min(maxHeight, 0.7 * panelHeight + y);
panel.style.height = targetHeight + "px";
document.getElementById("panelContent").style.marginTop = Math.min(y, panelHeight - maxHeight) + "px";
}
document.getElementById('panel').addEventListener("scroll", setHeight);
#container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
#panel {
position: fixed;
width: 100%;
height: 70%;
bottom: 0;
background-color: green;
overflow-y: scroll;
}
<div id="container">
Scroll up to here
<div id="panel">
<div id="panelContent">
As user scroll downs here in this div, expand this div to the top but only as much as the user has scrolled down: asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasd
</div>
</div>
</div>
https://jsfiddle.net/1ekpx3sd/

Change img source each 20 pixels

I would like to change an img src while scrolling down each 20 pixels, so by 100 pixels down from the top it should have changed 5 times, actual src image should be "falling-05.png" I've done this thanks to other tutorials, but while testing, doesn't seems to work properly. Can someone help me out to figure out why?
HTML
<div class="fixedContainer">
<div class="scrollableContainer">
<img class="character" id="character" src="./images/falling-01.png"/>
</div>
</div>
<div class="anotherContainer"></div>
CSS
.fixedContainer {
position: relative;
width: 100%;
height: 100%;
background-color: red;
overflow-y: scroll;
}
.scrollableContainer {
position: relative;
width: 100%;
height: 1800px;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1)
100%);
}
.anotherContainer {
position: relative;
width: 100%;
height: 800px;
background-color: white;
display: ;
}
.character {
position: fixed;
right: 140px;
top: 150px;
}
JAVASCRIPT
var image = document.getElementById("character");
var sources = ["falling-01.png", "falling-02.png", "falling-03.png", "falling-04.png", "falling-05.png", "falling-06.png", "falling-07.png", "falling-08.png", "falling-09.png"];
var i = 0;
var breakpoint = 20; // Change to whatever you like
window.addEventListener("scroll", function() {
var scrollDown = document.body.scrollTop;
if (scrollDown >= breakpoint) {
img.setAttribute(src, sources[i]);
breakpoint += 20; //Change to whatever you like
i++;
}
}

first you have a typo:
var image = document.getElementById("character"); <-- defined as image
img.setAttribute(src, sources[i]); <-- referenced as img
Second, you are look at the body for the scroll position
var scrollDown = document.body.scrollTop;
But in your code the part that is scrollable is not the body
.fixedContainer {
...
overflow-y: scroll;
}

There are a few issues with your syntax:
missing an ending parenthesis
img and image
src instead of 'src'
display: ; in .anotherContainer
If you use window.pageYOffset instead of document.body.scrollTop it should work.
You can use
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset :
(document.documentElement || document.body.parentNode ||
document.body).scrollTop;
as described in Detecting by how much user has scrolled.

how to manipulate css dynamically to make div move when div is clicked?

I have this bit of code that moves a "div" when that div is clicked but it is not working.
$(".shape").click(function() {
var bodyHight = document.body.clientHeight;
var bodyWidth = document.body.clientWidth;
var randomX = Math.floor((Math.random() * bodyWidth));
var randomY = Math.floor((Math.random() * bodyHeight));
$(".shape").css("left", randomX);
$(".shape").css("top", randomY);
});
and some css:
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
Can anyone help me?

Change Like This:
$(document).ready(function(){
$(".shape").click(function() {
var bodyWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var bodyHight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var randomX = Math.floor((Math.random() * bodyWidth));
var randomY = Math.floor((Math.random() * bodyHight));
$(".shape").css({top: randomY, left:randomX});
});
});
.shape{
border-radius: 50px;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape"></div>

"bodyHight" on line 2 of the javascript snippet is a typo.
What's more, in most browsers(e.g. Chrome), the default height of element depends on its internal elements. However, here you use absolute positioning, which means all are not in DOM stream, which finally leads the height of body to be 0. So div.shape can only move horizontally on the top 1 horizontal pixel line.

jitter when using jquery to alter background-position

Here's the jsfiddle.
It's the interface to cropping an image. As you can see the selection div takes the same background image and positions it to the negative of the top and left attributes of the selection div. In theory this should give a perfect overlap, but there's a jitter as you move the selection div around, and I can't seem to figure out what is causing it.
html
<div id="main">
<div id="selection"></div>
</div>
css
#main {
width: 600px;
height: 450px;
position: relative;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
background-size: contain;
}
#selection {
width: 100px;
height: 100px;
position: absolute;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
border: 1px dotted white;
background-size: 600px 450px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top ) - 1) + "px"));
}
});
$("#selection").mouseup(function (e) {
move = false;
});
})

It would appear that there is a value of 5 offset that needs to be added to ensure seamlessness
DEMO http://jsfiddle.net/nzx0fcp5/2/
offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];

So, while experimenting I discovered that this was only a problem at certain sizes of the image. At the original size it is no problem, neither at half nor a quarter of this size. It wasn't simply a matter of keeping the image in proportion not having the image square or using even pixel sizes. I'm assuming this had something to do with partial pixel sizes, but I'm not sure, and I couldn't see any way to work around this, at least none that seemed worth the effort.
So while checking out the code of other croppers I took a look at POF's image cropper, they seem to have got round the problem by not using the background-position property at all (I'm not sure if it's plugin or they coded it themselves). They just set the image down and then used a transparent selection div with 4 divs stuck to each edge for the shading. So there's no pixel crunching on the fly at all. I like the simplicity and lightweight nature of this design and knocked up a version myself in jsfiddle to see if I could get it to work well.
new jitter free jsfiddle with no pixel crunching
I liked the solution for the preview box as well.
html
<body>
<div id="main">
<img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
<div id="upperShade" class="shade" > </div>
<div id="leftShade" class="shade" > </div>
<div id="selection"></div>
<div id="rightShade" class="shade"></div>
<div id="lowerShade" class="shade" ></div>
</div>
</body>
css
#main {
position:relative;
width: 450px;
height: 600px;
}
#selection {
width: 148px;
height: 148px;
position: absolute;
border: 1px dotted white;
top: 0px;
left: 0px;
z-index: 1;
}
.shade {
background-color: black;
opacity: 0.5;
position: absolute;
}
#upperShade {
top: 0px;
left: 0px;
width: 600px;
}
#leftShade {
left: 0px;
top: 0px;
height: 150px;
width: auto;
}
#rightShade {
left: 150px;
top: 0px;
height: 150px;
width: 450px;
}
#lowerShade {
left:0px;
top: 150px;
width: 600px;
height: 300px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
setShade();
}
});
function setShade() {
$("#upperShade").css("height", selection.position().top);
$("#lowerShade").css("height", 600 - (selection.position().top + 150));
$("#lowerShade").css("top", selection.position().top + 150);
$("#leftShade").css("top", selection.position().top);
$("#leftShade").css("width", selection.position().left);
$("#rightShade").css("top", selection.position().top);
$("#rightShade").css("left", selection.position().left + 150);
$("#rightShade").css("width", 450 - selection.position().left);
}
$("#selection").mouseup(function (e) {
move = false;
});
});