Using the Google Maps API to Get Locations from Zip Codes 14 Sep 2012 rluna Google offers many API’s, among them is the Maps API. In this example we’ll show all the code necessary to hit Google with a zip code to get the location in the form of City, State and Country. First thing to do is to reference Google’s Map API: ... Next is a little form used to enter your zip code: ... You can see that I have a link which fires a function called “getLocation()” – below you’ll find that function and the related code: Thats it – open up the console in Chrome and notice the output as you enter different zip codes.
Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
How to Create a Responsive Image Slider in jQuery and CSS3 Topic: jQuery (flexslider) / CSS3Difficulty: IntermediateEstimated Completion Time: 30 mins Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3. STEP 1 – Markup The slider html markup is very simple. Next we’ll include the jQuery library and the FlexSlider plugin. STEP 2 – Basic Styles First we will add some reset styles to clear all the margins, paddings, etc. and keep consistency trough all browsers. Then we will hide the slides to avoid jumping of the images during the page load. To finish this step we will add some styles to clear the floats from the slides. STEP 3 – Container Styles For the container we will set the background color to white and add a small shadow using the CSS3 property “box-shadow”. I’ve set a minimum and maximum width for the slider. STEP 4 – Next and Previous Arrows The arrows will be added using the “:before” pseudo-selector. STEP 5 – Slider Controls