e. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to …

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

]]> For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

]]> http://css-tricks.com/open-a-window-with-full-size-unscaled-image/feed/ 27 New Poll: Your Internet Connection Speedhttp://css-tricks.com/new-poll-your-internet-connection-speed/ http://css-tricks.com/new-poll-your-internet-connection-speed/#comments Tue, 13 Dec 2011 23:54:54 +0000 Chris Coyier http://css-tricks.com/?p=15549

I think it would be interesting to get an idea of what the internet connection speeds are like for CSS-Tricks readers. Connection speed makes such a huge difference in the web browsing experience I hope that getting an understanding of what speeds people are getting will help us all kind that in mind when working on websites.

So go test your speed right now (Download Speed) and pick the most appropriate answer in the poll (in the sidebar). If a …

New Poll: Your Internet Connection Speed is a post from CSS-Tricks

]]> I think it would be interesting to get an idea of what the internet connection speeds are like for CSS-Tricks readers. Connection speed makes such a huge difference in the web browsing experience I hope that getting an understanding of what speeds people are getting will help us all kind that in mind when working on websites.

So go test your speed right now (Download Speed) and pick the most appropriate answer in the poll (in the sidebar). If a mobile device is your main connection, test that, otherwise use your main home/work connection.

Remember, "Mbps"

That's "Megabits per second." Somehow this has become the standard for measuring internet connection speed. Personally, I think this is insane. People understand the size of digital things in bytes, kilobytes, megabytes, gigabytes, and terabytes. Yet instead of using these commons sizes that everyone understands, we use the "bit" versions of those, which are are 8x larger numbers. Because:

8 "Megabits" == 1 "Megabyte"
et al.

Let's stick with "Mbps" since that's what the speed tester reports.

New Poll: Your Internet Connection Speed is a post from CSS-Tricks

]]> http://css-tricks.com/new-poll-your-internet-connection-speed/feed/ 426 TextMate 2http://blog.macromates.com/2011/textmate-2-0-alpha/ http://css-tricks.com/textmate-2/#comments Tue, 13 Dec 2011 16:46:18 +0000 Chris Coyier http://css-tricks.com/?p=15551

The long awaited has arrived (in alpha).

Direct Link to Article — Permalink…

TextMate 2 is a post from CSS-Tricks

]]> The long awaited has arrived (in alpha).

Direct Link to Article — Permalink

TextMate 2 is a post from CSS-Tricks

]]> http://css-tricks.com/textmate-2/feed/ 0 //AN_Xml: an>

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

]]> http://css-tricks.com/open-a-window-with-full-size-unscaled-image/feed/ 27 //AN_Xml: