Demo - jQuery.JamCity (1.1) Released under the MIT License. Created: 04/14/2012 Latest update: 12/11/2013 By: Zach Reed (@bluetidepro) Contact: First, include the jQuery library, jQuery.JamCity javascript (jQuery.JamCity.js or jQuery.JamCity.min.js) and the jQuery.JamCity CSS (jmc_styles.css) on the page(s) where you want to use jQuery.JamCity. Then, add a container div with an ID to your HTML so we can output jQuery.JamCity somewhere. Then, initialize jQuery.JamCity. Put the following code before the closing tag of your body (). NOTE: Please do not use my API key (c5d7bcc2600127f2c24e5b50c5f8ea5a) on your site. This API key is used only for demo purposes. Configuration Settings Required params: apiKey - [string]Your Last.fm API key (easily setup free: ) username - [string]Your Last.fm username (ie. ) Optional params: fetch - [integer]The number of tracks to fetch/display.
HTML Output Demo 1 (default settings) Ladda. Easy Responsive Tabs to Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. This tab has icon in consectetur adipiscing eliconse consectetur adipiscing elit. Suspendisse blandit velit Integer laoreet placerat suscipit. X-editable Demo. Yepnope.js | A Conditional Loader For Your Polyfills! Tipped - The jQuery Tooltip. Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library.
Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be changed without having to create any images. Canvas based tooltips also have the advantage that they look great in every browser, even in IE6!
Javascript API With the powerful API provided by Tipped it's possible to quickly create and control tooltips customized to your site, all it takes is a few lines of Javascript. And more... Check out the demonstrations below or head over to the documentation to discover more awesome features. jQuery'd Bread Crumb - jBreadCrumb. Update - jBreadCrumb 1.1 With a little help from jquery user "mikejbond", the chevron overlay div no longer needs to be part of the HTML, it is inserted dynamically. You may still want include it if you want to cache image on page load. Also, the easing plugn is no longer required, the animation will default to "swing" easing. I still recommend "easeOutQuad" for the best looking animation, but it's not necessary. Explanation This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.
It is smart in the sense that it collapses based upon the amount and length of the elements in the set. Oh, and it's compatible with ie 6, ie 7 and all standards compliant browsers. To use the plugin, it's as simple as the code below. jQuery(document).ready(function() { jQuery("#breadCrumb").jBreadCrumb(); }) The only additional jQuery plugin required is the easing plugin written by GSGD. Or, set it globally jQuery.fn.jBreadCrumb.defaults.easing = 'linear'; Galereya. jQuery gallery. List.js - Add search, sort and flexibility to plain HTML lists or tables with cross-browser native JavaScript by @javve. Salmonmoose/hex-grid. List and Grid view with jQuery and Cookies. Building a List/Grid View Switcher with jQuery. A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids.
In this tutorial I’ve built a simpler example using basic CSS and some jQuery commands. I’ll be using interface elements from the Zephirro E-Commerce UI Set which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. Live Demo – Download Source Code Coding the Basic HTML The main page isn’t very complicated but does contain a lot of repetitive code. We’ll bind a click event handler onto these two links later on. This example only includes the first row but you can copy/paste to build more.
Just to point out I’ve wrapped the product buttons in a span with the class .darkview. Looking at CSS Styles My project outline is to adapt each list item based on the UL’s current class. jQuery Switch Effects Updating Products List Display. MotionCAPTCHA – Stop Spam, Draw Shapes - Joss Crowcroft. MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.
Update: I’ve scheduled a code jam day to smash out the next version of MotionCAPTCHA and a full advice/implementation guide, so if you’re keen to use this anywhere, head over to the Github page and hit ‘watch’, or subscribe to updates via RSS Also, I didn’t make that video demo of MotionCAPTCHA – if I had I definitely would have used better music. Just sayin’. Thanks to whoever did though! Version 0.2 adds mobile-support, so if you’re on mobile, you can now play with the demo!
Demo • Code on Github tl;dr – this plugin is mostly a proof of concept for now, but check the roadmap to see the status and plans. How It Works Technology / Credits Roadmap v0.3 v1.0 v1.1 Changelog v0.2 How To Use The Next Step. Design Lunatic – Isotope Tutorial. Aug 04, 2011 | In jQuery, Tutorials | By: Design Lunatic I’m sure many of you have heard of jQuery Masonry. It “Arranges elements vertically, positioning each element in the next open spot in the grid.
The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.” Now, I’m not going to lie to you, masonry is definitely an amazing plugin. However, it is missing some functionality that would definitely not be extra, such as advanced filtering and layout modes. Isotope builds upon Masonry, and is basically an enhanced version of it with more features and functionality. Today, I will show you how to use Isotope to create a simple design with content “boxes”, and an insanely simple navigation that filters the “boxes”. Well, let’s get started. We’ll have a navigation section, and a main content div which will hold the content “boxes”. Take a look at the navigation: At a first glance, it looks like a typical navigation. Javascript. Sly. Introduction Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.
It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything. Dependencies jQuery 1.7+ And that's it.
You don't need 200KB of jQuery-UI to Sly :) In the future, I'd like to drop the jQuery dependency, and transform Sly into a reusable Component. Compatibility Sly works in every desktop browser, and due to some divine intervention, even in IE6+, but that is a complete accident. Mobile Sly does touch events, and I'm generally trying to make it work everywhere, but the fact is that mobile is not tested. Changelog Sly upholds the Semantic Versioning Specification. Support Reward the developer And make him happy for maintaining this library! Performance. jQuery Nested. Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.
How is this done? Nested does three things. It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Use a container element with a group of child items that use the chosen option selector setting (default: .box). <div id="container"><div class="box size11"></div><div class="box size12"></div><div class="box size21"></div><div class="box size22"></div> ...
Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. Selector Default .box minWidth Default 50 minColumn Default 1 gutter resizeToFit Default true If true, any box bigger than the gap will be resized to fill the gap. resizeToFitOptions resizeAny. Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! Building a Real-time SMS Voting App Part 1: Node.js & CouchDB. This is the first in a multi-part series of blog posts on building a real-time SMS and voice voting application using Node.js.
In part one, we will create the Node.js application, set-up the CouchDB database and connect everything to Twilio so that we can process votes via SMS. A few months ago, I was attending Startup Weekend GOV in Seattle where Twilio was a sponsor. I was there to support the event and help out teams that needed assistance with marketing validation, prototyping and pitching. I love helping out with Startup Weekend events, but sometimes I get a little antsy and wish I was working on something of my own.
Although I have been building web applications since 1999 and have used Java, PHP, Python and Ruby, this was my first experience using technologies like Node.js and CouchDB. I thought it might be useful for other people who are making a similar transition to write about my experience coding Votr, the pitfalls I ran into and a few solutions that I discovered. Scriptaculous Effect.Numb3rs | Effect.Numbers. Deutsche Version kommt irgendwann ;) Ok, I cØNfes$, I ω@+CHed NuMb3®§, ThAt duμß 1√ serie$ aboUt 1hat µÆtheµÆ+ician, who So|vEs t#e fun4iest ProßleMs WitH mathemAtiCa!
Ca|culAtIon$. O# My GOd, 1ha1 5er! Es is T#3 he! Installation Simply embed numb3rs.js (download via right click)after embedding Prototype and Scriptaculous using <script>-Tags: Now you can use the Effect.Numb3rs effect. Usage Simply type new Effect.Numb3rs(element); or new Effect.Numb3rs(element, options); element specifies the id of the element or the element itself that contains the text for the Numb3r-effect.
Demo/Options Demo 1 The quick brown fox jumps over the lazy dog Demo 2 Demo 3 Licence Copyright (c) 2008 Thomas Lemmé The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. If you have got questions, suggestions or any other comments, post them on the entry on my blog web/code. About Effect.Numb3rs was created by Thomas Lemmé. Changelog:
Rosetta Code. Canvas Color Smoke. jQuery.parallax. Stroll.js - CSS3 Scroll Effects. Fokus - Emphasized text-highlighting using JavaScript. It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here. Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year. The first project to see the light of day was Sketch, a drawing tool that mimics the style of old cartoons.
It was refreshing to build something that allows others to be creative. Now – almost a year later – over 78,000 sketches have been saved. Sketch was followed by a short freelance project which involved building an interactive and animated logo for a Canadian media production company called Meru. User - How do I protect javascript files.