Thursday, May 16, 2013

Change Background Image with a Fade Transistion Using CSS and jQuery

I came across a question recently regarding how to use a 'fade' effect when changing/rotate through various background images. The sites I've been working on lately seem to all utilize large background imagery and I have written several custom background rotation scripts to accomplish rotating homepage hero type effects with background images. The jQuery involved is something for another posts, but the CSS to achieve a fade effect is very simple.

You can fade a background image using CSS3 transitions. I have accounted for non-CSS3 browsers in jQuery implementations using more complex strategies, but for most applications this CSS3 strategy will do just fine. It will offer a nice fade on compatible browsers and just a plain transition on others.

Set up jQuery to change the background image, but apply the transition style using the below CSS. Anytime the background changes, it will transition according to the CSS3 style.


 #header 
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}

Saturday, May 11, 2013

Using Multiple Google Accounts with Chrome

Google Chrome's ability to keep your history, bookmarks, passwords, and even tabs in sync across devices is awesome, but what happens when you bookmark a great new article for work and you are on your personal computer logged in to your personal Google account? You get to work the next day and have to sign out of your work Google account in Chrome and sign in to your personal Google account which is time consuming and too much trouble. What if you could take your work Chrome browser home with you and have access to your personal Chrome browser at work? It would be amazing right?

Well, it is possible and it truly is amazing. Imagine RDP'ing into your work computer just to access a saved login and bookmark... forget it! Now you can just switch Google accounts and Chrome and you are practically on your work computer using your work browser. How is it done? Pretty easily actually!

To setup and switch between multiple Google Account on Google Chrome:
  1. Login to Chrome with Google Account A.
  2. Click the Options/Tools/Settings icon Chrome menu.
  3. Click 'Add New User' under the 'Users' heading.
  4. Login with Google Account B.
  5. Click Google Account B in your User list and click 'Edit' to set a custom icon and account name.

  6. Switch back to Google Account A by clicking the (newly appearing) icon in the top left corner of Chrome and selecting Google Account A.
  7. Go back to the User settings and click on Google Account A and then 'Edit' to change the icon and account name, just like Step 5.

  8. You can now easily switch between accounts by clicking the icon at the top left corner of Chrome.
Limitations:
  1. You cannot have multiple accounts open in the same window. Each account must have a dedicated window.
  2. You cannot drag tabs between Chrome windows that are logged in on different accounts.

Tuesday, May 7, 2013

Finding Latitude & Longitude on Google Maps

Why is finding Latitude and Longitude with Google Maps so annoying? Why do we even need it anyway? Well, sometimes the application calls for it and we must dig in and discover the lat/long coordinates of a location on a map... a Google map. There are ways to do this and everyone seems to have their own way, but there is a magic button that can do this for you so easily it will make you embrace lat/long all over again!


  1. Simply drag this bookmarklet to your bookmarks bar.
  2. Visit Google Maps and find your point of interest whichever way you like.
  3. Right click and center the map on that point.
  4. Click the bookmarklet and you'll be presented the Lat/Long.
The script ties in with Google's scripts and returns the lat/long of the center point of the map. This has been incredibly useful for me and I suggest keeping it handy for that dreaded day you need to look up multiple lat/longs for some project of your own.



Credit goes to: Ian at iTowler



Friday, May 3, 2013

ColdFusion cfqueryparam MS Access Data Types

Once you get comfortable with it, ColdFusion's cfqueryparam is an excellent tool. It can enhance security, tighten up code, and conveniently ensure the correct data types are being used in your database statements. If you have looked in cfqueryparam at all, you've surely noticed that Adobe provides an excellent cfqueryparam cross-reference of data types for all sorts of databases... except MS Access.

I inevitably ran across the need to use cfqueryparam with a MS Access database and was struggling to match the data types. Access data types can be obnoxious, especially when the db designer has taken it upon himself to establish an obscure Access data type for every column. Thankfully, cfSearching provided a helpful table cross-referencing Access data types with cfqueryparam data type attribute values. I can vouch for the note that "when using the Unicode driver, the correct type for MEMO fields is CF_SQL_CLOB (not CF_SQL_LONGVARCHAR). "

Credit goes to cfSearching for the cross-reference, but here it is in case their page is down or goes away for whatever reason... it would be a shame to lose this information!

ColdFusion                  Jet                     MSSQL
CF_SQL_BIT                  Yes/No                  bit
CF_SQL_DECIMAL              Decimal, Currency       decimal, money, small money
CF_SQL_FLOAT                Double                  float
CF_SQL_INTEGER              Long Integer            int
CF_SQL_LONGVARBINARY        OLE Object              image
CF_SQL_LONGVARCHAR          Memo                    text, ntext
CF_SQL_MONEY                                        Double                      
CF_SQL_REAL                 Single                  real
CF_SQL_SMALLINT             Integer                 smallint
CF_SQL_TIMESTAMP            Date/Time               datetime, smalldate time
CF_SQL_TINYINT              Byte                    tinyint
CF_SQL_VARCHAR              Text                    varchar, nvarchar, sysname