Open external links in a new window in one line of jQuery
I have been against opening new browser windows because a user can choose to do this on their own. There are several ways they can do this like middle middle clicking or right clicking for a contextual menu. I also wrote about it a few years ago as part of my 12 bad website practices. I’m a little more open to this practice now; I believe the choice to open external links in a new window also depends on your website and your taget audience. I constantly middle click myself, because often when you visit a link embedded in article you fully intend on coming back to the source article after taking a peek. Regardless of whether it’s right or wrong, here is a super easy way to make all external links open in a new window using jQuery.
Keep Reading
Creating subdomains and custom server names with MAMP
My server of choice is Apache, but I’m no web administrator, so I use MAMP a great quick install Apache, MySQL and PHP stack. Recently I have found the need for local subdomains like dev.localhost. With a local subdomain you can more accurately simulate your live environment because you can link absolutely to the root of your server. These simple directions are specific to the MAMP configuration, but the same steps can be used on any Apache WAMP and LAMP setups with the exception of the location of the configuration file, so lets get started.
jQuery: How to get links to work in toggled or dynamic content
jQuery still never ceases to amaze me. The developers of this fantastic library seem to have thought of everything, and the only real challenge for us end users is hunting through the API. Recently I was tasked with creating slide out toggle boxes that had links embedded within them. The problem was that the animation would be triggered before the links, thus rending them useless. Luckily like many things with jQuery the fix is simple and I will demonstrate with two examples.
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
Fancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.
Google Maps api and iPad/iPhone zoom and scale issues when orientation is changed
I recently bought an iPad and I’m absolutely loving it. It also happened to coincide with an exciting project that I’m working on that requires the Google maps API to work on an iPad. The project required a full screen map, but when switching from landscape to portrait or vice versa the zoom level would be off. The Google maps controls would also be off the page, page graphics were also blurry due to being zoomed, even the Google Map itself was blurry. After much tweaking, fiddling and scratching my head, the fix turned out to be quite simple to fix.
Clearing the jQuery animation queue
Ever see sites where a jQuery animation happens over and over when you rollover or click it multiple times. It’s almost as if the animations are stacking on top of one another in a queue and executing one by one, and guess what? That’s exactly what’s happening. Not to worry though, there is a simple and easy way to fix this.
3 easy methods to create dotted or dashed lines in Photoshop
Dotted or dashed lines can be a great design element and easy to achieve with a bit of CSS, but creating a lot of them in Photoshop mockups can be time consuming and frustrating. There are 3 simple ways to create dotted or dashed lines in Photoshop. The first one is the way a lot of people probably do it and that’s by doing it with the pencil tool dot by dot and then duplicating the layer. This is slow but there are ways to speed up the process. The 2nd method is achieved by using the brush palette spacing settings. The 3rd method is uses custom patterns. This tutorial will cover all three methods with the Mac/Windows shortcut keys needed to speed up the process.
Using custom CSS and Javascript in WordPress posts
Today while writing The secrets to using custom web fonts I ran into a bit of a snag. I wanted to show several CSS driven examples within the post, but the WordPress editor would remove anything I added. I have dealt with this issue in the past, usually in a clunky manner or even hosted separate example pages. This time though I really wanted the font examples to show up within the actual page content and I didn’t want to add more styles to my WordPress theme. The method I used is remarkably easy and can be implemented in about two or three minutes.
The secrets to using custom web fonts
If you are a web designer then you’re already fully aware of the limitations surrounding the usage of fonts on the web. For years we have basically had two reliable options, use a standard web based font that is included on most operating systems with a few fall back fonts, or images. For headlines, custom fonts and anything fancy images were the only way to go, but that’s all about to change.
Creating email newsletter margins with tables
This may seem painfully obvious to some, especially the more seasoned old school table based web designers out there, but I’m still amazed at how many email newsletters don’t render properly in my inbox. Remember when it comes to email newsletters tables are king and web standards go out the window! It sucks, but that’s the way it is, so lets move on.
