We Keep Coding

How to get divs to be the same width in jQuery?

I'm using this JQuery to get a div to be the same width as another when the window width is less than 1200px and can't figure out what mistake I'm making.
var width = $('.creative').outerWidth();
if ($(window).width() < 1200){
$('#right-child').css('width', width);
}else{
console.log('more than 1200');
};

Try to concatenate the value with unit name.
$('#right-child').css('width', width + 'px');

Guess I know whats the problem, your code is right! but... If you test these code with the width of the browser in full, nothing will change. You need to add .resize event (https://api.jquery.com/resize/), just that!
$(window).resize(function(){
console.log('resize!');
var width = $('.creative').outerWidth();
if ($(window).width() < 1200){
$('#right-child').css('width', width);
}else{
console.log('more than 1200');
};
});
If the problem persist, just let me know.

How do I set the min-height of a div to the height of another div?

I want to set the min-height of #wrapper to the height of #sidebar which does not have a fixed height.
So, something like the following. I am not adept with JavaScript so please don't laugh if it's way off.
var sidebarHeight = jQuery('#sidebar').height;
jQuery('#wrapper').css('min-height', sidebarHeight);
How can I make this work?

Try this
var sidebarHeight = jQuery('#sidebar').height(); //height() not height
and ensure function should be in $(document).ready(function(){... });
As per your need
jQuery('#sidebar').outerHeight();
if(jQuery('#sidebar').is(':visible')){ // if sidebar visible min-height is applied to wrapper
jQuery('#wrapper').css('min-height', sidebarHeight);
}

Use jquery outerHeight() as it will take in consideration the margin also
$(document).ready(function(){
var sidebarHeight = jQuery('#sidebar').outerHeight();
jQuery('#wrapper').css('min-height', sidebarHeight);
$(window).resize(function(){ //for responsive site ensure that min-height is changed
var sidebarHeight = jQuery('#sidebar')..outerHeight();
jQuery('#wrapper').css('min-height', sidebarHeight);
});
});

setting a dynamic height to a div based on screen space available

what i need to achieve is the following:
a webpage for smartphone that contains a series of divs with heights, paddings, margins, etc.. and one particular div at the bottom that should be as high as the (window.innerHeight minus all the other divs' heights before him) so that the javascript can stick a fixed height to it (which has to be dynamic because i don't know the device screen height) and i can set via CSS overflow:auto and make it scrollable.
the js i started using is the following:
(function() {
function resize(delta) {
var heights = window.innerHeight;
jQuery('.dynamic-height').css('height', (heights - delta) + "px");
}
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
resize(20);
} else {
resize(0);
}
})();
you can ignore the if/else statement.
here is a very simple fiddle: http://jsfiddle.net/omegaiori/k56wj/
the div that has to have the dynamic height is div.dynamic-height (violet background).
thank you so much for your help, this would be a life saver! :)

Try this,
Demo
(function() {
function resize() {
total = 0;
jQuery('.cont div').each(function(){
total += parseInt($(this).css('margin-top').split('px')[0])+parseInt($(this).css('margin-bottom').split('px')[0])+$(this).height()
});
var heights = window.innerHeight;
var dy_height = heights-total
jQuery('.dynamic-height').css('height', dy_height + "px");
}
resize()
})();

.css() not setting width value

I'm looking to simply move a divs width as certain pictures load in my application. As such for some reason I read the Div's width add 128 and then use the .css() to change divs new width. For some reason the .css() function isn't updating the width as it goes along. It only updates on the last picture that is loaded. I'm really not to sure why this is happening. Here is some code:
document.getElementById('back').onload = function(){
var width = $("#LoadingBar").css("width").replace(/[^-\d\.]/g, '');
width = parseInt(width);
var newwidth = width + increment;
newwidth = newwidth +"px";
$('#LoadingBar').animate({width:newwidth},"fast");
if(width == 1280) {
//This is another div that I show once all the pictures load
$("#everything").show();
}
}
Any ideas as to what I am breaking?

Use the jquery width property to update element widths.
css is for more esoteric properties of your HTML elements.
$("#LoadingBar").css("width")
Becomes:
$("#LoadingBar").width()
You can set width too
$("#LoadingBar").width(MyWidthValue);

instead of using css width use: var width = $("#LoadingBar").width() to get the numeric value. Then increment it and append units

Just do this to change the width
$(<your element>).width(function (a, w) {return w+=128});
and this if you need to animate
$(<your element>).animate({width:"+=128"},'fast');

Jquery horizontal pan with 100% width element

So I have this 100% witdh container with lots of images in it. I would like to pan it horizontally when I mouseover the parent container.
I've come quite far but I have a few problems.
Here is the fiddle
First I have to set the margin left to be percentage based, else it wont show all the images. To do this, I have to get the full width of the inner container, but I'm unable to do this.
$('.merken').mousemove(function (event) {
var left = event.pageX;
$('.slider').css({
'margin-left': '-' + left + 'px'
});
});
The thumb-container now has a fixed width, but i need to make this an auto width. Right now this makes sure that the images in the container dont show one-by-one. How do I fix this?
.thumb-container { width:2000px;}
Thanks

You can do something like this:
Fiddle
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/$('.thumb-container').width();
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
and
.thumb-container{
width:200%;
}

I'm not sure about what you want to do. But I think that you should use the .width() jquery method:
$('.merken').mousemove(function(event){
var left = event.pageX;
var percentleft = left/$('.merken').width();
var sliderleft = $('.slider').width()*percentleft;
$('.slider').css({
'margin-left': '-'+sliderleft+'px'
});
});

For those intrested, fixed it like this:
var conb = $('.slider').width();
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/conb;
$('.slider').css({
'margin-left': '-'+left+'%'
});
});