Need a web application built? Check out componentlab.com.

9-Grid Scaling Support in Javascript/CSS

Posted: November 17th, 2008 | Author: gordon | Filed under: javascript | Tags: , , , | Comments

If you have ever spent any time developing and styling flex applications, you have probably come to find the 9-grid scaling feature indispensable. For those of you unfortunate enough to have never experienced this feature, it enables you to easily scale an image while preserving the scale of certain portions of the image based where it lies within a specified grid. Parts of the image which lie in the corners of the grid will not be scaled and parts which lie in the sides will only be scaled in one direction.

Traditionally, to achieve this same effect in plain html/css you would slice the background image into multiple files and have extra structural markup in order to place the images in the appropriate places. This is particularly annoying for fluid layouts. Being faced with a small side project in html/css and desperately wanting to avoid this css styling tedium, I created a jQuery plugin which brings 9-grid scaling support to html/css. I have also put up some examples and I have also put it up on google code. I am looking forward to using this as a more efficient alternative.

No TweetBacks yet. (Be the first to Tweet this post)
  • Case
    You are so Awesomely Cool !
  • hi there!
    I'm trying to use your plugin with jQuery UI Dialog. Is there a chance to apply 9-grid all the time, with a listener?
    For example, if i resize the window, with a listener for resize event, the 9-grid is called, but it doesn't work very well with the actual dimensions.
    So...how should i use this plugin called by a container resize listener?

    thanks,
    Carlos
  • Raymond
    Here's a link to enable dynamic height:

    http://code.google.com/p/scale9grid/issues/deta...
  • Alex K
    I added this code, but when the height of a paragraph inside the div (the container with the scale9 background applied) expands vertically down, the div background image does not adjust. The only browser it works properly in is IE (boo-urns).
  • Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends
  • alexandernikitin
    Cool. My 2 cents:

    1. Firefox version detection is wrong, parseFloat(version.substr(3)) returns '0.1' in Firefox 3.5.3
    2. Could you make fallback version stretch images instead of tiling, using IMG tags?
    I would happily provide manually splitted images for such a case, because adding tons of elements slows down browsers greatly ((
  • Love this little plugin.

    The only problem that I've found thus far is that it does not automatically scale the height of the div

    Any suggestions on this issue?
  • barneyfoxuk
    I can see this being extremely useful on pretty much every project I undertake - thank you!
  • AD
    There are no examples. Please post them.
  • Just re-posted the examples. I must have lost them when I changed hosts.
  • Name
    The examples page is empty? I just see a "No posts yet!" message when I click on the examples link.
  • Cool feature. It actually enables us to easily scale an image while preserving the scale of certain portions of the image based where it lies within a specified grid.
  • eVp
    The plug-in doesn't actually 9-slice-scale, but rather draws a large amount of unscaled images? It is, at least for me, extremely slow if your source image is what it should be (leaving 1 pixel to be scaled...). Since basic css supports repeat-x and repeat-y, why not make it a true 9 slice-scale? ie have 9 divs instead of 900?

    Could be awesome, but the current implementation is too slow for me.
  • eVp
    ahh... nevermind that.. I now realize why it cannot be done... too bad.
  • This is quite some plugin. Thanks for this one!
  • Rodrigo Gregorio
    How Very Nice plugin ,

    imagina o que dar para fazer com isto.

    Parabéns!
  • sam
    Please include your style sheet and image(s) - it helps to follow the example. I tried wih a sample background and it does not seem to work
  • Max
    Stumbled across this sort of by accident, but don't need it (yet!). It looks very well done though, examples worked flawlessly. I'll consider using this plugin in the future, nicely done!
  • David
    Love it! Thank you very much. This is exactly what I was wanting
blog comments powered by Disqus