We Keep Coding

jQuery: Inaccuracy with scrollLeft when scaled

I have a scrollable container with links and thumbnails - scrollLeft to thumbnail depending on the link clicked which works fine, normally.
However, when I scale the main container with transform, scrollLeft scrolls to wrong position.
Any ideas how to resolve this?
scroll: function(){
var chapterName = this.chapter.getAttribute('data-chapter');
var thumbnail = $('.thumbnail-content[data-chapter="'+chapterName+'"]').parent();
if ( !$(this.chapter).hasClass('active-chapter') ){
$('.active-chapter').removeClass('active-chapter');
$('#thumbnail-container').animate({
'scrollLeft' : '+='+thumbnail.position().left
},{
duration : 400,
easing : 'easeOutSine'
});
$(this.chapter).addClass('active-chapter');
}
}
reScale: function() {
var windowHeight = $(window).height() - 20;
if (windowHeight <= 827) {
$('#viewer-container').addClass('scale scale075');
}
}
CSS:
.scale075 {
-webkit-transform: scale(0.75); /* Chrome, Safari 3.1+ */
-webkit-transform-origin: 50% 50%;
-moz-transform: scale(0.75); /* Firefox 3.5+ */
-moz-transform-origin: 50% 50%;
-ms-transform: scale(0.75); /* IE 9 */
-ms-transform-origin: 50% 50%;
-o-transform: scale(0.75); /* Opera 10.50-12.00 */
-o-transform-origin: 50% 50%;
transform: scale(0.75); /* Firefox 16+, IE 10+, Opera 12.10+ */
transform-origin: 50% 50%;
}
Here is a fiddle

$('#thumbnail-container').animate({
'scrollLeft' : thumbnail[0].offsetLeft/*change here*/
},{
duration : 400,
easing : 'easeOutSine'
});
I think,in this ticket,it's better to use absolute position then relative position.
And then offsetLeft has no relation with transform,so everything work fine.
fiddle

You can resolve this if you know the scale in the script.
I modded your fiddle to fix it and tried to fix your example code.
Here is a fiddle
So when you transform to say 0.75 you set a variable to 0.75 then when you set the scrollLeft you multiply the thumbnail position with 1/scale
var scrollScale = 1;
...
scroll: function(){
var chapterName = this.chapter.getAttribute('data-chapter');
var thumbnail = $('.thumbnail-content[data-chapter="'+chapterName+'"]').parent();
if ( !$(this.chapter).hasClass('active-chapter') ){
$('.active-chapter').removeClass('active-chapter');
$('#thumbnail-container').animate({
'scrollLeft' : '+='+thumbnail.position().left * (1/scrollScale)
},{
duration : 400,
easing : 'easeOutSine'
});
$(this.chapter).addClass('active-chapter');
}
}
reScale: function() {
var windowHeight = $(window).height() - 20;
scrollScale = 1;
if (windowHeight <= 827) {
$('#viewer-container').addClass('scale scale075');
scrollScale = 0.75;
}
}
Hope that solves your problem or give you an idea how to solve it more dynamically.
So the reason for this is that position().left uses your transform when it recalculates position.. But scrollLeft dont check transform. so you recalculate position so they use the same scale.

Divs aren't aware of screen resizing

First div is a category and the second div contains some photos.
I wanted to do something that when user clicks on an image the first div move 0.7 of the screen width to right and all images in second div disappear, so I wrote:
$(document).ready(function() {
$("img").click(function() {
var my_width = screen.width * 0.7;
$(".second_div").find("img").hide();
$(".first_div").css({
"transform": "translate(" + my_width + "px,0px)",
"-webkit-transform": "translate(" + my_width + "px,0px)",
"-ms-transform": "translate(" + my_width + ",0px)"
});
});
});
.first_div {
transition-duration: 2s;
}
<div class="first_div col-md-1">
//some code
</div>
<div class="second_div col-md-11>
//some codes
</div>
When its full screen it works right, but when I resize the window and try again the first div won't be located at where it supposed to (0.7 Of screen width) What's wrong?

for window width I would use the following:
var my_width = document.documentElement.clientWidth * 0.7;
this is the same (cross-browser compatible) solution used by jQuery's $.width()
For more info on different methods of getting width, see this link.

Try using the window's inner width instead of the screen width, so that it's relative to the size of the viewport. replace
var my_width = screen.width * 0.7 ;
with:
var my_width = window.innerWidth * 0.7 ;
See an example here:
http://codepen.io/anon/pen/jWWEKO

Change Div Width Along on load and resize

