Webtricks: Brian's Developer Blog
Useful tips for web developers, bloggers, and WordPress users
Website accessibility is getting more and more important these days. One of the key factors in web accessibility is the ability to access all of the features of the website with the keyboard. If any element is clickable with a mouse, it needs to be reachable by keyboard using the tab key and return/enter to … Read more
I had a very common problem for which I could not find a good CSS solution. Namely, I wanted my website footer to extend to the bottom of the browser window, regardless of how much (or little) main body content I had. What I wanted was this: What I was getting was this: There are … Read more
I have a client who wanted pages to fade in on load and fade out when leaving. This effect also hides some of the messiness that can appear in the browser (partially loaded images, JavaScript, etc.) as the site is loading. I thought this would be simple. There are lots of documented solutions online, which … Read more
Drop down menus on iOS and Android (or any devices with touch screens) can be really problematic if the top-level menu item is also a link. The problem is due to the fact that touch screen devices have no hover, so the user has to touch the top-level menu item to see the sub-menu items, but … Read more
I recently had a project where I wanted to stop the “Go” button on the Android and iOS popup keyboard from submitting a form on my web application. Why would anyone want to do this? In my case, I wanted to prevent accidental form submission (or “butt-dialing”) on my app. I had implemented a “swipe-to-save” … Read more
A client requested a “slot machine” hover effect for their social network buttons. When you hover on the icon, it moves up, sort of like in a slot machine, and changes color. Here’s an example of what I’m talking about: It turns out that this effect can be accomplished with some clever CSS! No JavaScript … Read more
I was given the task to fix a website bug of the following nature: There is an iframe containing a “submit” button. When the Submit button is pressed, new content is loaded into the iframe and the size of the iframe gets much larger. Unfortunately, the containing window does not get larger and ugly scroll … Read more
The cool little icon that shows up in each web page’s browser tab is called a “favicon”. Adding this tiny detail really gives your website a professional appearance in the browser. Here’s how to do it – and this works with older versions of IE, unlike other solutions I’ve found on the Internet! If You’re … Read more
Often times you’ll have an image, perhaps a logo, that you want to use on a website, and you’ll want that image to have a transparent background. Here’s how to make an image have a transparent background using a free drawing program called Paint.net (note this solution works on Windows only). 1. Download and Install … Read more
Are you tired of using the same old boring web fonts? Without describing all of the browser compatibility problems in detail, here’s a quick and dirty way to embed custom fonts in your websites. This really takes the appearance of your site to the next level! First, you need a font. A great source for … Read more