Jump to content

Javascript being ignored


rogerio
 Share

Recommended Posts

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

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...