SV: SV: Dynamically creating layers in FireFox

Thanks Shachar!
Many useful optimizations here! I'm still on the "test-bench" with the layer
creation (in the final solution it will never be called from a button, but
be implemented with an ajax-call), but the optimizations here will indeed
come in handy.

mvh / regards, 
Kenneth Chr. Nilsen

> -----Opprinnelig melding-----
> Fra: [email protected] [mailto:[email protected]] 
> På vegne av Shachar Haad
> Sendt: 23. mars 2006 20:22
> Til: [email protected]
> Emne: Re: SV: [wdf-dom] Dynamically creating layers in FireFox
> 
> 
> I don't see the problem, it works fine under FF and IE.
> I changed the code a bit, so it is more efficient now:
> 
> The function:
> ---
> function createLayer(parentID, layID, x, y, w, h, zIndex)
> {
>     var pElement = document.getElementById(parentID);
>     var newDiv = document.createElement("DIV");
> 
>     newDiv.setAttribute('id',layID);
>     newDiv.setAttribute('name',layID);
>     newDiv.setAttribute('style', 'left: '.concat(x,'; top: ', y, '; 
> width: ', w, ';height: ', h, ';position: absolute; 
> visibility: visible; 
> z-index: ', zIndex, ';background: #aaa;'));
>     pElement.appendChild(newDiv);
> }
> ---
> 
> The calling:
> ---
> <span onclick="createLayer('oDiv', 'layTesting', 70, 70, 400, 
> 300, 100);" id="btnCreateLayer">Create layer</span>
> ---
> 
> About the script - referring to the elements style multiple 
> times is not 
> wise, so I changed it to 'setAttribute' and concatenated the 
> variables 
> to one long string.
> About the calling - using the anchor element for anything 
> that is not a 
> link or an anchor is wrong and can cause problems with the page (also 
> fills the browser history with crap). the right way to do 
> this is to use 
> a 'span' element with the same onclick attribute and styling it 
> accordingly by using CSS.
> 
> the resulting markup from the script is this:
> ---
> 
> <div id="oDiv">
> 	<div style="background: rgb(170, 170, 170) none repeat 
> scroll 0%;
> 	left: 70px; top: 70px; width: 400px; height: 300px; 
> position: absolute;
> 	visibility: visible; z-index: 100; 
> -moz-background-clip: -moz-initial;
> 	-moz-background-origin: -moz-initial; 
> -moz-background-inline-policy: -moz-initial;"
> 	name="layTesting" id="layTesting"></div>
> </div>
> 
> ---
> 
> I added a few line-breaks. (I used 'view rendered source' that comes 
> with FF)



Unsubscribe
[email protected]

List info
http://www.quirksmode.org/dom/list.html 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/wdf-dom/

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/