I’m not too sure how many of you have come across this but I’m thinking of this as A Good Reminder Post also known as the Public Service Announcement and at the very least a Very Curious Quirk of IE (in particular IE9 and below).
Sometimes when there is already so much going on in a project you might not realize what’s going on so let’s go through the typical scenario.
Sample code of a simple dropdown toggle link
Working example of console object in Chrome
Development tools for desktop browsers are as easy to access as right-clicking and selecting ‘Inspect Element.’ For mobile browsers its a little less intuitive to look at the code directly. Of course there are always different tools for testing responsive layouts. Some of these render in the browser you are testing which helps with basic functionality but doesn’t show the complete picture. Sometimes when you test on the actual device, the behavior is slightly different from the behavior you see on the desktop browsers. I’ve run into these issues with fonts rendering differently and mouse/touch events not working properly.
Using Safari with Xcode’s iOS simulator and/or your device can help. This little trick has helped me a lot over time and I don’t think its as well known about. It really is only a matter of using tools (most likely ones you already have on your machine) to work together. This is more of a tool for Mac users working on iOS devices. Great thing about this you can easily test internal and public sites.
If you love obscure IE problems than this is just the right post for you. The other day I found this nagging issue that just would not go away so let’s talk about it.
A fun little css property that adds some dimension to a design is opacity. Opacity allows for the background to range from transparent to opaque depending upon the value. Rending certain areas semi-transparent allows for a cool layered look that creates some pow.
Some might be discouraged when you first noticed that using the opacity property creates any text within a div to also be semi-transparent. Fear thee not, there’s a solution to that!
Showing and hiding content can be an elegant way to create interactions with a user and still maintain simple designs. This can be accomplished in a variety of ways however I’ve found that using the CSS3 transition property is the easiest approach and also allows for the smoothest animation on hover actions.
Tooltips are a useful way to provide additional information to the user without requiring the user change their current page.
A simple approach for tooltips is to create a link with a title attribute or a hidden div within the page that will display when the designated link is hovered or clicked. This will certainly get the job done if you have a finite number of tooltips that you need for a page. However the difficulty with this approach becomes apparent when:
- You need the additional information to come from an external page
- You need the same information to appear multiple times throughout a site
Let’s face it as programmers, you want to reduce the amount of upkeep on a site. Just imagine if you need to update each tooltip that appears on each page. The great thing about this approach is that if you ever need to make additional updates, you can do it all from one glossary page and each of the tooltips will automatically be updated as well.
So lets get to it! I’ll start off with the basic simple tooltip and expand upon that approach until we get to our tooltips that are being pulled from an external page.