Question

I’m trying to figure out how to use JavaScript and jQuery to dynamically create two <div> elements and overlay one at the top of the browser window and another at the bottom, with the width of both equal to the width of the browser window.

I’m not really sure how to approach this so I thought I’d just ask the two main questions I have:

1. Is there a way to get the dimensions of the browser window and use that to position the overlays?

2. When creating a statically positioned element, how do you insert them into the DOM such that it does not alter any other part of the page?

Thanks for any tips.

Answer 1

1. jQuery width / jQuery height

   var $win = $(window),
   $width = $win.width(),
   $height = $win.height();

2. jQuery append()

   $(body).append(div); <- div is created as a string in a variable

The second assumed they are position:absolute. Wherever you want to append the item, just choose the parent you want and apply as needed.