Webtricks: Brian's Developer Blog
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
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 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. If You’re Using WordPress… WordPress provides a way to specify the favicon. Log into your site and go to Appearance … 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