I recently received a request to update the grid960 bookmarklet to support 24 columns. I hadn’t realised that 960.gs had been updated.
So, here it is!
To install the bookmarklet simply drag the link below to your bookmarks toolbar. In Internet Explorer, right click, select ‘Add to favourites’ and then select ‘Links’.
For further information on this bookmarklet, see my previous post
This site continues to receive a large amount of traffic from people searching for a solution to achieving rounded corners in IE8. Clearly, it’s a hot topic, and my previous post about using DD_Roundies has hopefully helped developers along their way.
I recently had an issue with DD_Roundies where the border width was 1 pixel out. Not sure why, but it prompted me to look for another solution. A simple plea for help on twitter resulted in the discovery of another library, and this time one built as a jQuery plugin.
Check out cornerz. It’s easy to use and so far, works like a charm.
Finally a solution for IE8, but for me it doesn’t respect the background colors of parent containers so I am seeing rounded corners with the cut out parts being white instead of transparent or the parent’s background-color :( This makes the plugin useless for me. I am just about to give up on IE8.
@1008. Have you tried setting the background colour as one of the options?
e.g. $(‘.myclass’).cornerz( {
‘radius’ : 12,
‘corners’ : ‘bl’,
‘background’ : ‘#000′
} )
I had the same problem as 1001 Fonts.
It won’t work well with a background..
Setting the color doesn’t work because the background is an image not just a color.
Guess I’ll have to wait. There’s not good solution for rounded corners on IE8 today.
Empiror commented on January 19th, 2011 at 1:42 amI was able to get DD_Roundies working in IE8 without the 1 pixel issue occurring by commenting out lines 226 to 232 – the if statement starting with):
if (DD_roundies.IE8) {
I’ve been using 960.gs on a few sites recently. Without wanting to get into a discussion about the pros/cons of using css grid frameworks, I find them useful for some sites.
The 960.gs framework comes with a handy demo that shows a grid overlay, but the GIF images used have no transparency, so it is difficult to add a nice grid overlay to sites when developing them.
On the 960.gs home page there is a button by the thumbnail examples that dynamically adds a grid to the image. I Googled around for a similar solution, but didn’t find one that quite did what I wanted. So, I decided to build a simple jQuery plugin of my own.
Here’s a demo of the plugin in action.
To use the plugin, simply add the following code to your pages for a 12 column grid:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("body").addGrid(12);
});
</script>
Once the plugin is activated, a small toggle link will be visible in the top left-hand corner of the page. Unsurprisingly, if you change the input parameter from 12 to 16, you get a 16 column grid available!
The plugin relies on a couple of PNGs and by default the image path is set to /images/. You can override this setting, along with several others, by passing in some options as follows:
var options= {
img_path: 'img/',
z_index: 999,
opacity:.6
};
$("body").addGrid(12, options);
As well as the image path, it is possible to override the default z-index used by the overlay, in case there is a conflict. You can also alter the opacity of the PNG if you require.
Please feel free to download the plugin for your own use. Let me know of any problems or suggested enhancements.
Why not convert this to a bookmarklet – seems like a perfect candidate so that anyone can plug it to their site on the fly to check it matches the grid.
You can easily toggle it via the bookmarklet too, but just checking for a particular id in the body.
Thanks, this looks pretty handy. I’ll second Remy’s suggestion of making it a bookmarklet, too.
- jason
Thanks for the feedback. A bookmarklet is on it’s way
Multumesc! (that means thank you very much, in Romanian :P )
[...] I’ve been trying out for the last little while, there’s a new jQuery plug-in called 960.gs grid overlay that does as the name implies — it overlays a semi-transparent 960 grid over your layout as [...]
[...] I saw a link on Twitter for a jQuery plugin written by badlyDrawnToy that allows you to toggle the grid overlay when using [...]
[...] 960.gs grid overlay – a jQuery plugin [...]
[...] basas tus diseños web en columnas utilizando el Framework de CSS 960.gs, 960.gs grid overlay, un plugin para jQuery puede resultarte bastante [...]
Hey! Looks neat, I have been working on a very similar project for two months now (check the link), just to let you know. :-)
[...] jQuery plug-in for the 960gs grid overlay [...]
ling commented on December 21st, 2009 at 11:37 pm1000 thanx
badlyDrawnToy,
most convenient tool for me!!
I love this. Need I say more? :)
Daniel Shanahan commented on January 26th, 2010 at 3:29 amI like this very much – thank you for making it available. I found what may be a bug. I was not able to implement the plugin, even though I followed the instructions to the letter. I ended up duplicating the demo and started from scratch, as the demo worked. Then, as I was marking up the demo.html I came across this behavior: within the container div I have a sidebar div. I gave the sidebar div an id of ‘sidebar’. So far, so good. However, when I gave that same div a class of ‘grid_4′, the grid no longer worked.
Perhaps this isn’t a bug and I am just unclear on the expected behavior. Any thoughts?
Daniel. Glad you like the plugin. Not sure if what you describe is a bug. The plugin simply overlays the grid. It will not affect your own grid classes. More likely you haven’t quite got your own markup correct. Hard for me to say without you showing me your code.
Daniel Shanahan commented on January 26th, 2010 at 4:23 pmThanks for the quick reply. Yes, the problem could very well be my markup. Would you mind taking a look? I have two simple Lorem Ipsum sites: one where the grid works (http://www.gridoveryes.newleafdata.com/demo.html) and one where it does not (http://www.gridoverno.newleafdata.com/demo.html). All the files (css, images, js) are the exact same as the demo downloaded here, though I changed the content in the html file. The only difference between the one that works and the one that does not work is an added a class: grid_4 to the sidebar div.
Any ideas why it doesn’t work here (http://www.gridoverno.newleafdata.com/demo.html)?
Thanks.
Daniel. I think the problem is that you have a 12 column container within which you only define a 4 column grid. You need to specify what happens with the other 8 columns e.g. make the content div 8 cols wide
also, lose the footer tags in the HTML
Good luck
Daniel Shanahan commented on January 27th, 2010 at 6:15 pmThanks Howie. I added grid_8 to the content div, but no luck on getting the grid to show. (I also removed the footer tags). Any other suggestions?
Last night I finally got round to upgrading my Win XP VMWare image from IE8 beta to the production release. A bit slack on my behalf as the browser was released about 3 weeks ago. Still, I’d been testing websites in the beta release and all was cool.
Well, that’s what I thought. Last night I discovered that my company website, no longer worked. Looking into the problem this morning, I discovered that the culprit was a jQuery plugin that renders rounded/curvy corners.
I looked at a few other plugins, but none seemed to work. After a bit of Googling, I cam across an interesting blog entry from the guys at filmanentgroup, who are heavily involved in developing the jQuery UI API.
The blog entry highlighted an interesting piece of javascript development by Drew Diller that has nothing to do with jQuery. Drew has written an IE specific library called DD_roundies, that uses VML to produce the rounded corners.
The idea is that this code be used for browsers that don’t (yet) support CSS3 border radius. However, Drew has included an option to also render the CSS3 syntax for those browsers that support this feature.
I’ve now updated my site to use Drew’s code with CSS3 syntax support. This works in IE6, IE7, IE8, Safari, FireFox and Chrome. It doesn’t yet work in Opera, but this is only a matter of time (and perhaps a code update). If you want to support Opera, you can simply use conditional comments.
Alun commented on April 15th, 2009 at 11:19 pmIE8 is no longer RC? Where have I been?
I installed IE8 last week and have actually been relived to find it’s rendering engine is very good. Admittedly it’s lacking a few CSS3 features that would have made it superb but I can happily sleep at night knowing all the websites I’ve created in the past two years look great in IE8 because it now handles CSS 2 properly.
I cannot believe that IE8 still not supports rounded corners…
IE its getting somehow not that bad in their 8th version, but still score pretty awful in the acid 3 test: http://acid3.acidtests.org/, which means they are far from have a standard complain browser.
If you don’t know what is “ACID 3 TEST” read: http://en.wikipedia.org/wiki/Acid3
Howie,
I had written DD_roundies off, because when I looked at the DD_roundies page all the VML rounded divs are about 300px right of where they belong. I figured it was broken.
You say DD_roundies is working for you in IE8 though, very strange. I visited your company homepage, and indeed, there they are. Maybe I’ll give it a try after all.
Thanks,
Vaughn
It’s really a shame. That’s one of reasons, because i don’t use the IE.
Amsterdam commented on March 3rd, 2011 at 2:06 amFolks, new century, new rules. Simply leave behind the crap you don’t need.
dpmguise commented on May 3rd, 2011 at 5:54 amJust a note to say that this project is no longer supported, not to say it does not work, just that there will be no more updates made.
badlyDrawnToy is the blog of Howie Weiner, a Manchester based freelance web developer.
Howie specialises in Django, PHP and Java web application development.
This site is no longer updated. You can now follow Howie at howieweiner.co.uk
Many thanks for this great tool! :-)
Great tool, Howie, and thanks for sharing. However, I noticed that when you have a layout with absolutely positioned elements the grids never show up. I’m going to try playing around with the script a bit and I’ll post back here what I find out. :)
The jQuery detection logic you use now checks for a version of jQuery that is no longer the most recent version. So even if I’ve already loaded the latest version of jQuery the bookmarklet still loads v1.4.2.
Perhaps instead of explicitly checking for v1.4.2 you should use feature detection to check for whatever critical feature it is that you need in v1.4.2 and then load jQuery only if that feature doesn’t exist. Since that feature will still exist in later versions it won’t overwrite newer versions of jQuery.
Good point Richard. Gosh, I hardly use this tool as I don’t do much front-end development these days, but clearly others like it. Now that jQuery 1.5 is out I’ll have a rethink.
The tool is only used for development, so loading the extra library on the fly isn’t a biggest crime. The important thing is that it does not conflict with an in place library. Most people developing a site will be using the latest jQuery release. Perhaps I should just use the latest.
Shame that none of the CDN versions are labelled ‘latest’ :-/
Actually, the Google CDN does have a ‘latest’ version. Just use https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js and it will always serve the latest 1.x version. (They haven’t upgraded to 1.5 yet as it was just released the other day…)
How does one extending the grid past the initial page fold? I am on Firefox 4.0.1 (Mac-Intel)
Is it possible to play with the alignment of the grid overlay? For example, shift it x number of pixels to the left or right? It might just be the site I am looking at, but nothing lines up with the grid, including the main content area. If I can shift the grid to align with the content area, then I can at least determine if the elements are out of whack or the whole page is out of whack…
This tool is wonderful.Many thanks for sharing.