ReadRemaining.js is a jQuery plugin to tell your readers how long they’ll need to get through all of your article.
The post ReadRemaining.js jQuery plugin appeared first on Freebiesbug.
ReadRemaining.js jQuery plugin
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Monday, May 18, 2015
Thursday, April 23, 2015
jQuery Hero Slider
A full-width, responsive and easy to customise slideshow built with jQuery. A tutorial by Codyhouse.
The post jQuery Hero Slider appeared first on Freebiesbug.
jQuery Hero Slider
Saturday, April 18, 2015
15 jQuery Plugins To Make Smart Sticky Elements
It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar. This allows for the element to be readily available regardless of the user’s position.
Called a sticky element, this can be achieved just by using CSS, however, using this method, the effect is not reliable across multiple browsers. That is why we’ve put together a handful of JS libraries and jQuery plugins that will allow you to achieve this particular UX design with little to no hassle.
1. Waypoints
Waypoints is a library to execute a function based on the element position in the viewport. It comes with an shortcut function that makes that element “sticky”. You can customize the scrolling direction — up, down, and even right and left — as to which the element should stick within the viewport.
- Dependency: None / jQuery (optional)
- License: MIT license
2. Sticky Kit
With StickyKit, not only can you make an element stick within the viewport, but you can also make them stick within the parent element you designate to multiple elements at once. The plugin also comes with some advanced settings including custom Events and Triggers.
- Dependency: jQuery
- License: WTFPL
3. StickyJS
StickyJS is an easy-to-use jQuery sticky plugin that does what it says. The plugin works out of the box. Yet, if you need some customization, it comes with Options/Settings, Custom Methods and Events.
- Dependency: jQuery
- License: MIT license
4. HeadRoom
A sticky site header will take up valuable vertical space that makes a difference when you view the site on mobile. Headroom is a JavaScript library that will make your sticky header smart; the header will be hidden when users scroll down the page and show up upon scrolling up.
- Dependency: None / jQuery (optional) / Angular (optional)
- License: MIT license
5. MakefixedJS
Makefixed lets you make elements be fixed dynamically as users scroll the page. Just call the makeFixed() function on the element you want fixed. Check the demo to see it on action.
- Dependency: jQuery
- License: GPL
6. MidnightJS
Midnight allows you to stick multiple headers / elements and switch between them based on their position within the document (DOM tree), check out the demo to see what I mean. In addition you can change their color on the fly simply by adding the data-midnight attribute with the specified color name.
- Dependency: jQuery
- License: MIT license
7. ScrollMagic
ScrollMagic has advanced features to add interaction, during a page scroll. You can pin elements from specific scroll positions, add animation based on scroll position, or even make an awesome parallax effect. The demo gives you some insights of what this plugin can do.
- Dependency: jQuery / Velocity.js
- License: Dual License (MIT and GPL)
8. onScreen
onScreen is similar to Waypoints — it allows you to execute functions as the element is entering, leaving, or reaching certain positions within the browser viewport.
- Dependency: jQuery
- License: MIT license
9. jQuery Pin
jQuery Pin is a small jQuery plugin to “pin” or “unpin” elements to a position, when you scroll the page. My most favorite part of this plugin is the option to disable it at certain viewport widths.
- Dependency: jQuery
- License: BSD license
10. Sticky Float
Sticky Float allows us to give elements a fixed position that is relative to its parent. You can set the sticky option according to your needs with the provided parameters and by changing the value. Catch the demo here.
- Dependency: jQuery
- License: Undefined
11. Zebra Pin
Zebra Pin is a lightweight plugin to make any element pin to their container. With this plugin you can add "sticky-ness" to elements in your project like to your navigation, sidebars, headers and footers, or other elements that you want to keep visible when users scroll down. Check out the demo.
- Dependency: jQuery
- License: GPL license
12. HC-Sticky
With HC-Sticky, you can make sticky elements that refer to its container, to any given element, or to the document itself. This plugin has some options that you can adjust to your need, like distance from the top and bottom to start floating, and other options.
- Dependency: jQuery
- License: MIT license
13. Sticky Mojo
Sticky Mojo is a lightweight, fast, and flexible jQuery plugin to make awesome sticky elements. It’s compatible with modern browsers and will degrade gracefully in IE.
- Dependency: jQuery
- License: MIT license
14. Sticky Navbar
If you want make single page navigation which sticks when one scrolls down, this library is for you.Sticky Navbar will put the navigation at the top of the browser window and highlight the anchor link to connect to the corresponding section on your page. You can also add Animate.css to beautify the navigation effect.
- Dependency: jQuery
- License: MIT license
15. StickyStack
StickyStack will make elements stack with another when users scroll the element and reach the top of the viewport. With this library, your long page will transform into stacked cards.
- Dependency: jQuery
- License: Undefined
15 jQuery Plugins To Make Smart Sticky Elements
15 jQuery Plugins To Make Smart Sticky Elements
It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar. This allows for the element to be readily available regardless of the user’s position.
Called a sticky element, this can be achieved just by using CSS, however, using this method, the effect is not reliable across multiple browsers. That is why we’ve put together a handful of JS libraries and jQuery plugins that will allow you to achieve this particular UX design with little to no hassle.
1. Waypoints
Waypoints is a library to execute a function based on the element position in the viewport. It comes with an shortcut function that makes that element “sticky”. You can customize the scrolling direction — up, down, and even right and left — as to which the element should stick within the viewport.
- Dependency: None / jQuery (optional)
- License: MIT license
2. Sticky Kit
With StickyKit, not only can you make an element stick within the viewport, but you can also make them stick within the parent element you designate to multiple elements at once. The plugin also comes with some advanced settings including custom Events and Triggers.
- Dependency: jQuery
- License: WTFPL
3. StickyJS
StickyJS is an easy-to-use jQuery sticky plugin that does what it says. The plugin works out of the box. Yet, if you need some customization, it comes with Options/Settings, Custom Methods and Events.
- Dependency: jQuery
- License: MIT license
4. HeadRoom
A sticky site header will take up valuable vertical space that makes a difference when you view the site on mobile. Headroom is a JavaScript library that will make your sticky header smart; the header will be hidden when users scroll down the page and show up upon scrolling up.
- Dependency: None / jQuery (optional) / Angular (optional)
- License: MIT license
5. MakefixedJS
Makefixed lets you make elements be fixed dynamically as users scroll the page. Just call the makeFixed() function on the element you want fixed. Check the demo to see it on action.
- Dependency: jQuery
- License: GPL
6. MidnightJS
Midnight allows you to stick multiple headers / elements and switch between them based on their position within the document (DOM tree), check out the demo to see what I mean. In addition you can change their color on the fly simply by adding the data-midnight attribute with the specified color name.
- Dependency: jQuery
- License: MIT license
7. ScrollMagic
ScrollMagic has advanced features to add interaction, during a page scroll. You can pin elements from specific scroll positions, add animation based on scroll position, or even make an awesome parallax effect. The demo gives you some insights of what this plugin can do.
- Dependency: jQuery / Velocity.js
- License: Dual License (MIT and GPL)
8. onScreen
onScreen is similar to Waypoints — it allows you to execute functions as the element is entering, leaving, or reaching certain positions within the browser viewport.
- Dependency: jQuery
- License: MIT license
9. jQuery Pin
jQuery Pin is a small jQuery plugin to “pin” or “unpin” elements to a position, when you scroll the page. My most favorite part of this plugin is the option to disable it at certain viewport widths.
- Dependency: jQuery
- License: BSD license
10. Sticky Float
Sticky Float allows us to give elements a fixed position that is relative to its parent. You can set the sticky option according to your needs with the provided parameters and by changing the value. Catch the demo here.
- Dependency: jQuery
- License: Undefined
11. Zebra Pin
Zebra Pin is a lightweight plugin to make any element pin to their container. With this plugin you can add "sticky-ness" to elements in your project like to your navigation, sidebars, headers and footers, or other elements that you want to keep visible when users scroll down. Check out the demo.
- Dependency: jQuery
- License: GPL license
12. HC-Sticky
With HC-Sticky, you can make sticky elements that refer to its container, to any given element, or to the document itself. This plugin has some options that you can adjust to your need, like distance from the top and bottom to start floating, and other options.
- Dependency: jQuery
- License: MIT license
13. Sticky Mojo
Sticky Mojo is a lightweight, fast, and flexible jQuery plugin to make awesome sticky elements. It’s compatible with modern browsers and will degrade gracefully in IE.
- Dependency: jQuery
- License: MIT license
14. Sticky Navbar
If you want make single page navigation which sticks when one scrolls down, this library is for you.Sticky Navbar will put the navigation at the top of the browser window and highlight the anchor link to connect to the corresponding section on your page. You can also add Animate.css to beautify the navigation effect.
- Dependency: jQuery
- License: MIT license
15. StickyStack
StickyStack will make elements stack with another when users scroll the element and reach the top of the viewport. With this library, your long page will transform into stacked cards.
- Dependency: jQuery
- License: Undefined
15 jQuery Plugins To Make Smart Sticky Elements
Sunday, February 15, 2015
Datedropper – jQuery plugin
Datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields. Coded by Felice Gattuso.
The post Datedropper – jQuery plugin appeared first on Freebiesbug.
Datedropper – jQuery plugin
Sunday, January 18, 2015
Content filter with CSS & jQuery
An awesome tutorial explaining how to create a slide-in filter panel powered by CSS and jQuery. Created by CodyHouse.
The post Content filter with CSS & jQuery appeared first on Freebiesbug.
Content filter with CSS & jQuery
Tuesday, December 9, 2014
50 Most Useful jQuery Plugins from 2014
Today, we have the 2014 edition of our top 50 jQuery plugins of the year. They are the 50 jQuery plugins that we feel are the most useful, most innovative and most time-saving solutions to many of the modern design and development issues you may have.
Just to help you find exactly what you are looking quickly, we have classified all of the jQuery plugins into the following categories: Web & Mobile Layouts Plugins, Menu & Navigation Plugins, Plugins for Media, Slider, Carousel & Gallery Plugins, Text Effect Plugins, Form Plugins, and finally a bunch of uncategorized Utility Plugins.
It really has been a tremendous year for jQuery!
jQuery Plugins for Web & Mobile Layouts
pagePiling.js, a jQuery plugin for "piling" your layout sections over one another and accessing them by scrolling.
fullPage.js, a simple plugin for creating fullscreen scrolling websites.
The jQuery Tilted Page Scroll allows you to create a beautilful and unique 3D tilted scrolling effect on your website.
FixedContent.js, a mobile-friendly jQuery plugin that fixes/sticks content while scrolling.
gridscrolling.js, a plugin for positioning sections and asides in a grid & allowing for easy cursor key navigation.
Flickerplate, a responsive, touch-enabled and lightweight plugin that allows you to "flick" through content.
jInvertScroll, a lightweight plugin that allows you to move horizontally with a parallax effect while scrolling down.
Animsition, a simple plugin for adding page transitions with CSS animations.
scrollToBySpeed.js, a plugin that let"s you scroll the window by speed rather than by duration.
Brick Work, a lightweight (15kb) and feature-rich plugin for creating responsive dynamic layouts.
ScrollMe, a lightweight plugin that allows you to add simple scrolling effects to webpages.
jquery.smoothState.js, a plugin that progressively enhances pages to behave more like a single-page application.
multiscroll.js, a simple plugin for creating multi scrolling websites with two vertical scrolling panels.
jquery.matchHeight.js, a more robust equal heights plugin for jQuery.
jQuery Navigation & Menu Plugins
Slidebars, a lightweight (2kb) plugin for creating an app-style push-menu.
scotchPanels.js, a jQuery off-canvas menu and panel plugin.
jQuery Plugins for Media (Images & Video)
Focuspoint, a plugin for dynamically cropping images to fill the available space without cutting-out the image’s subject.
Fluidbox, a replication of the Medium.com lightbox module, with some added improvements.
GifPlayer, a small plugin that allows you to control when to play and stop animated GIFs.
rowGrid.js, a plugin for placing images on a grid with support for infinte scrolling.
Magneticmediajs, a jQuery based library that will allow you to display media content in a stylish and efficient way.
SVGMagic, a simple SVG fallback plugin that finds SVG images on your site and creates PNG versions if the browser doesn"t support them.
Vide, a jQuery plugin for easily adding video backgrounds to your webpages.
Data-Img, a simple plugin for dealing with responsive image delivery by replacing the images from "image src" or "background-image url" depending on screen width.
Dense.js, a plugin for easily serving retina-ready images.
Covervid, a simple plugin that will allow you to make HTML5 video behave like a background image.
jQuery-Cropbox, a really useful plugin for in-place image cropping (zoom & pan, as opposed to select and drag).
Face Detection, a powerful jQuery/Zepto plugin that detects faces on images, videos and canvases.
BttrLazyLoading, a plugin that allows your web app to only load images within the viewport as the user scrolls.
jQuery Slider, Carousel & Gallery Plugins
Simple jQuery Slider, a lightweight jQuery Slider that does exactly what a slider should do: ‘slides slides’.
FSVS, a simple fullscreen vertical slider using CSS3 transitions with jQuery fallback.
anoFlow, a feature-rich and responsive lightbox/gallery plugin.
nanoGALLERY, a responsive, touch-enabled and easy to use image gallery plugin.
Photopile JS, a jQuery image gallery that simulates a stack of scattered photos on a surface.
Justified.js, a plugin that creates a justified image grid of images.
Shuffle Images, a jQuery plugin that allows you to display and shuffle multiple images within a gallery by moving or shaking the cursor.
Skippr, a super simple and lightweight slideshow plugin for jQuery.
jQuery Text Effect Plugins
jQuery.fontFlex.js, a lightweight plugin for dynamically changing font sizes.
t.js, a lightweight jQuery plugin for typewriter-like text effects.
CurvedText, a simple jQuery plugin that allows you to align text on any curve.
Morphext – An Animate.css powered jQuery carousel plugin for text phrases.
Splitchar, a jQuery plugin that allows you to style and design the first, second or both halves of a character.
jQuery Form Element Plugins
BootstrapValidator, a jQuery plugin for validating Bootstrap forms.
Labelauty – A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons.
Guardian, a flexible and easy to extend all-purpose form validation jQuery plugin.
fontIconPicker, a lightweight plugin that allows you to include a simple icon picker (with search and pagination) within any form.
HideSeek, a simple, yet customizable jQuery plugin for live search.
ClockPicker, a clock-style timepicker for jQuery or Bootstrap.
jQuery Utility Plugins
jQuery Confirm Mailto, a plugin to Confirm with users before opening any mailto: link through their default email client.
jQuery prettySocial, a custom sharing button plugin for Pinterest, Twitter, Facebook & Google+.
jNottery, a plugin that allows you to add notes to a page.
Responsive Tabs, a plugin that offers responsive tab functionality.
jquery.adaptive-backgrounds.js, a cool plugin that extracts the dominant color from the images on your web page and applies the color to their parent.
…and finally…
jQuery.planetarium, a jQuery plugin that allows you to construct interactive planets and build the Universe!
jquery.wanker.js is a humourous jQuery plugin that reveals a public service announcement when people start excessively resizing their desktop browser as they try to see your responsive breakpoints. As they say "The web is meant to be read, not squished!"
Finished!
If you would like to have a look at our previous jQuery collections, you should browse our extensive jQuery Archives or our JavaScript Archives.
The post 50 Most Useful jQuery Plugins from 2014 appeared first on Speckyboy Web Design Magazine.
50 Most Useful jQuery Plugins from 2014
Subscribe to:
Posts (Atom)