Dynamic DIV is not working in Firefox? Also onclick event on DIV?

Junior Poster

105 posts since Apr 2010

Reputation Points: 10

Solved Threads: 1

The problem is with the line

dv.attachEvent("onmouseclick",function(){element_event_onmouseclick();});

because both IE and FF attach events differently via javascript.

For solution to this, first check the browser type. A simple though not very powerful way can be

//detecting the browser version
var bname = navigator.appName;
var isIE = false;
if (bname == "Microsoft Internet Explorer"){
	isIE = true;
}
else{
	isIE = false;
}

Now in the js function attach the events as,

// attach event onmouseclick to the created div tag
if(isIE){
	dv.onclick = new Function("element_event_onmouseclick()");
}
else{
	dv.setAttribute("onclick", "element_event_onmouseclick()");
}

To delete the div section you can either remove it as,

dv = document.getElementById('lyr1');
document.forms[0].removeChild(dv);

or apply CSS to make it invisible. The css attributes are

display:none;
visibility:hidden;

Hope this solves your issue

parry_kulk

Junior Poster

Team Colleague

167 posts since Jan 2007

Reputation Points: 26

Solved Threads: 41

2 Years Ago

Hi parry_kulk,

I really do not know how to thank you!! Great effort!

I will try it and will update you accordingly :)

Moderns

Junior Poster

105 posts since Apr 2010

Reputation Points: 10

Solved Threads: 1

2 Years Ago

Hi again parry_kulk,

YES! It's working more than perfect on both IE and Firefox, really THANKS!!

I have small question related to this topic and I hope I am not annoying you :s

I need to create more than one dynamic DIV when clicking on "Show DIV" button, each DIV must be sorted below the other and when clicking on any DIV, I want that particular DIV to disappear.

Thanks a lot!!

Moderns

Junior Poster

105 posts since Apr 2010

Reputation Points: 10

Solved Threads: 1

2 Years Ago

An approach would be to create the divs on load of the page and make them hidden with CSS. Then onclick of button just make all of them visible and on clicking on each div make that hidden again.
Creating and removing elements dynamically in JS is slow and errorprone(if the removal is not properly handled) process compared to just controlling the display with CSS

Posting a modified version of your code for reference. Improvise it as per your needs

<html>
<head>
<script type="text/javascript">

//detecting the browser version
var bname = navigator.appName;
var isIE = false;
if (bname == "Microsoft Internet Explorer"){
	isIE = true;
}
else{
	isIE = false;
}


function create_div_dynamic(){

	for(i=0; i<3; i++) {
		dv = document.createElement('div'); // create dynamically div tag
		dv.setAttribute('id',"lyr"+i); //give id to it
		dv.className="top"; // set the style classname
		//set the inner styling of the div tag
		dv.style.position="absolute";
		dv.style.pixelLeft=20;
		dv.style.top=100*(i+1); //since the position is absolute multiplying with i+1 to able to view all the divs
		dv.style.pixelWidth=10;
		dv.style.pixelHeight=20;
		dv.style.backgroundColor="red";

		//Make the divs hidden
		dv.style.visibility="hidden";
		dv.style.display="none";

		//set the html content inside the div tag
		dv.innerHTML=' hiiiiiiiiii '+i+'';

		// attach event onmouseclick to the created div tag
		if(isIE){
			dv.onclick = new Function("element_event_onmouseclick('lyr"+i+"')");
		}
		else{
			dv.setAttribute("onclick", "element_event_onmouseclick('lyr"+i+"')");
		}

		//finally add the div id to ur form
		document.forms[0].appendChild(dv);
	}
}

function element_event_onmouseclick(lyr) //its called for onmouseclick
{
	dv = document.getElementById(lyr);
	dv.style.visibility="hidden";
	dv.style.display="none";

}

function show_div_dynamic() //to show all the div
{
	for(i=0; i<3; i++) {
		dv = document.getElementById('lyr'+i);
		dv.style.visibility="visible";
		dv.style.display="block";
	}
}


//Create the div elements on load
window.onload=create_div_dynamic;


</script>
</head>

<body>
<form name = form1>
<input type="button" value="Show DIV" onclick = show_div_dynamic()>
</form>

</body>
</html>

parry_kulk

Junior Poster

Team Colleague

167 posts since Jan 2007

Reputation Points: 26

Solved Threads: 41

2 Years Ago

Thank you very much parry_kulk! I really appreciate your effort!! It's so smart code working PERFECT and it will help me a lot in my project as it's interactive and such approach is useful for me.

Thanks!

Moderns

Junior Poster

105 posts since Apr 2010

Reputation Points: 10

Solved Threads: 1

10 Months Ago

wow this one really helps me to all my function in ff :)

momonq1990

Light Poster

30 posts since Jul 2011

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You