jQuery .append() in Firefox: vertical scrollbar appears?
I want to dynamically add a number of DIVs to a target DIV in my page with .append(), then set their heights and positions so they're all visible in the page without scrolling.
All of this goes OK, but in Firefox (3.6.16 on Ubuntu) a vertical scrollbar appears, as though the height of each new DIV were being added to the total height of the page content - even though each new DIV is up near the top of the screen, and its 开发者_JAVA技巧height isn't anywhere near the length of the screen. Ubuntu Chrome behaves fine. When I ask jQuery for the height of the target DIV after appending the new DIVs, it hasn't changed.
Here's most of the page code for a test page I wrote to isolate the problem - thanks in advance!
<style type="text/css">
#target {
width: 50px;
height: 50px;
background-color: #cfc;
}
</style>
<script>
$(document).ready(function() {
var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');
for(i = 0; i < 10; i++){
$('#target').append('<div id="new_' + i + '">Hello</div>');
$('#new_' + i)
.position({
my: 'left top',
at: 'left top',
of: '#target',
offset: '' + (i * 20) + ' ' + (i * 10)
})
.width(200)
.height(150)
.css('background-color', cols[i]);
}
});
</script>
</head>
<body>
<div id="target">
</div>
</body>
If you give the added <div> elements "position: absolute", then you'll get no scrollbars.
The jQuery UI ".position()" utility will give the affected elements (your added <div> elements) "position: relative" if they're not otherwise set up with a "position". Elements that are positioned that way consume layout space on the page as if they were not moved away from their "natural" position. Thus, the page overflows when you add all those elements even though they're relocated such that they all fit.
By giving them "position: absolute", you take them out of the ordinary layout flow. Chrome doesn't agree about this, for reasons I don't understand; I think Firefox is actually doing the correct thing here. (edit — if you add a line to append one last <div> to "target", and make it just a plain-jane <div> with a little text in it but no positioning at all, then you'll see that it ends up way way down the page in Chrome, and you will get a scrollbar about the same size as Firefox gives you. Thus, it looks like Chrome doesn't "claim" the phantom space unless something actually comes after it.)
Here is a jsfiddle. The updated code (one extra line):
$(document).ready(function() {
var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');
for(i = 0; i < 10; i++){
$('#target').append('<div id="new_' + i + '">Hello</div>');
$('#new_' + i)
.position({
my: 'left top',
at: 'left top',
of: '#target',
offset: '' + (i * 20) + ' ' + (i * 10)
})
.css('position', 'absolute')
.width(200)
.height(150)
.css('background-color', cols[i]);
}
});
You can include all of that stuff in a css() function...
Demo: http://jsfiddle.net/wdm954/xSYBr/
var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');
for(var i = 0; i < 10; i++){
$('#target').append('<div id="new_' + i + '">Hello</div>');
$('#new_' + i).css({
backgroundColor: cols[i],
position: 'absolute',
left: i * 20 + 'px',
top: i * 10 + 'px',
width: '200px',
height: '150px'
});
}
加载中,请稍侯......
精彩评论