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 compatible 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.
-
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.
-
Updated code:
var space = document.createElement('div'); space.style.height = "150px"; space.style.clear = "both"; document.getElementsByTagName("body")[0].appendChild(space);knorv : Thanks - I've clarified the question. Please see update #2.zombat : This should work no matter what the length of the page is. I'm out of votes, or I'd vote it up. I was about to post basically the same thing.cobbal : the original code only produced an absolute height, this is the updated version -
$('body').append($('<div style="height: 150px; clear: both;"></div>'));
maybe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.