I wrote this code to change width and height of the wrapper box based on the available space on the screen. When I open the page, div loads well but when I resize it the size of the div does not change.
var width = (($(window).width()) - 100);
var height = (($(window).height()) - 100);
$(window).ready(function() {
$("#wrapper").width(width);
$("#wrapper").height(height);
});
$(window).resize(function(){
$("#wrapper").width(width);
$("#wrapper").height(height);
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Xyz</title>
</head>
<body>
<div id="wrapper">
asd
</div>
</body>
</html>

You need to recalculate the height and width variables within the event handlers:
$(window).ready(calculateSize);
$(window).resize(calculateSize);
function calculateSize() {
var width = $(window).width() - 100;
var height = $(window).height() - 100;
$("#wrapper").width(width);
$("#wrapper").height(height);
}
Note however, that this is possible in CSS alone:
#wrapper {
position: absolute;
top: 0;
left: 0;
right: 100px;
bottom: 100px;
}

You need to recalculate the dimension.
$( window ).resize(function(){
width = (($(window).width())-100);
height = (($(window).height())-100);
$("#wrapper").width( width );
$("#wrapper").height( height );
});

I use this function I wrote and it is working well:
//when I load the page
window.onload = function(event) { resizeDiv(); }
//when I resize the page
window.onresize = function(event) { resizeDiv(); }
function resizeDiv() {
vpw = $(window).width()-100;
vph = $(window).height()-100;
$('#wrapper').css({'height': vph + 'px'});
$('#wrapper').css({'width': vpw + 'px'});
}

Change margin, width, height, top, left, padding from all elements between a div

I got a design in Full HD resolution, it was planned for a presentation in this solution, now they want that it will be a bit responsive. Now I have to change all these parameters: margin, padding, width, height, top, left on the fly, maybe someone got a solution for me.
I tried following and it works for the images with the width and height:
// Set Array for Resize (0 => width of the window, 1 => resize (yes / no)?, 2 => how much per cent do I have to put away
var resize_pool = new Array(parseInt($(window).width()), false, 0);
if(resize_pool[0] < 1920) {
resize_pool[1] = true;
resize_pool[2] = (100 * resize_pool[0]) / 1920;
resize_pool[2] = 100 - Math.floor(resize_pool[2]);
}
// Do I have to resize?
if(resize_pool[1] == true) {
$("#content img").each(function(index, element) {
$(this).css('width', 'calc(' + $(this).width() + 'px - ' + resize_pool[2] + '%)').css('height', 'calc(' + $(this).height() + 'px - ' + resize_pool[2] + '%)');
});
}
This works fine, but is there a better solution, where I can change all my values? margin, padding etc.
Thanks for your help in advance

CSS Media Queries are what you need to use - e.g.
td {
padding:20px; /* Default padding size for 1920px+ wide */
}
#media screen and (max-width: 1919px) {
td {
padding:10px; /* Smaller padding for screens less than 1920px wide;
}
}

center image in simple jquery zoom plugin

I'm trying to write a very very simple zoom plugin that should have just a button to zoom in, zoom out, and the pan function to move the image around.
For now I've writte the part to zoom in and zoom out.
My problem is that I can't find a way to center the image inside the "zoombox".
This is my code so far:
$.fn.zoom = function() {
var img = this;
img.attr("style", "-ms-transform: scale(1); -ms-transform-origin: 0% 0%; -webkit-transform: scale(1); -webkit-transform-origin: 0% 0%").wrap('<div style="width: 400px; height: 400px; overflow: hidden;" class="zoombox" data-scale="1"></div>');
$("body").on("click.zoom", ".zoomin, .zoomout", function() {
if( $(this).hasClass("zoomin") ) {
var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
} else {
var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
}
img.parent().attr("data-scale", zoomFactor);
console.log(zoomFactor);
img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")"});
});
};
Fiddle:
http://jsfiddle.net/xM7r4/1/
I know the style is not the best but I'm just trying to make it works without think about the style of the code.
How can I center the image inside the box, thinking that I will have to apply a pan effect later that will change the transform-origin values?
PS: I care about compatibility only on Chrome and IE9 for now.

edit for comment
You are correct. Here I've updated to work with transform-origin. It takes the dimensions of the containing div and divides by two (to get the centerpoint of the containing div) and passes these into the image's css transform-origin property:
http://jsfiddle.net/xM7r4/23/
I've tested with different dimensioned images, and it works.
original
You'll need to move the image using margin-left and margin-top depending on if you are zooming in or out.
http://jsfiddle.net/xM7r4/21/
Since you are increasing your image by a scale of 1%, you need to move the margins accordingly, negative for zoom-in, position for zoom-out.
$("body").on("click.zoom", ".zoomin, .zoomout", function() {
var imgWidth = $(img).width();
var imgHeight = $(img).height();
var scaleWidth = Math.floor(imgWidth * 0.01);
var scaleHeight = Math.floor(imgHeight * 0.01);
if( $(this).hasClass("zoomin") ) {
var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
moveLeft -= scaleWidth;
moveTop -= scaleHeight;
} else {
var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
moveLeft += scaleWidth;
moveTop += scaleHeight;
}
console.log(moveTop);
console.log(moveLeft);
img.parent().attr("data-scale", zoomFactor);
console.log(zoomFactor);
img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")", "marginLeft": moveLeft, "marginTop": moveTop});
});