Clint McKoy

I needed to utilize screen zoom today on my Mac but couldn’t find it. After much searching, I discovered that the screen zoom settings are located in a different place on Lion. I was also surprised to discover the functionality has changed drastically. You can find the new settings here (play around with the various options):

System Preferences > Universal Access > Seeing > Zoom in window > Options

Then, be sure to check the box that reads: “Use scroll wheel with modifier keys to zoom”

I’ve come across this issue multiple times when trying to get the height of a content area (that contains images) using Javascript. In Webkit browsers (like Safari & Chrome), the height you retrieve will be minus any image heights, therefore not a true height. The reason for this is the order in which webkit loads images. The simple solution to this issue is to make your call using window.load instead of document.ready, like this:

$(window).load(function(){
   var elementHght = $('#content').height();
});

(Source: stackoverflow.com)

For some reason, Safari on my new iMac at work doesn’t initially focus on the address bar. As a work-around, I’m using the keyboard shortcut which is: Command + L (in case anyone else wanted to know).

A few weeks ago I wrote a post about how to target Firefox in your CSS. Today I had an unusual issue that was appearing on Webkit browsers only and needed a quick fix. I came across a smart way of doing just that using a media query. Here you go:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*webkit only CSS goes here*/
}

I found this code on the website: CSS, Javascript, and XHTML Explained.

It seems like I’m needing a list of jQuery easing functions a few times a week.  I finally took the time to compile a list and thought I’d share. You’ll find a list below.

During the process, I also found a cool website with easing demos:  http://goo.gl/IgrXl

jQuery Easing Functions:

• linear
• swing
• jswing
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

(Source: james.padolsey.com)

I’ve come across this issue a few times lately, where the value for a text input will not disappear in IE7 (Internet Explorer 7) by using text-indent alone. This becomes an issue when trying to implement a custom submit button that consists of a background image only.

The solution: Give the input a very high line-height and set the overflow to “hidden”. 

input {
	line-height: 500px;
	overflow:hidden; 
}

But unfortunately, this method does not work on FF (Firefox). You’ll still need to use the text-indent method as well. So, you’re finished product will look something like this:

input {
	text-indent: -9999px;
	line-height: 500px;
	overflow:hidden; 
}