Can't get rid of flicker.

[Zane]

I'm trying to make an image appear above a tr when it is hovered over.

http://reallycheapfloors.com 

 

As you can see from the above link, if you hover over a TR, the image appears,

BUT it also resizes the entire tr... making this annoying flicker effect.

 

My goal is to have the image appear ... somewhat absolutely in which it stays in place and the TR doesn't resize it self.

Currently I'm using this code to make it do this.

 

table.excel td.img {
width: 10px;
background-color:#CF9557;
position:relative;
}
table.excel td.img img {

display:none;
}
table.excel tr:hover td.img{
width: auto;
cursor:pointer;
padding: 3px;
font-size:largest;
border: 1px solid black;
background-color:white;
}
table.excel tr:hover img {
display:block;
}
table.excel tr:hover {
font-size: 14px;
cursor:pointer;
border: 1px solid black;
}

I'm most likely going about this the wrong way, but it feels like I'm so close. 

Whenever I set table.excel tr:hover img to contain position:absolute the image gets off centered from it's TD and if I use top, right, etc to position it, it moves relative to the page instead of the TD.

 

What am I doing wrong?

[cssfreakie]

Hi zanus,

 

A few things happen, not only the table cell of the image changes dimensions (both horizontally and vertically), but also the others table cells, because of their font size that changes on hover.

By setting a fixed width and height on the cells/rows you should not have this problem.

Give me a second i'll post something that works ( i think  )

 

be right back.

[Zane]

Thanks cssfreakie.

I changed the font-size for the TR hover, but the "flickering" continues... if you know what I mean.  i.e I can't move down the list one at a time, although I can move the mouse up the list just fine.

 

If only I could maintain the same height for the TR and have the image just overlap the cell below it, it would be perfect.

[Zane]

Wow, I think I may have fixed it now.. I just needed a break.

 

I changed my code to this... just to avoid explanation.

table.excel td.img {
width: 80px;
background-color:#CF9557;

}
table.excel td.img img {
position:absolute;
display:none;
}
table.excel tr:hover td.img{
cursor:pointer;
}
table.excel tr:hover img {
display:block;
border: 1px solid black;
}
table.excel tr:hover {
cursor:pointer;
border: 1px solid black;
}
table.excel td {
text-align:left;
vertical-align:top;
padding:3px;
}

This isn't exactly the "coolest" method I've tried to get working, but it works.... if you have any suggestions for a different approach, feel free to let me know.

[cssfreakie]

Ah i see what you mean with flickering now. It is caused because ones you mouse over the first row it's height increases, but ones you reach the bottom of the first row your not hovering over the second row, if you know what i mean.

 

Got what you say you have working online. Because i was thinking to try it a different way.

[cssfreakie]

Wicked i have a nice solutions although it doesn't use tables, but the idea is very nice and the markup is much cleaner.

Instead i use some unordered lists. You can style it as you want and there will never be any flickering

 

Try it out at http://cssfreakie.webege.com/phpfreaks/examples/zanus.php

 

if you need additional help let me know.

hope it helps!

[Zane]

nice.. I like it.  Not sure if I want to go away from tables or not, although it would be easier to sort using your way.

 

It seems, from your example, that I could mimick this just by adding a margin or bottom padding to the TRs.  I'll keep the non-table idea in mind, but I've already coded it tabularly, I think I'll just add a margin (or bottom padding) and go with that.

 

My problem isn't so much the TRs 'popping out' as it was getting the image to center just right, without resizing the entire TR.

 

EDIT: nope, bottom padding did nothing, but honestly I think this will work.  I'm sure at some point though I might have to implement the UL method.

[cssfreakie]

I looked again at what you have now, and that is indeed something different than i was thinking of. I thought you wanted to resize the tr. But if is just the image that you want to show up as a form of tooltip, that should be doable even with a table. If you want i can have a look at that.

[Zane]

yep, that's exactly the effect I was aiming for... a tooltip.  I looked for a few examples to pilfer from, but most all of them use javascript (jquery).  I already have enough javascript going on anyway so I'm trying to avoid adding more.

 

Yeah sure, any kind of suggestions you might have.. just lemme know.  Though this seems to work as it is now.  There's so many columns and data in those tables that I can't figure out how to sustain any free whitespace.

 

'preciate it cssfreakie.

[cssfreakie]

Hi zanus,

 

I made something that just focus on the image as a form of tooltip without it displaying under the box for the last few rows (like the case is now).

Note though i gave the wrapper a position:relative; so that is the starting point. You can place the tooltip on a fix spot that way. Maybe nice to have a big horizontal image underneath the box as a tooltip/example. Anyway place it where ever you like.

 

Also note i created a span with an image in it that is now part of a cell instead of it having it's own cell, saves you some space also

 

Hope it helps.

 

css

 

you can view it here: http://cssfreakie.webege.com/phpfreaks/examples/zanus2.php

 

p.s. you could ofcourse also set the tr as a position relative, but that would cause the tooltip to eventually end up below the box, and i must say i like this more. either to the left as high as the box, or underneath it as width as the box would be my suggestion as far as layout

 

[Zane]

Now that's what I'm talkin' bout.  You da CSS masta.

 

It might a day or so before I implement this... you mind leavin your example up for me. 

Well, I guess I could just copy it real quick.

[cssfreakie]

Now that's what I'm talkin' bout.  You da CSS masta.

cheers! getting a beer to celebrate this promotion :intoxicated: :intoxicated: