rogerio Posted July 28, 2012 Share Posted July 28, 2012 This is a css popup and I am trying to move the position of it with script and it is being ignored; it does work with a div/table. The "absolute" was in the css code previously as shown and worked, but after moving it to the script, the total page is destroyed. <style type="text/css">.popup{/* position:absolute; left:0px; top:13px; */ width:300px; height:400px; border-style:solid; border-width:4px; border-color:blue; background-color:#000000; padding: 5px; font-family: Tahoma; font-size: 10pt; z-index:2; visibility:hidden; overflow:scroll; border-radius:4px;}</style> <script type="text/javascript"> function ShowPop(event, obj, x, y) /* these variables have been tested and work */{ x=event.clientX; y=event.clientY; obj.style.position = "absolute"; obj.style.left = x; obj.style.top = y+10; obj.style.visibility = "visible";}</script> Link to comment Share on other sites More sharing options...
Don E Posted July 28, 2012 Share Posted July 28, 2012 Try adding: + "px"; to x and y: obj.style.left = x + "px"; obj.style.top = y+10 + "px"; Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 Try adding: + "px"; to x and y: obj.style.left = x + "px";obj.style.top = y+10 + "px";Popup does not activate... Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2012 Share Posted July 28, 2012 The "y+10" may need to go between parentheses, or be caster, so that the "px" doesn't evaluate to zero.obj.style.top = String(y + 10) + "px"; Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 The "y+10" may need to go between parentheses, or be caster, so that the "px" doesn't evaluate to zero.obj.style.top = String(y + 10) + "px";Same issue, popup does not activate. I have tried adding "px" with the table that works and get the same result; for some reason "px" is taboo. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2012 Share Posted July 28, 2012 I think you will find crappy IE uses .clientX and .clientY, while better browsers use .pageX and .pageY. Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 I think you will find crappy IE uses .clientX and .clientY, while better browsers use .pageX and .pageY.ok, got IE, but wants to add the current x/y to the new x/y moving the location top+y and left+x relative rather than absolute; tried changing to relative and got garbage on the page. FF still does not follow with any .pageX positioning. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2012 Share Posted July 28, 2012 Looking at the code again, why pass the x, y arguments then overwrite them with positon of event, and how/where is this function called? it can't be from within the popup as it is hidden, and you have to send the hierarchy dom reference to pop-up object as an argument as well? if it is outside the pop-up element. Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 I removed the passing of x/y several tries ago; making a lot of tests.The call: <a onMouseDown="ShowPop(event, document.getElementById('popup1'));" style="cursor:pointer;"> <u>Load popup</u></a> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2012 Share Posted July 28, 2012 well i tested it and it works, here my solution, different, but! it is exactly the same principle which you used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript"> function ShowPop(event, popupID) /* these variables have been tested and work */{var obj=document.getElementById(popupID) x=event.clientX; y=event.clientY; obj.style.position = "absolute"; obj.style.left = x+"px"; obj.style.top = y+10+"px"; obj.style.visibility = "visible";}</script><style type="text/css">.popup{/* position:absolute; left:0px; top:13px; */ width:300px; height:400px; border-style:solid; border-width:4px; border-color:blue; background-color:#000000; padding: 5px; font-family: Tahoma; font-size: 10pt; z-index:2; visibility:hidden; overflow:scroll; border-radius:4px; color:#fff;}</style></head><body><div class="popup" id="popup1"><p>This is pop up.</p></div><a onMouseDown="ShowPop(event,'popup1');" style="cursor:pointer;"> <u>Load popup</u></a></body></html> The only problem is as the pop-up is using visibility:hidden; the space it occupy is still taken up by this element, when it is converted to position: absolute; it occupies no space, so the link moves up to occupy this available space, but the popup appears at at the location where the link was at the time the link was clicked. Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 I got the same response in IE and FF:"Load Popup" was midway and far left on startup.Clicked "Load Popup" and it jumped to the top left.The popup loaded in the place where I clicked. This will continue to reposition the top left of an image where you click. Notice the original position of the img is made with "relative" and the repositioning is with "absolute" which makes thing a little difficult. <html><head><title>Navigation List Example</title><style type="text/css">html, body{width: 100%;height: 100%;margin: 0;padding: 0}</style><script type="text/javascript">function moveIt(event, obj, oldX, oldY){if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ x=event.clientX; y=event.clientY;}else{ x=event.pageX; y=event.pageY;}obj.style.position = "absolute";obj.style.left = x;obj.style.top = y;document.form1.position.value="X coords: " + x + ", Y coords: " + y;}</script></head><body onmousedown="moveIt(event, document.getElementById('move'))" id="show"><div id="move" style="position:relative; top:0; left:0px"><img src='images/x11_title.gif' class='dragme' /></div></body></html> Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 I found the biggest problem to be with the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I changed it to: <!DOCTYPE HTML PUBLIC> So there is some issue with the validation; this is your code with the header modified and it works. <!DOCTYPE HTML PUBLIC><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">function ShowPop(event, popupID) /* these variables have been tested and work */{var obj=document.getElementById(popupID) x=event.clientX; y=event.clientY; obj.style.position = "absolute"; obj.style.left = x+"px"; obj.style.top = y+10+"px"; obj.style.visibility = "visible";}</script><style type="text/css">.popup{ position:absolute;/* left:0px; top:13px; */ width:300px; height:400px; border-style:solid; border-width:4px; border-color:blue; background-color:#000000; padding: 5px; font-family: Tahoma; font-size: 10pt; z-index:2; visibility:hidden; overflow:scroll; border-radius:4px; color:#fff;}</style></head><body><div class="popup" id="popup1"><p>This is pop up.</p></div><a onMouseDown="ShowPop(event,'popup1');" style="cursor:pointer;"> <u>Load popup</u></a></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2012 Share Posted July 28, 2012 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> is valid doctype you should use, yours is not! other valid doctype are shown here http://w3schools.com/html/html_doctype.asp The reason when you first click the link is as i said even though the pop-up element is hidden visibility:hidden hides content but not the area it would occupy, the better option is either (1) use position: absolute;( causes it to removed from flow of page and not occupy any space) from the start, and set its left property to left: -9999em; which will hide it out of view beyond left edge of browser screen, OR (2) again use position: absolute; from start, and instead of visibility:hidden; use display: none to hide (hides content, and remove any occupation of any space, but this last one is achieved also by using position: absolute;), and .style.display="block" or .style.display="" to show it again. Link to comment Share on other sites More sharing options...
rogerio Posted July 28, 2012 Author Share Posted July 28, 2012 May be a misunderstanding, I was trying to say "my code is bad". What the problem is I don't know, but if this thing starts working, I will research the problem. The header works with IE but not FF; I will research this later. I chaged the code as requested and it is working. I have one more goal and that it is to make the popup draggable by placing an invisble image in it - all ideas on this one are welcome because this is going to need "overflow" for scrolling and the image to remain in place. I have a table with all this, but the table has some graphics limitations. It looks like the only way is to use an overlay. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now