By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

need help with JS mouseover/popup: appears to the left instead of the right

P: 3
I'm working on redesigning our site and I'm having a problem with a JS mouseover/popup. Hopefully someone here can help me. Right now, when you mouse over an ad, you get a larger version of the ad in a popup window that appears to the left. What I need to do is make it popup to the right instead.

You can see the current popup in action here: http://www.stltoday.com/autos

Go to the Featured Autos section.

This is the JS that it's using:
Expand|Select|Wrap|Line Numbers
  1. function showAdLeft(objname) {
  2.  
  3.   if(document.getElementById) {
  4.     var adobj=document.getElementById('ad'+objname); // the floating ad
  5.     var obj=document.getElementById(objname); // the graphic link
  6.     var objleft=obj.offsetLeft;
  7.     var objtop=obj.offsetTop;
  8.     var objwidth=obj.offsetWidth;
  9.     var objheight=obj.offsetHeight;
  10.     var objxcenter=(objwidth/2)+objleft;
  11.     var objycenter=(objheight/2) +objtop;
  12.     var objybottom=obj.offsetHeight;
  13.     var adobjwidth=adobj.offsetWidth;
  14.     var adobjheight=adobj.offsetHeight;
  15.     var adobjxcenter=adobjwidth/2;
  16.     var adobjycenter=adobjheight/2;
  17.     adobj.style.left=objleft-adobjwidth;
  18.     adobj.style.top=objycenter-adobjycenter;
  19.     adobj.style.visibility="visible"
  20.   }
  21. }
  22.  
  23. function showAdRight(objname) {
  24.  
  25.   if(document.getElementById) {
  26.     var adobj=document.getElementById('ad'+objname); // the floating ad
  27.     var obj=document.getElementById(objname); // the graphic link
  28.     var objleft=obj.offsetLeft-150;     //Make adjustment for being in right column
  29.     var objtop=obj.offsetTop;
  30.     var objwidth=obj.offsetWidth;
  31.     var objheight=obj.offsetHeight;
  32.     var objxcenter=(objwidth/2)+objleft;
  33.     var objycenter=(objheight/2) +objtop;
  34.     var objybottom=obj.offsetHeight;
  35.     var adobjwidth=adobj.offsetWidth;
  36.     var adobjheight=adobj.offsetHeight;
  37.     var adobjxcenter=adobjwidth/2;
  38.     var adobjycenter=adobjheight/2;
  39.     adobj.style.left=objleft-adobjwidth;
  40.     adobj.style.top=objycenter-adobjycenter;
  41.     adobj.style.visibility="visible"
  42.   }
  43. }
  44.  
  45. function hideAd(objname) {
  46.   if(document.getElementById) {
  47.     adobj=document.getElementById('ad' +objname);
  48.     adobj.style.visibility="hidden"
  49.   }
  50. }
  51.  
  52. // -->
  53. </script>
  54.  
I'm assuming this should be an easy fix, but I have no idea where to start. Again, if anyone can help, I would greatly appreciate it. Thanks!

Steve
May 3 '08 #1
Share this Question
Share on Google+
2 Replies


hsriat
Expert 100+
P: 1,654
Just add around 300px to the style.left property each time you display it.

PS: You website is not cross browser. The mouseover thing doesn't position properly in Firefox and Safari.
May 4 '08 #2

acoder
Expert Mod 15k+
P: 16,027
When setting left and top properties, don't forget the units, e.g. "px". This will make it work in non-IE browsers too.
May 4 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.