need help with JS mouseover/popup

[stevemtno]

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:

Code: Select all

function showAdLeft(objname) {
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft;
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.left=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
function showAdRight(objname) {
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft-150;  //Make adjustment for being in right column
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.left=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
function hideAd(objname) {
  if(document.getElementById) {
    adobj=document.getElementById('ad' +objname);
    adobj.style.visibility="hidden"
  }
}
// -->
</script>

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

[CloudedVision]

instead of "myvar.style.left" do "myvar.style.right"

[stevemtno]

Originally Posted by CloudedVision

instead of "myvar.style.left" do "myvar.style.right"

Hi CloudedVision,

Tried it (in both instances in the script), but it didn't make any difference. The popup still goes to the left. Do I need to change something else too?

SteveMTNO

[aso186]

Make sure the element is set to position: absolute, otherwise the left and right values are meaningless.

[stevemtno]

Originally Posted by aso186

Make sure the element is set to position: absolute, otherwise the left and right values are meaningless.

I'm not sure that is the problem. The page works as it is right now. We;re moving that module from the right side of the page to the left side on the redesign, which is why I need to make the popup go right instead of left. It currently works fine as is. I just need to make it go in the opposite direction. Hope that explains what I'm trying to do a little better.. thanks!

SteveMTNO

[stevemtno]

OK, now that we've "semi-launched" the new site, I can post a URL so you can see the issue I'm having in the full context of the page.

Go to http://www.stltoday.com/autos and check out the Featured Rides module. You'll see 2 rows of 2 ads.

When you mouse over an ad, the popups currently go to the left. What I would to do is have them go to the right instead. More specifically, I'd like them to appear 25px to the right of the ad in the right column. So if you mouse over the ad in either column, it needs to appear 25px to the right of the ad in the right column.

Any help you can provide will be great appreciated... thanks!!

Steve

[CloudedVision]

change this:

Code: Select all

adobj.style.left=objleft-adobjwidth;

to this

Code: Select all

adobj.style.right=objleft-adobjwidth;

[stevemtno]

Hey CloudedVision,

Thanks for the quick reply. The popups are still going to the left, but they're staying in the same position now at least. I'd still like to get them closer to the Featured Rides module (ideally, no more than 25px from the edge), and they have to go right instead of left (that's the main thing)

Thanks!!

Steve

[CloudedVision]

Try that, I added position: absolute. (Like aso has been suggesting) That should fix it.

Code: Select all

function showAdLeft(objname) {
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft;
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.left=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
function showAdRight(objname) {
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft-150;  //Make adjustment for being in right column
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.position='absolute';
    adobj.style.right=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
function hideAd(objname) {
  if(document.getElementById) {
    adobj=document.getElementById('ad' +objname);
    adobj.style.visibility="hidden"
  }
}
// -->
</script>

[stevemtno]

Hi CloudedVision,

I changed the code the way you mentioned above, plus added an additonal position: absolute line to the showAdLeft function that you didn't have in your code. Actually, it didn't make any difference with it there as opposed to it not being there (right now, it's there).

Here's a link to the testing page:

http://www.stltoday.com/stltoday/tes...s?OpenDocument

If you get a chance, can you take another look at it? Also, the popups are still going to the left - even with the position: absolute line(s) in there.

Thanks!!!

SteveMTNO