Assume an HTML page:
<html>
<body>
.. html content (outside of our control) ..
.. javascript block ..
.. some more html content (outside of our control) ..
</body>
</html>
Assume further that the only part of the HTML page that we're able to control is a javascript block in the middle of the page.
Using that javascript block, how do I increase the total page height by 150 pixels by "padding" the bottom of the page?
If I could alter the HTML a simple solution would be:
<html>
<body>
.. html content (outside of our control) ..
.. javascript block ..
.. some more html content (outside of our control) ..
<div style="height: 150px; clear: both;"></div>
</body>
</html>
But how do I achieve this only by using the javascript block?
The ideal solution should be cross-browser patible and 100 % inline (that is using no javascript library).
Update #1: The javascript block has access to the entire DOM of the page.
Update #2: The total length of the page (before altering the DOM) varies.
Update #3: Assume that no javascript library (such as the otherwise excellent jQuery) can be used.
Assume an HTML page:
<html>
<body>
.. html content (outside of our control) ..
.. javascript block ..
.. some more html content (outside of our control) ..
</body>
</html>
Assume further that the only part of the HTML page that we're able to control is a javascript block in the middle of the page.
Using that javascript block, how do I increase the total page height by 150 pixels by "padding" the bottom of the page?
If I could alter the HTML a simple solution would be:
<html>
<body>
.. html content (outside of our control) ..
.. javascript block ..
.. some more html content (outside of our control) ..
<div style="height: 150px; clear: both;"></div>
</body>
</html>
But how do I achieve this only by using the javascript block?
The ideal solution should be cross-browser patible and 100 % inline (that is using no javascript library).
Update #1: The javascript block has access to the entire DOM of the page.
Update #2: The total length of the page (before altering the DOM) varies.
Update #3: Assume that no javascript library (such as the otherwise excellent jQuery) can be used.
Share Improve this question edited Apr 28, 2009 at 20:56 knorv asked Apr 28, 2009 at 20:44 knorvknorv 50.1k77 gold badges220 silver badges296 bronze badges 1- Is your javascript going in an iframe, or would you have dom access to the entire page? – jacobangel Commented Apr 28, 2009 at 20:48
3 Answers
Reset to default 7Updated code:
var space = document.createElement('div');
space.style.height = "150px";
space.style.clear = "both";
document.getElementsByTagName("body")[0].appendChild(space);
Can you generate DOM elements via javascript and simply add that div to the bottom?
I'd vote for cobbal If I had any rep.. heh.
$('body').append($('<div style="height: 150px; clear: both;"></div>'));
maybe