...

View Full Version : sprites question



bazz
11-04-2010, 04:48 PM
Hi,

I have been reading up on sprite nav menus and I am confused over the need for jQuery.

I have been using son of suckerfish for ages and it too uses a multi-background image (ie different images d'loaded as one) then positioning them as needed in the flyout nav menu.

what extra stuff does jQuery sprite bring?

bazz

digitalclubb
11-05-2010, 01:39 PM
Hmm I wouldn't see a need for jQuery if you want simple hover effects.

On hover (using CSS selector) you simply set different background-position for your sprite, thus showing different images.

I use sprites a lot because I love optimisation and have never used any JavaScript library for it.

Make sure you only use sprites for icons and small images though, don't try and embed the whole web page via a sprite ;)

SB65
11-05-2010, 02:03 PM
I guess with jQuery you have a wider range of animations than the straightforward show and hide that you get with css. So your image could crossfade in and out on hover, or your dropdowns could fade, or whatever.

Rowsdower!
11-05-2010, 02:07 PM
Apart from allowing slow-fading, slide effects, or some degree of latency to hover effects I don't really see why jquery is involved either. I think it's just to enhance the effects you already have by just a little something extra (http://www.alistapart.com/articles/sprites2). I'm not sure if it's worth it, but some people like the razzle dazzle.

Found this though, while I was at it:
http://www.spritely.net/

That looks like an interesting waste of time! :D

digitalclubb
11-05-2010, 02:45 PM
In a navigation aspect then yes, jQuery or JS will add your selected class - allowing you to show your users what they have clicked on.

And when it comes to effects then sure jQuery is awesome but it's not really related to sprites because all it does is change background-position to show a different image :)

Rowsdower!
11-05-2010, 02:59 PM
We should probably clarify, digitalclubb, that the three of us (bazz, SB65, and myself) are all aware that javascript is not specifically needed for sprite menus. We also understand how sprite menus function in general and in CSS-only applications, so there is no need to explain that.

I believe the basis of the thread is a discussion of what *additional* benefits one might see from using jquery in a menu system. Bazz is asking why one would ever bother loading up a javascript library to do something small that can already be done with CSS.


...And when it comes to effects then sure jQuery is awesome but it's not really related to sprites because all it does is change background-position to show a different image :)

This is untrue, and so far it has been exactly those things OTHER than simple background position changes that people put forward as the benefit to using jquery for menu enhancement (and in my opinion, enhancement is all javascript should ever be for a menu - there should be no true dependence on javascript to navigate one's site).

I don't mean to offend or to discourage your participation in this discussion in any way, I mean only to clarify the topic if that needs to be done.

MattF
11-05-2010, 03:05 PM
I have been reading up on sprite nav menus and I am confused over the need for jQuery.

As the others say, it'll be some fancy, (read annoying), effects thing.


Just on a slight tangent, been testing using the data: format in the stylesheet and embedding the base64 encoded image directly in the CSS rather than using sprites. Quite like that method, and no arsing around with coordinates either. :D Has the same benefits as the sprite method, namely the facts that everything is in the CSS which gets cached, so only one request/download. Only downside, (if it can be considered such), is the lack of support in IE6/IE7?.

digitalclubb
11-05-2010, 03:07 PM
Ah, I have been reading so many threads all day I guess I was confused about the topic.

Well I completely agree, a site must be navigational without the use of JavaScript or another library, JavaScript must only be used for like you say, an enhancement for usability.

What those libraries bring though would be the cross browser compatibility for its selectors, such as first-child etc.

However, apart from the effects and animation, I can't see any real added value..

Though I am never one for massive effects on a site apart from a simple fade/slide.

Rowsdower!
11-05-2010, 03:31 PM
...been testing using the data: format in the stylesheet and embedding the base64 encoded image directly in the CSS ...Only downside, (if it can be considered such), is the lack of support in IE6/IE7?.

I haven't played with that at all yet, personally, but wouldn't that bloat your CSS file pretty severely? I guess it's all the same for caching purposes, but I would think that all of that encoded image data would make it unpleasant to update your CSS file. Lots of extra crud in the way... Do you keep all of your image data in a separate CSS file to keep the rest clean?

MattF
11-05-2010, 03:45 PM
I haven't played with that at all yet, personally, but wouldn't that bloat your CSS file pretty severely? I guess it's all the same for caching purposes, but I would think that all of that encoded image data would make it unpleasant to update your CSS file. Lots of extra crud in the way... Do you keep all of your image data in a separate CSS file to keep the rest clean?

It does bloat the CSS over standard. For example, this is a 12x12 px 294Byte icon as it appears in the compacted stylesheet:



background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAYFBMVEUmu/EAuPMAufQWsu8as/AdtPEgtfIjuu8AsfMovPIrvfMtvvQvv/VEwfJHw/RZyPNbyfVcy/ZnzPJr0PVu0vh51fZ71/eQ2/eS3fnO7//V8fzl9fzm9/3v/P31+v3+//xZL0lVAAAAAXRSTlMAQObYZgAAAHpJREFUeNoNjVEOwyAMxR6BkooArQbdWJeS+99yfFqWZSAQMycRIcC7k+JikeIQnJmOWsqyYD 7HPfVImRnRjcbteV6rhLBN7efUHCMS14/a1eabCJlarz91+g2MnKZd3Y5he0SR+6nVerMSQDkRO9787gPWSIhj3JzHH0EvB3JAEupEAAAAAElFTkSuQmCC');


In the original source, however, that image url appears in the standard format as something like:



background-image:url('style/images/buttons/atom.png');


and then the CSS compacting script converts the image reference to its base64 data equivalent, so working on the original file stays as normal without having to look at that extra cruft.

bazz
11-05-2010, 03:51 PM
As the others say, it'll be some fancy, (read annoying), effects thing.


I tend to agree. I think sometimes a design can be made, overlooking the needs the user's need to have simple, clear, straightforward layouts. Either that or, the designer wasn't given a balanced brief.



Just on a slight tangent, been testing using the data: format in the stylesheet and embedding the base64 encoded image directly in the CSS rather than using sprites. Quite like that method, and no arsing around with coordinates either. :D Has the same benefits as the sprite method, namely the facts that everything is in the CSS which gets cached, so only one request/download. Only downside, (if it can be considered such), is the lack of support in IE6/IE7?.

Interesting. I too put my images into the css when they are structural/skeletal. But instead of putting in the actual image code (that's what I think you meant), I have a url to a server-side file, which gets the image from somewhere.

That means I can change the image simply by changing the css in my CMS and by getting the image details from the db.

I have a vision of a css file that is a mile long, which means, surely, I must has mis-interpreted your post ( :rolleyes: ) where you said you embed the encoded image

uh-oh, I see we cross-posted.

MattF
11-05-2010, 04:03 PM
I have a vision of a css file that is a mile long, which means, surely, I must has mis-interpreted your post ( :rolleyes: ) where you said you embed the encoded image

uh-oh, I see we cross-posted.

It doesn't actually work out too bad, in practice. A live example is here, (note that this is a purely a test site at the moment, so this link may not be there forever :D):

http://fyrdraca.org/fyrdraca/script?css

That's the compacted CSS with several data:image types in it. The link to the original CSS file is shown at the start of that file. There's only a 1340Byte difference between the two, but that's mitigated by no extra queries/ downloads etc.

bazz
11-05-2010, 04:08 PM
Oops, I forgot this was a bigger thread and others had replied.

Thanks to you all. I was prompted to ask the question because another person was asking for help with JQuery for their site nav and I couldn't see why they were bothering with JQuery at all. the working example they showed didn't seem to need it either.

So thanks all, for your replies and Matt too for your example css file.
I'll check that out later.


bazz

MattF
11-05-2010, 04:16 PM
Interesting. I too put my images into the css when they are structural/skeletal. But instead of putting in the actual image code (that's what I think you meant), I have a url to a server-side file, which gets the image from somewhere.

That means I can change the image simply by changing the css in my CMS and by getting the image details from the db.

On this point, it sounds like a similar method in theory to that which I use. In the stylesheets, simply changing the image URI in the original stylesheet causes the compacted sheet to be regenerated and the new info included, (provided the image exists, of course :D). It's just a regex which runs on the original stylesheet, (when the timestamp of the file changes), which compacts it and extracts the info for any images so that the base64 encoder function can convert the image links to binary data and replace the references in the compacted sheet. It's not bitten me yet. :D

For normal images which would be in an entry or suchlike, and not related to the CSS, those are merely processed by a server side file to see if they exist and then served directly, (with appropriate caching headers and such).

I'm just trying to get a setup which compacts/compresses everything to the hilt where possible and which also makes everything feasibly cacheable by the client browser get cached properly, hence some of the borderline methods. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum