Kreatifa Media: JS | Kreatif Media Solution

Tutorial Geolocation and Yahoo’s APIs to build a simple weather webapp

Saturday, May 19, 2012

DEMO - DOWNLOAD - SOURCE

Obtaining an Application Key

Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.

The Idea

Here is what we need to do in order to display our weather forecast:

First we’ll use the Geolocation API supported by modern browsers. The API will prompt the user to authorize location access and will return a set of GPS coordinates;
Next, we will issue a request to Yahoo’s PlaceFinder API, passing the above coordinates. This will give us the name of the city and country, and a woeid – a special ID used to identify the city in weather forecasts;
Finally, we will issue a request to Yahoo’s Weather API with that woeid. This will give us current weather conditions, as well as a forecast for the rest of the current and the next day.

Create Slideshow Using Jmpress.js ( 3D Effects )

Thursday, April 5, 2012

Demo - Download - Source

The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides.

Impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.
The icons used in the demo is by Artcore Illustration and they are licensed under the
Creative Commons BY-NC-ND 3.0 license.

How to Create Responsive Horizontal Layout with Several Content Panels

Monday, April 2, 2012

Demo - Download - Source

Tutorial how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.
We will be using a couple of useful jQuery plugins:

In the demo we are using Charles Darwin’s The Origin of Species by means of Natural Selection, 6th Edition which you can find as an e-book on Project Gutenberg.

Tutorial jQuery Photo Viewer with Glisse.js

Monday, March 5, 2012

Demo1 - Demo2 - Download - Source

Responsive and Fully Customizable jQuery Photo Viewer with Glisse.js

The transitions between two pictures entirely assumed by CSS3.

Features

Keyboard navigation
Fully CSS Customizable
Animated with CSS3 keyframes
7 different transition effects
Scale to the viewport
Fullscreen support
iPad & iPhone ready (soon a fully Android support)

Warning

This plugin uses a lot of new CSS3 features like keyframes. It’s definitely not a good idea to uses it on a general public website for the time. But my goal -if the plugin has good returns- is to make a fully compliant plugin, using javascript animation on old browsers. So stay tuned.