If you want to place an html element over another one using javascript for some reason here you will find the solution. Why you might want to do this? Maybe you want to place an “online now” stamp on the corner of the user avatar or an “on sale” stamp on some of the products on your online store.<\/p>\n
This will be something like an watermark but without editing the image. This has two main characteristics: it can be dynamically updated (like the online status of an user or the promotions on your store) but it is not the solution for protecting your pictures.<\/p>\n
Since there are a lot of watermark solutions out there I will focus only on this other matter.<\/p>\n
So what’s the first thing we need? The absolute position of the element you want to apply the stamp on.<\/p>\n
You can do this using this function:<\/p>\n
\r\nfunction getXYpos(elem)\r\n{\r\n if (!elem)\r\n {\r\n return {"x":0,"y":0};\r\n }\r\n var xy={"x":elem.offsetLeft,"y":elem.offsetTop}\r\n var par=getXYpos(elem.offsetParent);\r\n for (var key in par)\r\n {\r\n xy[key]+=par[key];\r\n }\r\n return xy;\r\n}\r\n<\/pre>\nThis function goes from the element you provide through all of its parents and finds out the absolute position by adding the relative positions.<\/p>\n
Now we need the final function: the one that places the stamp.<\/p>\n
Add element over another using JavaScript<\/h1>\n
This is a pretty simple function but it also has comments for almost every line.<\/p>\n
\r\n\t\tfunction setStamp()\r\n\t\t{\r\n\t\t\t\/\/ create a new element.. the one that we will place on top\r\n\t\t\tvar new_el = document.createElement('img');\r\n\t\t\t\/\/ set the source for the image element\r\n\t\t\tnew_el.setAttribute('src', 'online.png');\r\n\t\t\t\/\/ add an id to the element so we could find it later\r\n\t\t\tnew_el.setAttribute('id', 'photoStamp');\r\n\t\t\t\/\/ set absolute position to the new element\r\n\t\t\tnew_el.style.position = 'absolute';\r\n\t\t\t\/\/ this is the picture we need to set the stamp on\r\n\t\t\tvar main_pic = document.getElementById('userAvatar');\r\n\t\t\t\/\/ get the coordinates for this "parent"\r\n\t\t\tvar big_coordinates=getXYpos(main_pic);\r\n\t\t\tvar bp_x = big_coordinates['x'];\r\n\t\t\tvar bp_y = big_coordinates['y'];\r\n\t\t\t\/\/ set these values for the new created element\r\n\t\t\tnew_el.style.left = bp_x + 'px';\r\n\t\t\tnew_el.style.top = bp_y + 'px';\r\n\t\t\t\/\/ get the container for the picture\r\n\t\t\tvar container = document.getElementById('userAvatarContainer');\r\n\t\t\t\/\/ add the new element as child for the container\r\n\t\t\tcontainer.appendChild(new_el);\r\n\t\t}\r\n<\/pre>\nThat’s all. But there are some improvements we can add.<\/p>\n
What happens if the window is resized? The new element (that has an absolute position) will no longer be on top of its parent. What do we need to do? Call this function again so the absolute coordinates will be the new ones. How? Like this:<\/p>\n
\r\nwindow.onresize=setStamp;\r\n<\/pre>\nBut the “old” stamp will still be there. So we need to update our function so that every time we call it it would check if the stamp exists and remove it. There is no direct way to remove an element using javascript but there is a way to remove the child of an element. So we will add something like this:<\/p>\n
\r\nelm.parentNode.removeChild(elm);\r\n<\/pre>\nSo now we are ok, this function can be called by another one (ajax based) that checks the user\/product status at a timed interval or any other way you want.<\/p>\n
What are the useful things this small script takes advantage of:<\/p>\n
All these using js.<\/p>\n
As I got used after getting a nice feedback from one of the readers I will give you a download link for the full working example: this is it \ud83d\ude42<\/a><\/p>\n If you have any ideas or questions please feel free to post them as a comment to this post using the form below.<\/p>\n