I am trying to create a dynamic layout of divs (100% wide top to bottom) that can be opened and closed and I don't want the content to extend beyond the bottom of the page so when the open/closed state changes I run code like this:
// BUG: maxHeight exists in the DOM but apparently cannot be programatically set
e.style.maxHeight = h;
alert('Element ' + e.id + ' was set to have a maxHeight of ' + h + ' but actually has a maxHeight of ' + e.style.maxHeight + '.');
The alert always shows no change to the max-height regardless of its initial value. This happens to be on divs. All elements have a display style of block. The debugger is showing no exceptions. Happens on Chrome, IE and Firefox. Setting max-height via a style string is no problem.
I am not doing any fancy CSS such as float, position, or border-box stuff either.
Other related answers I have seen here would seem to say this should work.
Like all dimension values in JS (height,width,top,bottom,etc.), the value(h in this case) must have a unit defined for this to work:
e.style.maxHeight = h + "px";
JSFiddle Demo
Related
I'm using the following code to position images on my page:
var adjustImages = function(){
var monsters = [$("#m3"), $("#m4")];
monsters[0].css('right', monsters[0].width() * -0.4 + "px");
monsters[0].css('top', $("#divider-green").height() + $("#divider-orange").height() + (monsters[3].height() / 6) + "px");
monsters[1].css('left', monsters[1].width() * -0.385 + "px");
monsters[1].css('top', $("#divider-green").height() + $("#divider-orange").height() + $("#divider-red").height() + "px");
}
I'm then calling this function when the page loads, and when it's resized:
$(document).ready(function(){
adjustImages();
});
window.onresize = function(event) {
adjustImages();
};
The images are meant to be positioned on the window border (as in, part of the image is off the screen, part it off). This is done by setting right/left to a negative number (relative to the image size).
Sometimes when I refresh the page the images are placed correctly, however other times they are not over the border (but are rather positioned against the border (as if no left/right adjustment was applied). Does anyone know what the cause of this might be?
It looks like you aren't doing any check to see if the image is loaded before doing math based on it's width. That's probably what's causing the inconsistent behavior.
When an image is first created in the DOM, before it's loaded (and if it doesn't have one set directly), it's width and height are 0. What I would do is add a load event listener on your images and then call adjust.
You also want to call adjustImages() if one of the images already has a width greater than 0, because that means it's already loaded by the time the document is ready.
$(document).ready(function(){
$('#m3, #m4').one('load', function () {
adjustImages();
});
if ($('#m3').width > 0 || $('#m4').width > 0) {
adjustImages();
}
});
Now, that code snippet has a bit of a bug because it'll fire once either is loaded, not when both are loaded. You'll want to tweak it, and probably even separate them out so you're doing things individually for each, but it should give you the idea.
Trying to make a container with text gradually expand upon adding new text to it, I used css transition property. Precisely, I fix current width, add text and then release the width. JS code is following:
footer.style['max-width'] = footer.offsetWidth + 'px'
footer.innerHTML += ' additional text'
footer.style['max-width'] = '500px'
with this css for footer:
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
This did't work. Trying to find a workaround I added another line of code:
footer.style['height'] = footer.offsetHeight + 'px'
Now, with this line being put before assignment of max-width (so in the beginning of the snippet), it doesn't work. But putting it after that line (making it second line) — does. The question is why? and what is the proper way to work with transitions? (but mainly, why?)
Fiddle tested in firefox 40.0 and chrome 39.0: http://jsfiddle.net/53dbm6vz/
It's likely that the problem is that both of your footer.style['max-width'] assignments occur inside the same synchronous operation. The browser(s) probably ignore the intermediate value completely.
It can be resolved if you split the operation to 2 parts:
Set the initialization width and...
Use a setTimeout to trigger the actual assignment.
Try like this:
footer.style['max-width'] = footer.offsetWidth + 'px'
window.setTimeout(function() {
footer.innerHTML += ' additional text'
footer.style['max-width'] = '500px'
}, 0)
Chrome doesn't seem to honor the .width() setting that I set on a table. IE10 does.
I get the width of the table after the page is done loading: 425px.
Then I remove the row with the widest content, which makes the table repaint and the table's width shrinks: 185px.
Then, I set the table's width to the original value, 425px. But if I check the width of the table after the set, it is off (by 2px in my experiments): 423px.
Is this a known bug?
Am I using the wrong get/set?
It seems that it has to do with the table border (1px border X2 = 2px), but do I need to do calculations to account for the border when setting the width?
I have a jsfiddle that replicates the problem:
http://jsfiddle.net/slolife/zLyQ2/
var orgWidth = $('table').width();
alert('Original width = ' + orgWidth);
$('table').width(orgWidth);
alert('Width after setting width to ' + orgWidth + ' = ' + $('table').width());
$('#two').remove();
alert('Width after remove = ' + $('table').width());
It's all about the box model.
add
table{
box-sizing: border-box;
}
The link is a very interesting read but basically you force calculation including borders and padding which is not compatible with w3c spec.
updated jsFiddle
In my XLST, we use "vanilla" javascript to manipulate some divs that are in our reports. One of them goes above everything else in the center of the screen, and I was calling it like so when the page loads:
var overlayObj = document.getElementById('theoverlay');
overlayObj.style.left = Math.max(0, ((window.innerWidth - overlayObj.offsetWidth) / 2) + window.scrollX);
var padding = 50;
overlayObj.style.top = window.scrollY + padding;
overlayObj.style.bottom = -window.scrollY + padding;
This is also called when the page is resized + scrolled, and it works fine, however I noticed that there was no doctype in our XSLT and this was causing quirks mode in IE which just about broke everything. So I added the HTML5 doctype and now the code above doesn't do anything. I've put in alerts to fire out the values of overlayObj.style.left and when there is NO doctype in the file I get the exact div sizes back, but when there is a doctype I get the value auto.
Does anyone know why this might be happening? And how to make it give me the values?
When getting the data I was using:
var computedStyle = window.getComputedStyle(overlayObj, null);
alert("left value: " + computedStyle.getPropertyValue("left"));
If I try to return overlayObj.style.top when there is a doctype, I get no response. Again, without the doctype there is no problems and the value is returned.
Well with quirks mode the browser does try to make sense of your broken CSS but in standards mode you need to make sure you assign a proper CSS value to top or left and that consists of a number and a unit e.g. foo.style.left = 200 + 'px';. So make sure you provide that unit and the assignment should work.
var ProdWidth = Math.abs(parseInt(Product.css('width')))
+ Math.abs(parseInt(Product.css('marginLeft')))
+ Math.abs(parseInt(Product.css('marginRight')))
+ Math.abs(parseInt(Product.css('paddingLeft')))
+ Math.abs(parseInt(Product.css('paddingRight')));
This works for coming up with the total width of an element including padding and margins, but its stupid. How should I be doing it?
Check out the outerWidth() property. It gets the width of the element and its padding, border, etc.
Setting its first argument to true will include the margins.
var ProdWidth = Product.outerWidth(true);