3 replies [Last post]
stakkeddesigns
Offline
newbie
Cumming, GA - USA
Last seen: 12 years 38 weeks ago
Cumming, GA - USA
Timezone: GMT-5
Joined: 2008-02-08
Posts: 2
Points: 0

Quick question...

I'm building a page template where I have a large div on the right that is set to {overflow: auto;}. Using javascript, I have applied an image hover feature to a thumbnail that displays in the right div. What I'm [ultimately] wanting to do is have the hover pop up in a separate div on the left side, at the bottom.

However, not only does the image hover stay within the div that the thumbnails are in, it also stays "inline" with the text/thumbnails, so as more content is added (and the overflow feature takes place), it gets lost at the top as you scroll down.

Hopefully it's some sort of mixture of CSS/javascript and I'm just curious if there is a way to do this (even if it's a completely different way). I just need my left [square] div on the bottom to stay static, while a viewer has the option to scroll through products (thumbnails) in the larger, right div.

Please email me at: john{at}stakkeddesigns.com if you think you might be able to help me! I would be happy to email an AVI video that shows the 2 divs so please let me know.

Thanks!

sixpence
Offline
newbie
Last seen: 12 years 38 weeks ago
Joined: 2008-03-09
Posts: 1
Points: 0

I'm digging around trying to

I'm digging around trying to solve this exact scenario... No joy though.

stakkeddesigns
Offline
newbie
Cumming, GA - USA
Last seen: 12 years 38 weeks ago
Cumming, GA - USA
Timezone: GMT-5
Joined: 2008-02-08
Posts: 2
Points: 0

Got it working

Stu Nichols from CSSPlay.co.uk wrote me with some hints on how to get it to work. He had an example on his site and I just didn't find it when I was browsing. I changed a few things and got it to work (thank goodness). The only problem is that it doesn't work in IE6. In fact, the whole site doesn't.

Send me an email and I will send you a link to show you what I found... (I'd rather not post it live because it is a client of mine and their site is not finished being developed).

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

stakkeddesigns, this forum

stakkeddesigns, this forum works by people posting questions and other people posting assitance and solutions. That allows others to read the question and solution and learn. Its not a place to solicit assistance.

If you would like assistance, make a copy of your page, anonymise it and isolate the problem then post a link.

Fwiw, if you wish hover to show a div a long way away. You need an parent element to provide a fixed reference point for the hover location. That element gets position:relative. You can't use overflow on any element that doesn't include both the element you hover over and the element where the display will appear. Once you have that, forget about on hover. Build a page with styles permanently in the hover state. To work seemlessly in IE6, use an anchor element for the element which will (later) be hovered over and a spsn for the element containing the displayed information. Once you have that all working, add a display:none (or visibility:hidden) style to its CSS rule. And add an extra rule for a:hover span (replace with appropriate ids and classes) to reverse the display:none (display:inline or display:block) or the visibility:hidden (visibility: visibile).

#container {
width: 200px;
padding-bottom: 200px;
position: relative;
}
#container .popup {
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 200px;
visibility: hidden;
}
#container a:hover .popup {
visibility: visible;
}
/* nothing rule for IE6, it sometimes forgets to trigger descendent hover rules if there is no hover rule on the anchor itself */
#container a:hover {
background-position: 100px;
}