Center a div for onClick Pop-up style event 1

[EidolonNight]

Hello!!

I have a script that will load an enlarged image once the small image is clicked. The new image is displayed in the center of the screen. It is dragable can be closed, but only in IE. In firefox and others the new image is loaded directly over the small image, pushing it down the page. I would like to get it working in all popular browsers if possible.

Please visit this link and click the product image to see the result.

This link is not intended to advertise my site only to help diagnose the problem.

http://bcpframeshop.com/catalog/product_info.php?products_id=2945

Here is the code:

<script language="javascript">


var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close X</span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

<div id="showimage"></div>
<script language="javascript"><!--
document.write('<?php echo '<a href="'. DIR_WS_IMAGES . $product_info['products_image'].'" onClick="return enlarge(\\\''. DIR_WS_IMAGES . $product_info['products_image'].'\\\',event,\\\'center\\\','.$size[0].','.$size[1].')" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE .'</a>'; ?>');

One more note: I am very much a novice at this so please repsond slowly and clearly

 

[EidolonNight]

I am having no luck with this error!! My biggest problem is that I don't see why this is happening. Please help if anyone out there can tell me why this would happen, then maybe I can track down the solution. The image won't center itself and hover over the page in any other browser but IE. Yep! I'm Lost!
Thank you,
James

 

[charIie]

Are you using relative positioning? Use Absolute positioning for the whole thing. I dont know if that answers your exact question, but I know working on mine, I had issues with things moving around when you change the dimentions of the window. So i made em all absolute and was able to keep it centered.

 

[EidolonNight]

I am pretty sure that I am using Absolute positioning.... The position of the div is calculated based apon the browser type. I am very new at this so I may not have applied it correctly. The entire code is posted above. Is it correct?... I think it is (for IE), but I'm not sure how to get it working in Firefox and Opera. It doesn't work right in Netscape either.

 

[theniteowl]

Your code does not show a setting for absolute positioning so it is probably defaulting to relative positioning.

Change your div to this and try it:
<div id="showimage" style="position: absolute;"></div>

You are bound to run into centering problems in different browsers since the methods of retrieving the screen dimensions vary quite a bit. Some methods work in some browsers and some in others. To make it worse a method that works in more than one browser may return the values differently. For instance innerHeight returns the height of the content area in Firefox but it does not take into account if a horizontal scrollbar is there so your effective content area is less than the number returned depending on how tall the scrollbar is. I see you set to compensate for a toolbar in Opera but check your dimensions within Firefox.

When your div is using relative positioning it will displace other objects on the page. When set to absolute it will float right over top of the page and any other elements unless of course they are also set absolute then you get into layering.




Paranoid? ME?? Who wants to know????

 

[EidolonNight]

Thank you!! That works great!