Imaginuity Logo
Header Image

blog | September 19, 2013

Non-Impossibilities

By John Bratteli

We at Imaginuity like to test generally accepted wisdom. Often it’s accepted for a reason, but it’s worth the time to check. We see impossibilities as a challenge. Sometimes we can turn “Sorry, there’s just no way to do that,” into “Oh, that’s actually pretty easy.” Let’s look at a few tasks (development, design, and general interest) that many would say are impossible, and I’ll show you how to accomplish them quickly and easily.

Vertically centering in CSS 

It’s simple to horizontally center a CSS box, just add margin: 0 auto; to the style for that box, and the browser will automatically calculate the correct margin to center the box. Unfortunately that just doesn’t work in the vertical. The best we can do is set a static margin on our box and a static height to its container. It’ll be centered, but if content inside or near our box changes, we’ll have to manually recalculate the margin and set it again – there’s just no better way. Wrong! While we can’t use the margin property, there’s another way. HTML table cells can vertically center content within themselves, so we tell the browser to treat our container like a table cell.

Hide something when JavaScript isn’t available 

JavaScript is used on 89.4% of websites (W3 Techs, Web Technology Surveys, http://w3techs.com/technologies/details/cp-javascript/all/all), but many users, for one reason or another, don’t have JavaScript enabled. So it’s considered good practice to provide a fallback. That’s why the W3C added the <noscript> tag to HTML.  Anything inside <noscript> only shows when JavaScript is missing.  But what if we want to hide something when there’s no script?  We use JavaScript to dynamically hide things, so we can’t do that when the script is disabled.  Nope.  It’s actually pretty easy if we use a little CSS:

<noscript><style>.noscript-hide { display:none; } </style></noscript>

Add that code to a page, and any element with a class of noscript-hide won’t show up when a user without JavaScript visits the page.

Create a circle pattern

Many logos use a circular pattern made up of smaller elements. Any designer attempting to do this by hand will be met with failure and frustration. Not you. Using the drawing program Adobe Illustrator, the standard program for designers to create vector graphics, the trick is to use the right tool and the secret short key command.

Start with creating x and y guides. Place the first graphic element on the vertical guide line, the desired distance from the center of the guides’ cross point. Now with the element selected, choose the Rotate tool from the toolbox and Alt-click (Opt-click on Mac) the exact center of the guides’ cross point.

A pop-up dialogue box will appear, allowing you to type in an exact percent which determines the exact space between each graphic element around the circle pattern. Now click the Copy button. A new duplicate of the original element will appear the exact distance typed into the rotate box.

Now, while the new duplicate element remains selected, use the short key command, Ctrl-D (Cmd-D), to make as many additional copies of the pattern element until the circle is formed.

Reopen closed browser tab

Have you ever filled out a long online form where you have to switch back and forth between browser windows or local documents looking for information to enter into it? Ever slipped a little and closed the form instead of switching to it? Wouldn’t it be nice if you could reopen a browser tab you just closed? You can. Just hit Ctrl-Shift-T. The tab will reopen, your place will have been saved, and any form data you’ve entered will still be there. This key combo works in Chrome, Firefox, and Internet Explorer.

Trust, but verify

Conventional wisdom is usually correct, at least close enough for us to move forward with our current task. Every once in a while, though, we should take a different route; we might get to our destination faster.