As the size of a web page is very important for the loading speed (specially on mobile), there are already lightweight alternatives to these full-featured frameworks (Zepto is the most popular one). Minified.js is a very strong alternative to these frameworks and it comes with an impressive size, less than 4kb minified.
Continue reading
Web Development tutorials & tips blog
Web Development tutorials & tips blog
jQuery
July 16, 2013
JavaScript , jQuery
no responses
# Alternative To jQuery, Extras, framework, Minified.js
Pop Easy is a jQuery plugin for quickly creating completely customizable modals. Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.
There are options for customizing the animation used when the modal appears, its speed, the opacity, if it’ll be opened onLoad and more. Considering the size, the plugin is very useful. One thing seems to be missing for now is the built-in ability to load remote data (Ajax).
The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos.
Smint is a jQuery plugin that can turn any given element into a sticky menu instantly.
It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.
The plugin has support for smooth scrolling (which is usually used in one-page websites). The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.
For this post, we’ve gathered some jQuery plugins that will help you incorporate this into your next project.
May 15, 2013
jQuery
no responses
# Forms, Goodies, noUiSlider, Range, Range Slider For jQuery, Touch
jQuery UI’s slider widget have all the features needed for a jQuery range slider: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.
Another one is noUiSlider. It have all the things needed and with a size of 2.7kb. There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.
Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Website: http://refreshless.com/nouislider/
Download: http://refreshless.com/nouislider/download/
Windows is a lightweight jQuery plugin for nicely scrolling the full-screen. It provides a simple and handy API for managing the page/content position to ease the browsing experience.
The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Website: http://nick-jonas.github.io/windows/
Download: https://github.com/modernassembly/windows/
MixItUp is another great plugin to handle such tasks that deserves to be bookmarked. There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.
While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.
The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast. There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.
Requirements: jQuery
Compatibility: All Modern Browsers
Compatibility: All Modern Browsers
Website: http://mixitup.io/
Demo: http://mixitup.io/demos/cards
Download: https://github.com/barrel/mixitup
April 3, 2013
jQuery
no responses
# Browsing, Drag & Dropping Elements, Drag 'n' Drop, Draggabilly, Goodies
Draggabilly – a standalone and lightweight JavaScript library for “Draggable” and “Droppable” elements.
The element to be dragged can be limited to have that feature in a container and there are callbacks on each event (start, move, end) which can also return the position/location of the item.
It works in all modern browsers (IE8+) and there is built-in support for touch events.
Requirements: No Requirements
Compatibility: All Modern Browsers
Compatibility: All Modern Browsers
Website: http://draggabilly.desandro.com/
Download: http://github.com/desandro/draggabilly
The 1st of April is getting very close and I’m sure we’ll see lots of fake news or fun stuff going around on websites that day. For anyone willing to implement a quick joke to their websites, Fool.js, a jQuery plugin reaches to help.
The plugin can feature various jokes including “falling scrollbar”, “displaying annoying videos”, “hiding random elements”, “turning the page upside down” and more. All of these can be called with a single jQuery function that can be attached to any event.
There is also a pure CSS alternative: aprilFools.css which can again perform some crazy stuff.
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Website: http://fooljs.com/
Website 2: https://github.com/wesbos/aprilFools.css
Download: https://github.com/idiot/Fool.js
February 27, 2013
jQuery
no responses
# Forms, Goodies, HEX, HSL, jQuery Color Picker Plugin, RGB, Spectrum
Spectrum is a jQuery colorpicker plugin that probably comes with allВ theВ features you are looking for. It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the
input[type=color]
of HTML5.
The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.
It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.
Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.
Spectrum can be customized with CSS and it works on mobile as well.
Compatibility: All Major Browsers
Requirements: jQuery
Website: http://bgrins.github.com/spectrum/
Download: http://github.com/bgrins/spectrum
Requirements: jQuery
Website: http://bgrins.github.com/spectrum/
Download: http://github.com/bgrins/spectrum