Responsive drop-down navigation

Are you in need of multi-level navigation? And that too responsive which fits well in all devices? In most cases, you design a drop-down menu using unordered  lists. But what do you do to make it usable on small and/or cursor less screens?

I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.

The technique consists of three main parts:

  1. Simple drop-down navigation based on HTML and CSS;
  2. Responsive implementation using media queries;
  3. Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Continue reading

Motio – jQuery Plugin for Sprite Based Animations & Panning

Motio is a jQuery plugin for simple but powerful sprite based animations and panning. Motio is called on an element representing animation container, where animation is delivered as a CSS background image.

In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 1000 x 100 pixels big, the container should be 100 x 100 pixels big. In panning, container size doesn’t play any role, just the background image should be seamless.

Integrated Motio on/off methods are using jQuery $.Callbacks API, which is in jQuery sice 1.7+. If you can’t use newer versions of jQuery, you can go for jQuery bind/unbind methods called on a frame element, with ‘motio:’ prefix on all event names.

Requirements: jQuery Framework
Downloadhttp://darsa.in/motio/

Photobox – A CSS3 jQuery based Image Gallery Plugin

Photobox is an Image Gallery plugin built with CSS3  & jQuery. It is beautiful and posses a great look & feel. Both the script & CSS are only 7k each. It uses silky-smooth, hardware accelerated, CSS3 transitions and animations for better performance.

Pros:

It works in all major browsers including IE9 and above. But on IE the experience is not as good as other browsers because of incapability of its rendering engine. Image can be zoomed in and out with mousewheel and navigated using mousemove to move around. The bottom row of thumbnails can be navigated by mouse movment. It supports keyboard keys for navigation and closing the gallery view.

Cons:

I felt Photobox that the photo loading is too slow compared to other gallery plugins.

photobox-jquery-css

Demo:

http://dropthebit.com/demos/photobox/

Use Maskew to Skew the Shapes of Elements

Maskew, created by by Dan Motzenbecker, is a JS library that skews the shapes of elements without distorting their contents. It is mobile friendly as well. There is no dependencies but a modern browser is a requirement. It is less than 5k in size. Maskew is released under MIT License. You can download it via Guthub for free.

Optionally there is a jQuery plugin for Maskew too.

maskew

Use it:

var maskew = new Maskew(document.getElementById(‘skew-me’), angle);

With jQuery:

var $maskew = $(‘#skew-me’).maskew(angle);

Skew it:

maskew.skew(9);

// or with jQuery:

$maskew.maskew(‘skew’, 20);

// or:

$maskew.maskew().skew(20);

Demo: http://oxism.com/maskew/

Preview URL on Many Mobile Devices Simultaneously

Remote Preview allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Enter, and new URL gets automatically loaded on each device. It works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS. It was built for the Helsinki Device Lab for fast site previewing.

Remote Preview works by making an ajax call every 1100ms to check if the url in the ‘url.txt’ file is changed. If it is, the script will then change the src attribute of the iframe and load a new page into it. If there’s no changes, the script will just keep polling the url.txt until something changes. Remote Preview allows very fast previewing of different URL’s to check for possible layout problems, which can then be debugged using various other tools depending on the platform where they occur.

remote-preview

Requirements: jQuery Framework
Demo: http://viljamis.com/blog/2012/remote-preview/
License: License Free

 

Collie – Create Highly Optimized Animations Using HTML5

Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.

Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display.

collie

Requirements: JavaScript Framework
Demo: http://jindo.dev.naver.com/collie/
License: LGPL License

Rotating DIV block using jQuery


I have taken this article from csstricks.com and is written by By Chris Coyier . Sometimes we need to give an interactive look to a webpage and this could be one of the good option for that. If you have a simple idea about the html,CSS and jquery ,then you can use this features in your webpage.

To use the rotating div block in your webpage you have to follow three steps

1. HTML Section
2. CSS Section
3. jQuery Section

Click here to download the demo file.