Limited transfer

Post by **djst** » December 7th, 2002, 4:50 pm

Flii wrote:i think actually stefan can do that with his famous css skills. i'm pretty sure that's something he was (trying to) explain to me on the old forums, but i was a lil too dense to understand him.

I may be wrong, but I think this requires a bit of javascript code too. I doubt that CSS can dynamically change an image when hovering a link.

flii · Post by **flii** » December 7th, 2002, 4:53 pm

djst wrote:I may be wrong, but I think this requires a bit of javascript code too. I doubt that CSS can dynamically change an image when hovering a link.

well i'm thinking you prob know more than me, then. i'll be very interested in this answer.

i would like to be able to do this as simple as possible, as well.

Stefan · Post by **Stefan** » December 7th, 2002, 4:54 pm

djst wrote:One thing that I've thought about is having a placeholder for an image area that will display the preview image of the theme you're hovering over in the contents. Does this make sense? Let me explain:

The page starts with a list of Contents, where all theme names are listed. What I'd like is that when you hover the mouse over a link, a preview of that theme would be displayed to the right of the Contents (probably in a floating div). Is this possible using JavaScript? Could anyone help me do this?

It's possibel with JavaScript, and it's also possible with plain CSS... =)

Eg hover above the downloadable plugins on this page and watch the popup to the right

http://hem.bredband.net/stehus/logd/downloads.html

spark · Post by **spark** » December 7th, 2002, 4:56 pm

Kinda like http://www.nero.com/en/index.html#download i guess, but with different images for each link... (mouseover the download links)

flii · Post by **flii** » December 7th, 2002, 4:56 pm

Stefan wrote:It's possibel with JavaScript, and it's also possible with plain CSS... =)

*tries <b>extremely</b> hard to hide a smug smile* really, i am. :-D

Post by **djst** » December 7th, 2002, 5:07 pm

Stefan wrote:It's possibel with JavaScript, and it's also possible with plain CSS... =)

Eg hover above the downloadable plugins on this page and watch the popup to the right
http://hem.bredband.net/stehus/logd/downloads.html

Aha! I guess I have something to play with now. Thanks Stefan!

Stefan · Post by **Stefan** » December 7th, 2002, 5:24 pm

djst wrote:
Stefan wrote:It's possibel with JavaScript, and it's also possible with plain CSS... =)

Eg hover above the downloadable plugins on this page and watch the popup to the right
http://hem.bredband.net/stehus/logd/downloads.html

Aha! I guess I have something to play with now. Thanks Stefan!

You're welcome to ask questions

As usuall it's perhaps easiest if you say how you want it to look exactly and I'll help you with the CSS code. With some luck we can perhaps even do away with the <table>s (joking

Post by **djst** » December 7th, 2002, 5:44 pm

Stefan wrote:You're welcome to ask questions

As usuall it's perhaps easiest if you say how you want it to look exactly and I'll help you with the CSS code. With some luck we can perhaps even do away with the <table>s (joking

I've tried to do this on my own and I think I got it working the way I wanted

Let me know what you think and if I'm doing anything wrong.

Note: You <b>must</b> hit Reload if you visit my site regulary, because the css has been updated and Phoenix doesn't always realize that automatically.

Post by **Alex Bishop** » December 7th, 2002, 6:21 pm

djst wrote:I've tried to do this on my own and I think I got it working the way I wanted
Let me know what you think and if I'm doing anything wrong.

This is the new CSS right?

/* For the thumbnail hover on the themes page */
.thumb span {display:none;}
.thumb a:hover span {
display: block;
position: absolute;
top: 32ex;
left: 70ex;
margin-top: 3ex;
background: #f7f6fb;
padding: 1ex;
width: 150px;
border: gray 1px dashed;

}

Firstly, there's no real point putting your images in <span>s: remove them and apply the rule directly to the images:

.thumb img {display:none;}
.thumb a:hover img {...}

Mozilla-based browsers won't load images that have display:none applied to them initially. This causes a lag when you hover over each link. It's not a problem right now because the images are repeated lower down (and therefore get loaded when the page does) but in the interests of future flexibility, it's probably a good idea to change this.

To do this, make the initial width, height and border-width of the images zero:

.thumb img {width: 0; height: 0; border-width: 0}

Of course, you'll also have to update the :hover rule so that it includes the height:

.thumb a:hover span {
...
width: 150px;
height: 75px;
...
}

This will cause the alt text to be always displayed but you should get rid of it anyway as "Screenshot" doesn't really say anything. The title is a bit superfluous too.

Eric Meyer once made a page about CSS image pop-ups (from which most of this advice is taken): http://www.meyerweb.com/eric/css/edge/popups/demo2.html

Post by **djst** » December 7th, 2002, 6:27 pm

Thanks for the tips Alex, I'll look into it.

The only thing that I would never do is removing the alt-text. That would break the XML 1.0 compliance.

Post by **Alex Bishop** » December 7th, 2002, 6:39 pm

djst wrote:The only thing that I would never do is removing the alt-text. That would break the XML 1.0 compliance.

Just put alt="". It's allowed by the specs. Not all images need alt text. Having alt text that just says "Screenshot" isn't really conveying the same information as the image. If you were going to put a description of the theme for the alt text (e.g. "The Breeze theme uses simple, colourless icons.") then that would be different. But right now the alt text isn't really doing much so it's probably better just to have alt="".

Post by **djst** » December 7th, 2002, 6:48 pm

Alex Bishop wrote:
djst wrote:The only thing that I would never do is removing the alt-text. That would break the XML 1.0 compliance.

Just put alt="". It's allowed by the specs. Not all images need alt text. Having alt text that just says "Screenshot" isn't really conveying the same information as the image. If you were going to put a description of the theme for the alt text (e.g. "The Breeze theme uses simple, colourless icons.") then that would be different. But right now the alt text isn't really doing much so it's probably better just to have alt="".

You're right that the "Screenshot" alt text is useless, but I'm working on changing it to "Screenshot of [name] theme". If you look in the source, you'll see that some themes uses this alt description instead. I haven't fixed all yet because I'm lazy.

Post by **djst** » December 7th, 2002, 6:59 pm

Sorry, I was confusing this with the title text. I've removed the title property and replaced the alt property with better descriptions. I've only changed the contents descriptions so far.

Also, span has been removed and the image preview now follows the location of the text (otherwise the preview image wouldn't be displayed if using a low screen resolution and scrolling down).

Please let me know what you think.

Again: Hit <b>Reload</b> if you've visited the page before! Also, some of Lynchknots screenshots do not have the 150x75 dimensions, and these will be scaled. Hopefully, he will fix the screenshots soon.

Stefan · Post by **Stefan** » December 7th, 2002, 7:47 pm

Alex Bishop wrote:Mozilla-based browsers won't load images that have display:none applied to them initially.

Hmm, is this still the case? I thought this had been fixed a while back.
I would test it but "sadly" I'm on a 10Mbit line so I don't really notice if images are preloaded or not

Could someone whip up a testcase with a big image on a slow server or somewhere on the other side of the world from me?

Anyway, another way to preload the images with CSS where you don't have to mess with height and width is to relocate them outside of the screen (eg position:absolute; left:-2000px).
That way you could even use screnshots of different sizes if you like

Stefan · Post by **Stefan** » December 7th, 2002, 7:49 pm

djst wrote:Please let me know what you think.

Looks good so far.