Grid-A-Licious Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. So, why am I continuing developing this? The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. If this is something you’ve been looking for, go ahead and download the plugin and use it. width Default 225px gutter Default 20px selector Default .item animate Default false animationOption Default options below queue Default true
SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach on 11/26/2012 You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. Social Networking widgets are a digital blot on the beautiful canvas we call the web. Design considerations aside, the widgets’ biggest affliction is their file size. A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility. To solve these problems, we built SocialCount. See it in action SocialCount’s live demo will show you a variety of sizes and orientations. How to use it Add socialcount.js and socialcount.css to your page, ideally the CSS in the \<head> and JS at the end of the \<body>. Use the included Markup Generator to create your baseline HTML. <ul class="socialcount" data-url=" data-counts="true"><li class="facebook"><a href="
Calendario: A Flexible Calendar Plugin A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. <div class="fc-content"><span class="fc-date">14</span><span class="fc-weekday">Wed</span><div></div></div> Options Demos
Delta – A Free jQuery UI Theme | Kiandra IT Blog Kiandra is pleased to announce the open sourcing of a jQuery UI theme we think you’re going to love. We have been using the “Delta” theme for the better part of a year and made the decision to share it with the community. We’re hoping this results in plenty of feedback as well as the continued development of the theme. If anything, we think that this theme can act as a starting point for other smart cookies to create their own visually engaging jQuery UI themes. Features: Open source – Free for commercial and personal use alike under an MIT license.Retina ready – The theme makes use of CSS3 gradients and some @2x images to ensure it’s retina display friendly.Dark and light friendly – The vibrant colour scheme means “Delta” works on both light and dark backgrounds. Support & Testing: IE7, IE8 & IE9But rounded corners and drop shadows will degrade depending on supportChromeFirefoxSafariOpera Did you find an issue? View Demo – Go to Repository
slideControl.js jQuery Plugin In Your <head> <link rel="stylesheet" type="text/css" href="slideControl.css" /><script type="text/javascript" src=" type="text/javascript" src="jquery.slideControl.js"></script><script type="text/javascript"> $(document).ready(function() { $('.slideControl').slideControl();});</script> Options speed: Controls the speed of the animation for a slider reszing, defaults to 400 lowerBound: Sets the minimum amount the slider can be set to, defaults to 1 upperBound: Sets the maximum amount the slider can be set to, defaults to 10 <ul><li><label>Responsiveness: </label><input type="text" value="6.0" class="slideControl" /></li><li><label>Safety: </label><input type="text" value="4.0" class="slideControl" /></li><li><label>Information: </label><input type="text" value="9.0" class="slideControl" /></li></ul> The CSS file included should be pretty straight-forward. Usage
Tiny Circleslider: A lightweight circular carousel for jQuery What is it? Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library. Features IOS and Android support. Need support or custom features? Anything is possible! Examples $(document).ready(function(){ $('#circleslider1').tinycircleslider();}); Note: There is no lightbox natively in tiny circleslider for this example fancybox was used. To get a better understanding of how it all comes together I made a (corny) styled example. Constructor Properties Methods Events Usage The image below displays how you calculate the radius of your circleslider.
Photobox – CSS3 jQuery image gallery – dropthebit I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind. I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion. Feb 2 - Version 1.6 is available. Lots has been changed, for the better. Please report any bugs or ideas in the Github project page, as I'm perfecting this code on a daily basis. So, I opened Google search and type of sorts of things, and looked at many scripts that suppose to do that I wanted. I saw no choice but to write my own script. Demo page Benefits So what can this script do? How to use Put photobox.css and then jQuery in your page (make sure it's not a super old version..) Settings Demo page photobox on github
jQuery.Shapeshift Demo What is Shapeshift? Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order. Function > Form Shapeshift was designed to always render the same grid as long as the elements are in the same order. Features Column Grid System: All items flow from left to right, top to bottom.
Motio - jQuery plugin Introduction Motio is a small JavaScript library for simple but powerful sprite based animations and panning. It takes an element, and changes the background position to create an animation effect. Dependencies Motio has no dependencies, but there is an optional Motio jQuery plugin version available. Compatibility Works everywhere. Changelog Motio upholds the Semantic Versioning Specification. Support Reward the developer And make him happy for maintaining this library! I don't want to go the Isotope & family route and monetize my libraries. jQuery plugin If you consider jQuery to be a separate language and are not interested in learning JavaScript, you can use the jQuery plugin version of Motio: Working with Motio via a jQuery proxy has some limitations. Performance Motio is chained to the requestAnimationFrame (with a polyfill for older browsers) and optimized for speed and garbage collection. Examples Move cursor over the example to control the panning direction and speed. Documentation
jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point Over time, we've been adding some additional pieces of flair to the Viget site. The most recent addition was on the invidual work pages. We have large process sections where we illustrate a part of a project's process with several images and a block of text. The problem: some of those images were very tall. So by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the text to give you context about the images you had just viewed. The tricky part was that I couldn’t just make the text position: fixed once it reached the top of the screen and be done with it. Here is some sample markup: <div class="container"><div class="row stickem-container"><div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The content that I want to "stick" is div.stickem, and I want it to be "sticky" within div.stickem-container. $('.container').stickem();
Make Pretty Charts For Your App with jQuery and xCharts Martin Angelov Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table. The HTML The HTML structure of the demo is pretty simple – we have to add elements on the page for the initialization of the chart, and for the date picker. index.php <! We are including a good deal of external resources here. Before the closing body tag, we have the jQuery library, d3.js (required by xcharts), xcharts, the elegant sugar.js library (required by the date range plugin), the date range plugin and our script.js. The MySQL Table As I mentioned in the intro, the script we are writing will fetch its data from a MySQL table and display it on the chart. Database Schema The PHP Code
Uniform - Sexy forms with jQuery