Member Avatar for Moderns

Hi Mates,

Actually the below code only creates dynamic DIV in IE, but for Firefox it does not create any DIV.

Also it does not create the event onclick to be triggered when clicking on any area inside the DIV.

I want to create dynamic DIV in firefox and IE + I want onclick event when clicking on the DIV as I want to that click to delete the content of the DIV or you can say collapse it.

Please can you advise?

Many thanks!

<html>
<head>
<script type="text/javascript">
function create_div_dynamic(){

dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id',"lyr1"); //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.pixelTop=100;
dv.style.pixelWidth=10;
dv.style.pixelHeight=20;
dv.style.backgroundColor="red";
//set the html content inside the div tag
dv.innerHTML='<br> hiiiiiiiiii <br>';

// attach event onmouseclick to the created div tag
dv.attachEvent("onmouseclick",function(){element_event_onmouseclick();});
//finally add the div id to ur form
document.forms[0].appendChild(dv);

}

function element_event_onmouseclick() //its called for onmouseclick
{
alert("Inside function onmouseclick");

}
</script>
</head>

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

</body>
</html>

  • 3 Contributors
  • 6 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by momonq1990
Member Avatar for parry_kulk

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

commented: bravo mate. well explained. +1
Member Avatar for Moderns

Hi parry_kulk,

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

I will try it and will update you accordingly :)

Member Avatar for Moderns

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!!

Edited by Moderns because: n/a
Member Avatar for parry_kulk

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='<br> hiiiiiiiiii '+i+'<br>';

		// 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>
Edited by parry_kulk because: n/a
Member Avatar for Moderns

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!

Member Avatar for momonq1990

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.