Best jQuery Core Java Script Plugins & Tutorials with Demo

    Formbuilder.js : Graphical Interface to build Webforms

    September 26, 2013 | Core Java Script, Drag & Drop, Forms, jSON
    Formbuilder.js : Graphical Interface to build Webforms

    Formbuilder is a graphical interface for letting users build their own webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

    As of right now, Formbuilder only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users’ responses is all up to you. I’m planning on releasing a Rails gem to handle this logic, but the ETA on that is pretty up in the air. If you’d like to help, feel free to reach out.

    Read More Demo

    rasterizeHTML.js : Renders HTML into the browser’s canvas

    September 21, 2013 | Core Java Script, HTML5
    rasterizeHTML.js : Renders HTML into the browser's canvas

    Draw a page/an HTML string/a Document to the canvas.For security reasons rendering HTML into a canvas is severly limited. Firefox offers such a function via ctx.drawWindow(), but only with Chrome privileges.

    To cope with the existing limitations, rasterizeHTML.js will load external images, fonts and stylesheets and store them inline via data: URIs or inline style elements respectively.

    Read More Demo

    Pixi.js : Super fast HTML 5 2D rendering engine

    September 21, 2013 | Animation, Core Java Script, HTML5
    Pixi.js : Super fast HTML 5 2D rendering engine

    Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. Also its fast.

    Features:

    • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
    • Canvas renderer (Fastest in town!)
    • Full scene graph
    • Super easy to use API (similar to the flash display list API)
    • Support for texture atlases
    • Asset loader / sprite sheet loader
    • Auto-detect which renderer should be used
    • Full Mouse and Multi-touch Interaction
    • Text
    • BitmapFont text
    • Multiline Text
    • Render Texture
    • Spine support
    • Primitive Drawing
    • Masking
    Read More Demo

    Creative Loading Effects with CSS3 & JavaScript

    September 19, 2013 | Animation, Core Java Script, CSS2 / CSS3.0
    Creative Loading Effects with CSS3 & JavaScript

    Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.

    Read More Demo

    Sliding Horizontal Layout with CSS3

    September 11, 2013 | Core Java Script, CSS2 / CSS3.0, Slider
    Sliding Horizontal Layout with CSS3

    Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.

    We use CSS 3D Transforms for moving the lateral sections. In a browser that does not support 3D Transforms (or where JavaScript is not enabled),

    Read More Demo

    _select : Select the content of any DOM element

    August 31, 2013 | Core Java Script
    _select : Select the content of any DOM element

    This function extends the native JavaScript select() (which only works on input and textarea) so that it can be used to select the content of every DOM element you want.

    Read More Demo

    Transitions for Off-Canvas Navigations with CSS3 & JavaScript

    August 29, 2013 | Core Java Script, CSS2 / CSS3.0, Menus
    Transitions for Off-Canvas Navigations with CSS3 & JavaScript

    Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.

    Read More Demo

    Multi-Level Push Menu in JavaScript

    August 14, 2013 | Core Java Script, Menus
    Multi-Level Push Menu in JavaScript

    Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

    Read More Demo

    Royal 3D Carousel in JavaScript & CSS3

    August 14, 2013 | Carousel, Core Java Script, Popup Window, Premium, Responsive
    Royal 3D Carousel in JavaScript & CSS3

    Fully responsive 3D carousel that allows to display media or HTML content with an unique and original layout. It’s perfect for presentations, for anyone who wants to obtain a great impact on their visitors.

    Features:

    • responsive / fixed and fluid width.
    • Support for images and HTML content.
    • Support for multiple categories and each category can have it’s own set of thumbnails.
    • Original media lightbox that we have coded, with image, vimeo, youtube or iframe support.
    Read More Demo

    Patternizer.js : Canvas script to Generate Stripe Patterns

    August 13, 2013 | Core Java Script
    Patternizer.js : Canvas script to Generate Stripe Patterns

    Patternizer.js is a canvas script to generate stripe patterns.Patternizer.js adds a patternizer() method to canvas elements. It can receive one parameter, which is an options object. In that you can specify a stripes array, and a background color.

    Read More Demo