Author: underblob

Fading Images with jQuery

I just started using the jQuery javascript framework to replace my home-grown animation functions. It is really helpful in speeding up development and is cross-browser compatible so it also cuts down on QA testing. Below is a little bit of jQuery code for swapping out images:

function imgin () {
	$( '#img-id' ).attr ( { 'src': 	new_img_url } );
	$( '#img-id' ).load ( function () {
		$( '#img-id' ).fadeIn ( 1000 );
	} );
}
$( '#img-id' ).fadeOut ( 200, imgin );

Start by setting a 200 millisecond fadeOut on the current image with a callback to imgin function. imgin sets the src attribute (via the attr method) of the image to load the new image file (via new_img_url variable). Then set a load event on the image to trigger fadeIn after the image is loaded.

Links

docs.jQuery.com/Effects

Shopify Design Upgrades

Shopify is a hosted e-commerce solution that I have been using for a couple years now for clients that want to sell their products online. It is great software with quick setup and really intuitive and easy to use Admin. They offer a variety of pre-canned themes to choose from so a store can be set up in a few hours by anyone. If you know HTML/CSS and aren’t afraid of a little bit of programming, you can also create your own customized themes. So it is a perfect choice for smaller companies without a million dollar budget to hire a web designer to get a custom-branded storefront up on their website.

Shopify just released a whole bag of tricks for theme designers that really extends the flexibility of theme design. Previously, the theme structure was set to a fixed number of templates that could be used in the theme… collections, products, informational pages, etc. They’ve just added the ability to add child templates that you can specify on each product, collection, or page in the Admin. For example, 3 different types of products need to have different visual treatment and layout: shoes, pants, shirts. Instead of trying to jam a bunch of conditions into one product template to make it work, you can create 3 additional templates (product.liquid is the default template):
product.shoes.liquid
product.pants.liquid
product.shirts.liquid

The same type of branching is now available for the entire layout as well using the new layout tag.

This is only one of the great new features that was added in this round of upgrades. Read more about the other just-as-great additions on the Shopify blog: blog.shopify.com/theme-customization-for-everyone


URL decode PHP with JS — Removing the Plus Sign

PHP functions for creating and decipering URL-safe strings are urlencode and urldecode.

Javascript functions for creating and deciphering URL-safe strings are escape and unescape.

PHP’s urlencode replaces spaces with + and Javascript’s escape replaces spaces with %20. So if you are decocing a string from PHP with Javascript, you have to replace all the + in the string with spaces using the JS string.replace function. Since + is an operator in Javascript, it has to be escaped with a backslash ( \ ) for the function to execute without error. The g flag has to be included to replace all instances of occurance ( g = global):

string.replace ( /\+/g, ' ' );

Links

urlencode
urldecode
escape
unescape
string.replace

Crabacon Mango Salad

  • 1 package artificial crab meat (flake style works best)
  • 3 strips of cooked turkey bacon, chop up
  • 1/2 bunch of cilantro, fine chop
  • 1/2 mango, dice
  • 1/4 juicy lime squeezed juice (1/2 or whole lime if is a dry one)
  • 3 tbsp olive oil mayo

Mix that up in a mix bowl, salt and pepper to taste. Serve on toasted whole grain English muffin or sandwich thin.

Adding .liquid to DW Code View

I’ve been using Shopify a lot recently as an easy to use hosted e-commerce solution. They have a handy theme editor called Vision that lets you create your own custom theme on your desktop and then upload it to your Shopify account. It is pretty easy to use if you are familiar with markup and CSS. They also have their own markup language for their application, called Liquid with a helpful wiki.

The only problem I find is that when I’m editing the .liquid files in Dreamweaver in Code View, the color coding on the markup isn’t there… it’s just all black text. Enter this handy Adobe Tech Note to the rescue: http://kb2.adobe.com/cps/164/tn_16410.html