css - position: fixed

[DazzlingD]

I am having trouble getting an image to go where I want it to. There is too much code to give it all to you, so I'll give you what I think is relevant. The page is at

http://www.natural-beauty.com/shopping/shopexd.asp?id=145635&template=tmp_newstyle.htm,

click on Magazine Covers and move your mouse over the top magazine cover. Then, if you scroll all the way to the bottom, you'll see a larger image. I want it to be in the browser window and I thought fixed would do this. Here's what I have.

html at the bottom of the page

<div id="LargerProductImages" style="display: none;">
      <img id="LargerProductImage">
</div>

javascript - HideLarger will eventually be changed to none, I have it left in block so it stays and we can see what's happening. I have also tried inline instead of block

   function ShowLarger(ImageName) {
      document.getElementById("LargerProductImages").style.display = "block";
      document.getElementById("LargerProductImage").src = "/Images/Larger/" + ImageName + ".jpg";
   }

   function HideLarger(ImageName) {
      document.getElementById("LargerProductImages").style.display = "block";
   }

css - absolute would work perfect, if it would stay on the screen when you scroll... which is what I thought fixed was supposed to be, just like absolute except it doesn't scroll.

#LargerProductImages {
   position: fixed;
   bottom: 25 px;
   right: 350 px;
}

 

[Vragabond]

Your effect does not seem to work in FF at all. I would suggest working on that first.

Other than that, which browser does it fail in? IE6 does not support position: fixed, so it wouldn't work there.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DazzlingD]

I'll figure out another way of doing it. I didn't think about mentioning the browser I'm using, but it is IE7 which looking back at the book I'm using, it says fixed should work on IE7, but that's the first IE that it should work on. There's too many browsers that it doesn't work on for me to use that technique, so instead of trying to figure out the problem with this - I'll figure out a new way of doing it.

Thanks for the help!

 

[BillyRayPreachersSon]

it says fixed should work on IE7, but that's the first IE that it should work on. There's too many browsers that it doesn't work on for me to use that technique

I disagree. If you count all of the modern browsers, AFAIK, IE6 is the only one that doesn't support it, and the workaround is very, very easy (position absolute).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisHunt]

Perhaps, if you can describe the effect you're trying to achieve, we can advise you on how to do it. I'm assuming it's some variation on the "click on thumbnail, see bigger image" theme, but it's hard to tell from your original post.

I'd be wary of using [tt]position:fixed[/tt] for anything, though, without a solid fallback for the (still) many IE6 users out there.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[DazzlingD]

I'll give you guys an hour or two to look at this before I work on this portion of the page anymore.... I say this because if I continue working on it, then what I post here is irrelevant because the code will have changed - hopefully you guys are still around and can look at it shortly.

Dan - I guess I shouldn't say do something totally different, what I am working on is some type of position: absolute.

ChrisHunt - You're exactly write except that I am just doing mouseover instead of click - but yes, larger image when moving over a thumbnail.

The working example is at

http://www.natural-beauty.com/shopping/shopexd.asp?id=145635&template=tmp_newstyle.htm

click on Magazine Covers and mouse over a cover.

The div in the html has not changed at all - it is still at the bottom of my page.

I no longer have anything in my css sheet as I am doing it all dynamic now.

Here is the javascript function that shows the image (hiding it is easy, I have that disabled right now so that it stays on the screen)

   function ShowLarger(evt, ImageName) {
      evt = (evt) ? evt : ((window.event) ? window.event : null);
      document.getElementById("LargerProductImages").style.position = "absolute";
      document.getElementById("LargerProductImages").style.top = (evt.clientY-100) + "px";
      document.getElementById("LargerProductImages").style.left = (evt.clientX-500) + "px";
      document.getElementById("LargerProductImages").style.display = "block";
      document.getElementById("LargerProductImage").src = "/Images/Larger/" + ImageName + ".jpg";
   }

The problem with this code is that as you scroll down the page, instead of the image popping up beside the magazine cover, it keeps going higher and higher in the window. As you scroll, the clientY gets smaller because you're closer to the top of the screen but the absolute positioning is going from the top of the page instead of the screen. If you don't understand what I mean by that, try the above link and see for yourself.

Thanks for any help!!

One last thing, I have only tried this in IE7. Before I go live, I know I have to check it in several other browsers as well, so if it doesn't work in the other browsers, I apologize.

 

[DazzlingD]

I don't know that it's perfect, but it's doing what I want now. I may have to fine tune it just a touch later. Here's the code that I ended up with.

   function ShowLarger(evt, ImageName) {
      evt = (evt) ? evt : ((window.event) ? window.event : null);
      document.getElementById("LargerProductImages").style.position = "absolute";
      document.getElementById("LargerProductImages").style.top = (evt.clientY  + document.body.scrollTop - 100) + "px";
      document.getElementById("LargerProductImages").style.left = (evt.clientX  + document.body.scrollLeft - 400) + "px";
      document.getElementById("LargerProductImages").style.display = "block";
      document.getElementById("LargerProductImage").src = "/Images/Larger/" + ImageName + ".jpg";
   }

   function HideLarger(ImageName) {
      document.getElementById("LargerProductImages").style.display = "none";
   }