We Keep Coding

.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');

Dynamically set element height and width

I'm using Backbone to render a square tile element in which I set the height and then dynamically set the width to match the height. However, when trying to fetch the elements height, I get 0 returned.
Here is my code:
var app = app || {};
app.ClassModelView = Backbone.View.extend({
className: 'tile',
template: _.template('<%= name %>'),
render: function() {
var dim = 'calc(' + parseInt(100 / app.global.rows) + '% - ' + app.global.margin * (app.global.rows + 1) + 'px)'; //e.g. "30% - 20px"
this.$el.append(this.template(this.model.attributes)).css({
margin: app.global.margin + 'px',
height: dim,
}).css({
width: this.$el.height() + 'px',
});
return this;
}
})
How would I set the width of $el to the height? I'm not sure if I'm doing something syntactically wrong or if it is the way I'm using Backbone that is resulting in my problem.

I've ran into similar issues in the past. In most cases, it was because my view had rendered but had not yet been inserted into the DOM. This is pretty common when dealing with nested views.
You can test for this by setting a break point in your onRender method and checking this.$el.parent(). You might want to go up a few parents to make sure the parent elements are in the DOM.
You can get around this by binding to the DOMNodeInserted event:
this.$el.on('DOMNodeInserted', function(e) { console.log($(e.target).outerHeight()); })

Determining the Width and Height of an element: True and normal

I would like to know what the best method is to calculate the width and height of an element with Jquery/Javascript (or any other method that might be more accurate). Currently, I am using this Jquery method:
Jquery: See my example: http://jsfiddle.net/AwkF5/1/
var w = $("#wrapper"); //The element dimensions to calculate
$("#displayW").text( "outerWidth:" + w.outerWidth()+ " , outerWidth(true):" + w.outerWidth(true) ); // Displaying the width in the #displayW div
$("#displayH").text( "outerHeight:" + w.outerHeight()+ " , outerHeight(true):" + w.outerHeight(true) ); // Displaying the height in the #displayH div
Now is this the most accurate way to calculate the width/height(including content, padding and border) and TRUE width/height ((including content, padding, border and margin) of an element?
What would be the plain javascript method?
I'm asking because I want to make a background image for the div and I want to know what size it should be...Note that the width and height varies between different browsers...obviously
Thank You
​

This should work for you:
var realWidth = $("#yourBlockId").outerWidth();
realWidth += parseInt($("#yourBlockId").css("margin-left"), 10);
realWidth += parseInt($("#yourBlockId").css("margin-right"), 10);
The same approach for height.

jQuery Variable Height

I'm trying to have an image gallery where a caption is vertically centered inside of a slideshow, here's the code I'm working with
$(window).load(function() {
var imageHeight = $('.flexslider .slides li img').height();
var captionTop = imageHeight - $('.title-cap').height();
var captionTop = captionTop/2;
$('.title-cap').css('top',captionTop + 'px');
var captionTopOne = imageHeight - $('.sub-cap-one').height();
var captionTopOne = captionTopOne/2;
$('.sub-cap-one').css('top',captionTopOne + 'px');
var captionTopTwo = imageHeight - $('.sub-cap-two').height();
var captionTopTwo = captionTopTwo/2;
$('.sub-cap-two').css('top',captionTopTwo + 'px');
var captionTopThr = imageHeight - $('.sub-cap-three').height();
var captionTopThr = captionTopThr/2;
$('.sub-cap-three').css('top',captionTopThr + 'px');
});
The caption is positioned absolutely, and I'm using top to do the centering...
So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.
The first instance is working, with "title-cap", but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.
Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.
Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now
function setContent(){
[Added all of the above minus the onload part in here]
}
$(window).load(function() {
setContent();
});
$(window).resize(function() {
setContent();
});
Now just not sure why the sub-cap's aren't loading properly. Any ideas?

I've had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.

Adding extra CSS with javascript

There's this image on a page I'm coding which should be resized and horizontally and vertically centered depending on some variables. I can't use the CSS sheet for this, as the width and height variables are dynamic. Therefore I want to have javascript add two extra arguments (top and left) to the style of this specific image.
I've tried this (which to me looked quite sensible)
function getStyleSheet() {
for(var i=0; i<document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.title == 'StyleSheet') {
return sheet;}
}
}
var rule_sheet = getStyleSheet();
function changeText() {
rule_sheet.insertRule(".className { top:" (-(.5*newHeight))+ "; left:" +(-(.5*newWidth))+ ";}");
showRules();
}
I've also tried to add an inline style to the image like so: (in the function where the image was resized)
$(this).style.top= (-(.5*newHeight));
$(this).style.left= (-(.5*newWidth));
Neither solution worked, while to me both methods seemed plausible. What am I missing?
EDIT: I realized I didn't add the suffix 'px' to this, but after doing so, it still doesn't work :(
EDIT II:
After NickFitz hints, I rewrote the last bit of code to this:
$(".className").each(function() {
$(this).css("top", (-(.5*newHeight)), 2);
$(this).css("left", (-(.5*newWidth)), 2);
});
This actually does change the way it looks. Not the way I want it, but at least I'ma tad closer to a solution.

If you're using jQuery, you want the CSS-related methods. $(this) returns a jQuery object, and setting the style property of that isn't going to do anything.

Try this:
$(this).css( 'top', (-(.5*newHeight))+'px' );
$(this).css( 'left', (-(.5*newWidth))+'px' );

You should try something like (using val on the end of the variables)
$(this).css({top: topval + "px", left : leftval + "px", width : widthval + "px", height : heightval + "px"});
or you could use:
$(this).width(widthval);

Can you just get a wrapped set containing the <img> and then use the .css() command to set the appropriate values for it?
$('#img').css({ 'width' : calculatedWidth + 'px', 'height' : calculatedHeight + 'px' });