MDanz Posted March 2, 2010 Share Posted March 2, 2010 i won't put all the code. this is the css for layer1. Now i know how to make the layer pop-up(visible) with javascript. How do i set the position it pops up to where the mouse was clicked on the page in javascript? example.. #layer1 { position:fixed; visibility: hidden; width:600px; height:auto; background-image:url(popupbg.jpg); border: 1px solid #FBB917; padding: 10px; font-weight:200; color: #FFFFFF; } Quote Link to comment Share on other sites More sharing options...
Omirion Posted March 2, 2010 Share Posted March 2, 2010 event.clientY event.clientX These get your x bad Y coord. Then set the document.getElementById(id).style.left = xpos document.getElementById(id).style.top = ypos Sorry don't have time to write out a proper function for you, hope you can manage. When i get back home i'll write it out if you need it Quote Link to comment Share on other sites More sharing options...
MDanz Posted March 3, 2010 Author Share Posted March 3, 2010 here's what i've attempted but its not working. css #layer1 { position:fixed; display: none; width:600px; height:auto; } div <div id="layer1"></div> textarea <textarea id="reply" name="reply">testing</textarea> button to click <a onclick="setVisible;">button</a> the javascript i attempted didn't work. I'm just using the above as a basis to get my javascript code working correctly. how would i do the above to onclick of button the div displays where the mouse is clicked and it displays the textarea value? Quote Link to comment Share on other sites More sharing options...
MDanz Posted March 3, 2010 Author Share Posted March 3, 2010 not working? <head><style type="text/css"> #layer1 { position:fixed; display: none; width:600px; height:auto; } </style> </head> <body> <a onclick="setVisible();">button</a> <textarea id="reply" name="reply">testing</textarea> <div id="layer1"></div> <script type='text/javascript'> function setVisible() { var div = document.getElementById('layer1'); // put the correct content in the div here div.innerHTML = reply.value; div.style.left = window.event.clientX + 'px'; div.style.top = window.event.clientY + 'px'; div.style.display = 'visible';} </script> Quote Link to comment Share on other sites More sharing options...
MDanz Posted March 3, 2010 Author Share Posted March 3, 2010 this isn't working either.. <head><style type="text/css"> #layer1 { position:fixed; display:none; width:600px; height:auto; } </style> </head> <body> <div align="right"> <a onclick="setVisible();">button</a> </div> <textarea id="reply" name="reply">testing12345678910ffafaf</textarea> <div id="layer1"></div> <script type='text/javascript'> function setVisible() { document.getElementById('layer1').innerHTML = document.getElementById('reply').value; document.getElementById('layer1').style.left = window.event.clientX + 'px'; document.getElementById('layer1').style.top = window.event.clientY + 'px'; document.getElementById('layer1').style.display = 'visible';} </script> </body> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.