We Keep Coding

jquery get width of div to left side window

And I want to get the width or distance or pixel that between the div and left side of of window/viewport.
And another width again between the div to the right side of the window.
I will use the width to create a left line and right line.
But I am poor in jQuery, I try offset but seems nothing happen.
So I back to 0 again so I didn't include fiddle here since I got nothing inside.
But I have attached with the image link as below, to explain my question.
Please help me on try to get the width, I can create the line myself.
Thank you.

var of = $(ele).offset(), // this will return the left and top
left = of.left, // this will return left
right = $(window).width() - left - $(ele).width() // you can get right by calculate
Maybe this can help you.
After all, .width() isn't the only answer, like innerWidth() or outerWidth()

There is two options
One is you can use red line as image and you can place the div over the red line.
Second one,
If you want to calculate:
Left div width = parent div width - child div offset;
Right div width = parent div width - child div offset + child div width;
var parentdiv = document.getElementById("ParentDivID");
var parentWidth = parentdiv.offsetWidth;
var childdiv = document.getElementById("childDivID");
var childWidth = childdiv.offsetLeft;

This is easier to do with POJ (plain old javascript). Get the position of the element on the screen. Then evaluate its left property. That will be the width of your left line. Then subtract its right property from the width of the screen. That will be the width of your right line.
var x = document.getElementById('myDiv').getBoundingClientRect();
var myLeftLineWidth = x.left;
var myRightLineWidth = screen.width - x.right;
For more information see this post.
If you want the width of the window instead of the screen, change screen.width to window.innerWidth. If you don't want the scrollbar, etc. to be included in the width, use document.documentElement.clientWidth. (For more info on these, see this.)

We can work out that where the box starts with .offset().
Next, we can work out where the box ends with .offset() + .width().
We now know where our box sits on the x-axis.
Now let's see what we have to the left of our box with .left which can run on our .offset().
We've now worked out how much space there is to the left and how wide our box is.
Finally, we can put what we've worked out together, we can get the page width $(window).width() and minus what there is to the left of our box (stage 2) and the width of our box (stage 1) and that will only leave what is to the right of our box.
That's the theory anyway now let's have a look at some code. You'll see I'm working out all the bits from the theory and then adding some visual representation.
calcSizes = function() {
var boxPos = $(".box").offset(),
toLeft = boxPos.left,
toRight = $(window).width() - ($(".box").width() + toLeft);
$(".left").width(toLeft + "px");
$(".right").width(toRight + "px");
console.log("Right: " + toRight + "px");
console.log("Left: " + toLeft + "px");
console.log("Width: " + $(".box").width() + "px");
console.log(
$(window).width() + "px = " +
toRight + "px + " +
toLeft + "px + " +
$(".box").width() + "px"
);
console.log(" ");
}
calcSizes();
body {
margin: 0
}
.box,
.indicator {
padding: 10px 0;
text-align: center
}
.box {
width: 100px;
background: #FF5722;
margin-left: 60%
}
.indicator {
background: repeating-linear-gradient( 45deg, #F44336, #F44336 10px, #D32F2F 10px, #D32F2F 20px);
overflow: hidden;
transform: translatey(-100%);
opacity: .8
}
.left {
float: left
}
.right {
float: right
}
button {
position: fixed;
top: 55px;
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">BOX</div>
<div class="left indicator">
LEFT
</div>
<div class="right indicator">
RIGHT
</div>
<button onclick="calcSizes()">
Recalculate
</button>
Hope this makes sense and helps you with your project.

You can do that with JavaScript, no need for jQuery:
var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();
var offsetRight = document.documentElement.clientWidth - offset.right;
var offsetLeft = offset.left;
JSFiddle

whay can't I change both image height and width at same time with javascript?

I have an image in a div and I want the image to stay centered at all times.
If the width of the image is wider than the screen, then I want the image to expand to the width of the view port. And if the image is shorter than the height of the view port then I want it to expand to the height of the view port.
In my code, when I expand the width, the height expands automatically, which is great since I don't have to calculate it. The height does the same thing. When the height is expanded, the width stays proportional.
However, if the width changes in such a way that the height is now smaller than then view port, then I need to check the height and bring it back up to the view port height (which should expand the width again but it doesn't). When I have to change both height and width at the same time, the automatic proportioning doesn't work. If I do one or the other, it does work.
How can I accomplish this so they can both be changed and work without distorting the image?
my code:
inner_width = $(window).innerWidth();
inner_height = $(window).innerHeight();
if (inner_width < original_pic_width ) {
$(pic).css({'width': original_pic_width});
}
else {
$(pic).css({'width' : inner_width });
}
if (inner_height < original_pic_height){
$(pic).css({'height': original_pic_height});
}
else {
$(pic).css({'height' : inner_height });
}

CSS contain is pretty nice.
$("div").css({
backgroundImage: "url(" + $("img").prop('src') + ")",
backgroundSize:"contain",
backgroundRepeat: "no-repeat"
});
div { width:200px; height:200px; border:1px solid red;}
div img { display:none }
<div>
<img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>

Here is a possible solution (not sure to understand clearly what you want though). Note that I'm not absolutely sure that the centering method is cross-browser.
var div = $("div");
var img = $("img");
var imgw = img.width();
var imgh = img.height();
var imgr = imgw / imgh;
var sizes = [300, 120];
var i = 0;
setInterval(function () {
div.width(sizes[i]);
i = (i + 1) % 2;
adjust();
}, 1000);
function adjust () {
var divw = div.width();
var divh = div.height();
var divr = divw / divh;
if (divr < imgr) {
img.width("100%");
img.height("auto");
} else {
img.width("auto");
img.height("100%");
}
}
div {
position: relative;
}
img {
display: block;
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:120px;height:120px;border:10px solid #5900CC;">
<img style="width:100%;" src="http://i.stack.imgur.com/jKXi2.jpg" />
</div>

If you set both height and width... both dimensions, height and width will be set.
It should be enough to set just one dimension if you set the width=viewport's width if it's horizontal (width>height) or the height=viewport's height if it's vertical.

Find which dimension you have to change and change that one only. You can do that by checking the difference between the image's width and the window's innderWidth, and the difference between the image's height and the window's innerHeight. Whichever difference is greater is the one you need to change only. That should take care of the other dimension without having to resize both.

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 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;
}
}

Keep aspect ratio with image width in css

Is there a way to fix the aspect ratio of images given a smaller width using css? Maybe by using jQuery / javascript?
Thanks!

With plain CSS, you could set only one dimension of the images, either width or height and set the other as auto, e.g.:
.thumb {
width:200px;
height:auto;
}
The images will have a fixed 200px width, and the height will depend on the aspect ratio.

Here is the jQuery solution ;)
function fixImage(elm) {
elm = $(elm);
var x = elm[0];
var allowedHeight = 80;
var allowedWidth = 80;
if (width > height) {
elm.css('width', allowedWidth + 'px');
elm.css('height', 'auto');
}
else {
elm.css('height', allowedHeight + 'px');
elm.css('width', 'auto');
}
}