Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    sprites question

    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
    Last edited by bazz; 11-04-2010 at 06:45 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.

    Quote Originally Posted by digitalclubb View Post
    ...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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by bazz View Post
    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. 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?.

  • #8
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by MattF View Post
    ...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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by Rowsdower! View Post
    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:

    Code:
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAYFBMVEUmu/EAuPMAufQWsu8as/AdtPEgtfIjuu8AsfMovPIrvfMtvvQvv/VEwfJHw/RZyPNbyfVcy/ZnzPJr0PVu0vh51fZ71/eQ2/eS3fnO7//V8fzl9fzm9/3v/P31+v3+//xZL0lVAAAAAXRSTlMAQObYZgAAAHpJREFUeNoNjVEOwyAMxR6BkooArQbdWJeS+99yfFqWZSAQMycRIcC7k+JikeIQnJmOWsqyYD7HPfVImRnRjcbteV6rhLBN7efUHCMS14/a1eabCJlarz91+g2MnKZd3Y5he0SR+6nVerMSQDkRO9787gPWSIhj3JzHH0EvB3JAEupEAAAAAElFTkSuQmCC');
    In the original source, however, that image url appears in the standard format as something like:

    Code:
    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.

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    Exclamation

    Quote Originally Posted by MattF View Post
    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. 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 ( ) where you said you embed the encoded image

    uh-oh, I see we cross-posted.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #12
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by bazz View Post
    I have a vision of a css file that is a mile long, which means, surely, I must has mis-interpreted your post ( ) 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 ):

    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.

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Edit: 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
    Last edited by bazz; 11-05-2010 at 04:11 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #14
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by bazz View Post
    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 ). 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.

    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.
    Last edited by MattF; 11-05-2010 at 04:21 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •