Archive for 2013

    A simple jQuery powered image slider

    A simple jQuery powered image slider

    This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

    Considering the apparent complexity of Orman’s design, this implementation came out relatively light-weight; I used sprites for the nav links and pager and we’re obviously using Google’s CDN to serve jQuery.

    FileReader.js : lightweight wrapper for the JavaScript FileReader interface

    FileReader.js : lightweight wrapper for the JavaScript FileReader interface

    A lightweight wrapper for the JavaScript FileReader interface.FileReader is a JavaScript interface that allows you to read local files as binary. This is available in supported browsers when a user drags and drops files into a browser window or selects files from an input with a type of file.

    FileReader.js does not require any other libraries. If you do use jQuery, there is a small plugin wrapping up the functionlity though!

    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    The Responsive Gridfolio has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow).

    The Responsive Gridfolio is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

    UI Anglepicker : jQuery UI Angle Picker Widget

    UI Anglepicker : jQuery UI Angle Picker Widget

    A jQuery UI widget for selecting angles.JavaScript and CSS is based on LayerStyles.

    Youmax 1.0 : jQuery plugin Show complete Youtube channel on your website

    Youmax 1.0 : jQuery plugin Show complete Youtube channel on your website

    This is NOT another small youtube widget or a video box to be shown on the right side of your website. This is the real deal. Now show your actual complete youtube channel on your website just like its shown on youtube.

    Youmax plugin will display your channel uploads, playlists and a featured playlist that you may choose. Users can browse through your playlists and uploads and watch videos they like. Introducing Youmax 1.0! Check out the demo!

    jWebAudio: jQuery Web Audio library for games

    jWebAudio: jQuery Web Audio library for games

    Web Audio seeks to process and synthesize audio in web applications. jWebAudio keeps the technical details of Web Audio under the hood and makes it easier to control your audio.jWebAudio focuses on audio control of web games and provides functions that most frequently used in game developing, which makes it a light-weight (9.0kb for minified standard version) but well-featured audio library.

    With jWebAudio, you can add sound effects (e.g.: telephonize) in a simple way. And if you want to make your own sound effects, you can achieve this by setting Biquad Filter parameters.

    With 3D sound effect, you can set parameters like position and velocity of the sound source, making it feel like being in a 3D environment.

    jui_datagrid : jQuery Ajax Datagrid plugin

    jui_datagrid : jQuery Ajax Datagrid plugin

    jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

    Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

    Swipeshow : jQuery touch-enabled Slideshow

    Swipeshow : jQuery touch-enabled Slideshow

    The unassuming touch-enabled JavaScript slideshow.

    • Showcase anything. You’re not limited to images: any markup will do.
    • Touch-enabled. Swipe away on your iPad, iPhone, Android device, or anything touch-enabled.
    • Style-it-yourself. The default CSS has nothing in it except laying out your slides side-by-side. You’d be in charge of figuring out how to add borders or anything else you like.
    • Hardware-accelerated. Animations are done via CSS transitions, which will render smoothly on mobile devices. It will automatically fall back to frame-by-frame animation when transitions aren’t available.

    Parallaximus : jQuery Responsive 3D Parallax Widget

    Parallaximus : jQuery Responsive 3D Parallax Widget

    Easy to use javascript plugin which allows you to decorate your site with responsive 3d parallax widgets (banners), each of which is a pleasure to interact with not only on desktop browsers but also on modern mobile devices.

    Features:

    • Cool 3D effects. Parallaximus uses CSS3 3d transforms for all browsers that qualitatively support them.
    • Responsive design. Widget size can be dynamically changed down to mobile devices in two different ways.
    • Playful mobile support. Totally new way to interact with parallax widget on modern mobile devices.
    • onMouseout centering easing. Smooth levelling animation when mouse leaves Parallaximus.
    • Cross-browser & cross-platform. IE7+, Firefox, Chrome, Opera. Windows, iOS, Linux.
    • Unminified Source. You will recieve full unminified version of js code.
    • Remote controlling with API. Options and API are well-documented and easy to use.

    Sketch.js : JavaScript Creative Coding Framework

    Sketch.js : JavaScript Creative Coding Framework

    Sketch.js handles all that tedious but necessary stuff that would normally slow you down – setting up an animation loop, creating and managing a graphics context for Canvas or WebGL, cross browser and device event binding and normalisation for mouse, touch and keyboard events, handling window resizes… You get the idea.