In the first function I created a div within which I have a cancel button to remove the very same div. function areYouSure(){ var newDiv = document.createElement("div"); newDiv.setAttribute('style', 'float: left; text-align: center; z-index: 3; background-color: #999999;'); newDiv.setAttribute('id', 'add_to_db'); newDiv.innerHTML = "Are you sure you want to add it to the database?<br /> <input type='button' value='Yes' style='float:left; text-align: center;' onClick='addToDb();' /><input type='button' value='Cancel' style='float:left; text-align: center;' onClick='cancelAddToDb();' />"; // And then inject it: document.body.appendChild(newDiv); } function cancelAddToDb() { //var d = document.getElementById('myDiv'); var olddiv = document.getElementById('add_to_db'); document.removeChild(olddiv); } Code (markup): When I cick on cancel the error shows:
It's not working. function areYouSure(){ var newDiv = document.createElement("div"); newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;'); newDiv.setAttribute('id', 'add_to_db'); newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px; width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /> <span style='position: absolute; left: 200px; top: 50px; text-align: center;'> <input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /> <input type='button' value='Cancel' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='[U]cancelAddToDb();[/U]' /> </span></div>"; // And then inject it: document.body.appendChild(newDiv); } function cancelAddToDb(){ //var d = document.getElementById('myDiv'); //var olddiv = document.getElementById('add_to_db'); //document.removeChild(olddiv); document.removeChild('add_to_db'); } Code (markup): I'm getting: To make one thing clear the cancel button is created right in the function above.
erm, this is because document is not the direct parent of your element, it is document.body.element. safest way to remove elements is like so: <script> function areYouSure(){ var newDiv = document.createElement("div"); newDiv.setAttribute('style', 'float: left; text-align: center; z-index: 3; background-color: #999999;'); newDiv.setAttribute('id', 'add_to_db'); newDiv.innerHTML = "Are you sure you want to add it to the database?<br /> <input type='button' value='Yes' style='float:left; text-align: center;' onClick='addToDb();' /><input type='button' value='Cancel' style='float:left; text-align: center;' onClick='cancelAddToDb();' />"; // And then inject it: document.body.appendChild(newDiv); } function cancelAddToDb() { var olddiv = document.getElementById('add_to_db'); if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild) olddiv.parentNode.removeChild(olddiv); } </script> <div id="areyou" onclick="areYouSure()">are you?</div> PHP: feel free to rep me
One problem came up as I was testing it on IE. IE doesn't recognize the setAtribute(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" language="javascript1.6"> function areYouSure(){ var newDiv = document.createElement("div"); newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;'); newDiv.setAttribute('id', 'add_to_db'); newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>"; // And then inject it: document.body.appendChild(newDiv); } function cancelAddToDb(){ var olddiv = document.getElementById('add_to_db'); if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){ olddiv.parentNode.removeChild(olddiv); } } </script> </head> <body> <input type="button" onclick="areYouSure();" value="click me!" /> </body> </html> Code (markup): Test this on both firefox and IE. The positioning is messed up in IE.
And what about the style attribute? newDiv.setAttribute('id', 'add_to_db'); newDiv.id = 'add_to_db'; newDiv.style='position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;'; Code (markup): The last line, 12 shows this error in firefox. IE shows error too (member not found).
ie is fine with setAttribute as a whole but you cannot use it to access the style hash... try this instead: element.style.setAttribute("property", "value");
Like this? element.style.setAttribute("style", "position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;"); Code (markup): Or like this: newDiv.style.setAttribute("style", "position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;"); Code (markup): But it still doesn't recognize the style.
no, alas, unless you use a framework (as mentioned before), setting attributes in js is a process of doing them 1 by 1 (to the best of my knowledge). In theory, a style is a JSON object, so you ought to be able to do: newDiv.style.setAttribute("position", "absolute"); newDiv.style.setAttribute("height", "200px"); etc etc. you can even do newDiv.style.height = "200px"; - although i am not sure if that's such a great practice... try using a framework, it will make your life so much easier - above will go as: newDiv.setStyles({ position: "absolute", left: 200, top: 250, "text-align": "center", width: 500, height: 120, "z-index": 3, "background-color": "#999999" }); // mootools, or same as $(newDiv).css({ ... in jquery PHP: wouldn't it be easier to simply add all of that as #add_to_db { } in your css file? then all you do is assign the id and voila!
Testing it on Firefox first I get this error: Testing it on IE it says that: position: "absolute", doesn't support this property or method. Also even when I make changes to the js file IE is pointing out to the old error. When I check line 758 where the old error was it's preceded by // meaning it's blocked. How do I refresh in the IE? It seems like F5 isn't doing it!
Hi, sorry I didnt mention for css definition you would use : newDiv.style.cssText = 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;' id stands : newDiv.id = 'add_to_db';
erm, doesn't cssText replace ALL styles defined instead of adding just the properties you are changing? if an element has, say 30 properties and you need to change 5, by passing them via cssText your other 25 will be gone... but yes, you can do it if you apply your whole styling each time you are changing things... i still think that style should be in css, its what its there for...