Re: SV: Dynamically creating layers in FireFox

Shachar Haad <[email protected]> Thu, 23 Mar 2006 21:21:45 +0200
Newsgroups gmane.comp.web.dom.wdf
Message-ID <[email protected]>
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)

Kenneth Chr. Nilsen wrote:
> The HTML consist only of plain HTML and a couple of DIVs.
> I use a test button to check:
>
> ---
> <a href="#" onclick="createLayer('layDialog', 'layTesting', 70, 70, 400,
> 300, 100);return false" id="btnCreateLayer">Create layer</a>
> ---
>
> The function is in it's own .js file. Works as I mentioned with IE and
> Opera, not fault during debugging.
> In FF nothing happends. Here is the function that I use:
>
> ---
> function createLayer(parentID, layID, x, y, w, h, zIndex)
> {
>     if (document.document.getElementById)	//disabling this check makes
> no difference in FF.
>     {
>         pElement = document.getElementById(parentID);
>         var newDiv = document.createElement("DIV");
>
>         newDiv.setAttribute('id',layID);
>         newDiv.setAttribute('name',layID);
>         newDiv.style.left = x;
>         newDiv.style.top = y;
>         newDiv.style.width = w;
>         newDiv.style.height = h;
>         newDiv.style.position = 'absolute';
>         newDiv.style.visibility = 'visible';
>         newDiv.style.zIndex = zIndex;
>         newDiv.style.backgroundColor = "#aaaaaa";
>         pElement.appendChild(newDiv);
>     }
>     else ...
>     {
> 	  ...
>     }
> }
> ---
>
> mvh / regards, 
> Kenneth Chr. Nilsen
>
>
>   
>> -----Opprinnelig melding-----
>> Fra: [email protected] [mailto:[email protected]] 
>> PÃ¥ vegne av Moran Ben-David
>> Sendt: 23. mars 2006 19:36
>> Til: [email protected]
>> Emne: RE: [wdf-dom] Dynamically creating layers in FireFox
>>
>>
>> What's the error you're getting?  And can you attach your html?
>>
>>     
>>> -----Original Message-----
>>> From: [email protected] [mailto:[email protected]] On 
>>> Behalf Of Kenneth Chr. Nilsen
>>> Sent: Thursday, March 23, 2006 1:32 PM
>>> To: [email protected]
>>> Subject: SV: [wdf-dom] Dynamically creating layers in FireFox
>>>
>>> Me too, but it would not work in FF which is the problem I'm 
>>> struggling with.
>>>
>>> mvh / regards,
>>> Kenneth Chr. Nilsen
>>>
>>>
>>>       
>>>> -----Opprinnelig melding-----
>>>> Fra: [email protected] [mailto:[email protected]] PÃ¥ 
>>>> vegne av Moran Ben-David
>>>> Sendt: 23. mars 2006 19:29
>>>> Til: [email protected]
>>>> Emne: RE: [wdf-dom] Dynamically creating layers in FireFox
>>>>
>>>>
>>>> I vote for choice #1
>>>>
>>>>         
>>>>> -----Original Message-----
>>>>> From: [email protected] 
>>>>>           
>> [mailto:[email protected]] On 
>>     
>>>>> Behalf Of Kenneth Chr. Nilsen
>>>>> Sent: Thursday, March 23, 2006 1:19 PM
>>>>> To: [email protected]
>>>>> Subject: [wdf-dom] Dynamically creating layers in FireFox
>>>>>
>>>>> Ok,
>>>>>
>>>>> now I have tried three approaches to dynamically create a
>>>>>           
>>>> layer (DIV)
>>>>         
>>>>> in FireFox. It works fine with IE and Opera, but I'm
>>>>>           
>>>> struggling to get
>>>>         
>>>>> it to work with FF.
>>>>>
>>>>> I have so far used the metods such as:
>>>>>
>>>>> 1)
>>>>>         pElement = document.getElementById(parentID);
>>>>>         var newLay = document.createElement("DIV");
>>>>> 	  ...
>>>>>         pElement.appendChild(newLay);
>>>>>
>>>>> 2)
>>>>> 	var newLay = '<div id='+layID+' 
>>>>>           
>> style="position: absolute;'
>>     
>>>>> 	+'left:'+x+";"
>>>>> 	...
>>>>> 	+'></div>'
>>>>> 	document.body.insertAdjacentHTML("BeforeEnd",newLay);
>>>>>
>>>>> 3)
>>>>> 	var newLay = document.layers[parentID]=new Layer(w);
>>>>>
>>>>> Any suggestions on how to dynamically create a layer in 
>>>>>           
>> FF will be 
>>     
>>>>> highly appriciated.
>>>>>
>>>>>
>>>>> mvh / regards,
>>>>> Kenneth Chr. Nilsen
>>>>>
>>>>>
>>>>>
>>>>> Unsubscribe
>>>>> [email protected]
>>>>>
>>>>> List info
>>>>> http://www.quirksmode.org/dom/list.html
>>>>> Yahoo! Groups Links
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>           
>>>>
>>>>
>>>> Unsubscribe
>>>> [email protected]
>>>>
>>>> List info
>>>> http://www.quirksmode.org/dom/list.html
>>>> Yahoo! Groups Links
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>         
>>>
>>> Unsubscribe
>>> [email protected]
>>>
>>> List info
>>> http://www.quirksmode.org/dom/list.html
>>> Yahoo! Groups Links
>>>
>>>
>>>
>>>
>>>       
>>
>>
>> Unsubscribe
>> [email protected]
>>
>> List info
>> http://www.quirksmode.org/dom/list.html 
>> Yahoo! Groups Links
>>
>>
>>
>>  
>>
>>
>>     
>
>
>
> Unsubscribe
> [email protected]
>
> List info
> http://www.quirksmode.org/dom/list.html 
> Yahoo! Groups Links
>
>
>
>  
>
>
>   



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/