New div overlay



Keywords: new div overlay
Description: People, have you ever dreamt of a simple, nice, powerful, cross-browser mechanism to drastically reduce the size of your web pages, something that could allow you to simplify your web pages,

People, have you ever dreamt of a simple, nice, powerful, cross-browser mechanism to drastically reduce the size of your web pages, something that could allow you to simplify your web pages, preserving only the real content in your pages and externalizing all your navbars, ads and stuff? No, it's not an iframe, we have a much better offer.

As you can see above, the "requested document" is much smaller than the final document since we have removed all the "presentational" stuff to focus on the informational content. The good news here is that you can do that for all your pages in your web site. They can all share the same overlay. All in all, you will reduce a lot your monthly bandwidth usage just because your docs will be smaller, because the overlay will be loaded only once by the browser, and you'll improve readability and maintainability of your markup by a factor of 100 :-)

Ok, there is a cost. But it's cheap. You have to add a script element into the head of all your pages. The JavaScript file loaded by that element will be loaded once by the browser and cached for all the pages sharing the little trick explained in this article. So overall, it's a good win. It works absolutely fine in Gecko-based browsers and Internet Explorer >=5 on Windows. I have not tested other browsers or other platforms. The speed is ok, and I bet you'll never notice a web page uses an overlay.

So let's be a bit more technical now. People, Disruptive Innovations is glad to introduce HTML Overlays, based on an idea by Laurent Jouanneau, and implemented by the author of this article.

That's the simplest part. Copy the file HTMLoverlay.js to your web site just where you want. Then add one element inside your document's head element. In HTML 4.x, add:

HTML overlays are conformant to this DTD (also available in text/plain ). Basically, an HTML overlay is an XML document where all XHTML 1.0 elements are allowed as children of the root element and where all elements but the root element have three extra attributes: insertbefore, insertafter, and position. The first two attributes contain the ID of an element in the document the overlay will be applied to. The position attribute contains an integer value.

Each element inside your HTMLoverlay element, root of you HTML overlay, specifies an elemental overlay. If an elemental overlay has an ID, and if there is an element in the target document with a matching ID, the contents of that element and the contents of the elemental overlay will be merged. If there is no element with matching, nothing is done.

Every child element of an elemental overlay in an HTMLoverlay document can carry three extra attributes that are copied into the overlayed document:

  1. insertbefore: its value should be the ID of an element child of the target element; if there's such a matching element, the clone of the element overlay's child will be, at merge time, inserted before that one.
  2. insertafter: same as insertbefore, but the clone is inserted after instead of before. This attribute is used only if the insertafter attribute is absent or is not used because there is no matching ID in the target document.
  3. position: specifies a position index in the list of children of the target element. Used only if insertbefore and insertafter attributes are absent or unused.






Photogallery New div overlay:


In depth: Myspace DIV Overlays


MySpace DIV Layouts, Plain MySpace Layouts, Easy-to-Use Overlays


html - Changing media screen makes div overlay - Stack Overflow


Initial D7UX admin overlay [#517688] | Drupal.org


html - Changing media screen makes div overlay - Stack Overflow


Vintage MySpace DIV Layouts - Winter/Christmas DIV Overlays


How to Make a MySpace DIV overlay layout  Internet


javascript - Force a div to show up and overlay whatever is in ...


javascript - CSS overlay div with another div - Stack Overflow


Screen reader users and some keyboard only users need a clear ...


Initial D7UX admin overlay [#517688] | Drupal.org


How to Fancify your MySpace profile with div overlays  Internet


Web Design] Myspace div layout I made- - Sythe


HTML5 native scrolling on iPhone iOS5 | Two Legs


Twilight Div Overlay #2 Photo by sweetladycyanide | Photobucket


MySpace Music DIV Layouts - Premade DIV Overlays - Jazz Amp Layout


Overlay shouldn't be based on jQuery UI Dialog [#668640] | Drupal.org


javascript - How can I "dim" the rest of the web page when ...


Use CSS background:rbga to Darken Background Photos For Improved ...