background preloader

SlabText – a jQuery plugin for creating big, bold & responsive headlines

SlabText – a jQuery plugin for creating big, bold & responsive headlines
I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Calculated and preset word combinations While the script does an admirable job at automating the creation of the individual rows, there are certainly situations in which you would choose to control the word combinations used to split the headline. Headers containing links Plugin options Related:  JavascriptJS

remybach/jQuery.superLabels - GitHub Arctext.js - Curving Text with CSS3 and jQuery While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. View demo Download source While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. How it works The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. Options The following options are available:

Ajax AutoComplete for jQuery About jQuery Autocomplete allows you to easily create autocomplete and autosuggest boxes for text input fields. Built with focus on performance - results for every query are cached and pulled from local cache for the same repeating query. What's new $('#query').autocomplete(options) now returns an Autocomplete instance only for the first matched element. Autocomplete functionality can be disabled or enabled programmatically. var ac = $('#query').autocomplete(options); ac.disable(); ac.enable(); Options can be changed programmatically at any time, only options that are passed get set: If you need to pass additional parameters, you can set them via setOptions too: New parameters when initializing autocomplete. var reEscape = new RegExp('(\\' + ['/', ' Installation Include jQuery in your header. How to use Here is an Ajax Autocomplete sample for the text field with id "query" Create an instance of the Autocomplete object. Important: Autocomplete must be initialized after DOM has finished loading.

28 High-Quality jQuery Plugins For Building Responsive Websites Home » Extras » 28 High-Quality jQuery Plugins For Building Responsive Websites There is always a new challenge for web designers and developers. One of the latest is definitely responsive web design; the art of serving the same web page to multiple devices which look good on all of them. It is a getting-popular approach. As always, there are questioned parts (like the increasing number of screen sizes and the difficulty in setting breakpoints) but these are minor and creating a responsive website is nothing difficult. Thanks to talented people out there that there are great resources simplifying development of such websites. For jQuery users, there are a good number of responsive design plugins and here is a carefully collected and well-categorized list to bookmark and hit back when you are about to design responsively : ). Layout & Tools Response JS It also offers useful methods for easily testing screen properties that are important for creating responsive websites. jquery responsive web

Home Analog or digital You may have noticed that we’re fond of a bit of retro, so it was hard to resist this pixelated music video from Wildlife Control… from their blog: We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool. At the time, we were thinking it would be a quick little animated ASCII thing. After digging in a little more, we decided to go way bigger. Each jumbo pixel in the grid is a plain old <div> with a coloured background, while scenes are broken down into reusable sprites to keep things snappy. Cute 8-bit dinosaurs, robots & zombie dogs all make an appearance, with SoundCloud comments embedded at the correct time-index – a nice touch. I strongly suspect there’s some nice tooling behind this, if the large arrays of data in the source are anything to go by. The song isn’t half bad, either Analog or digital – Wildlife control

Fullscreen Image Blur Effect with HTML5 Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect. View demo Download source We will be using Stack Blur, which is a fast, almost Gaussian blur for Canvas by Mario Klingemann from Quasimondo. The images used in the demo are by Geoff Peters. How it works The main idea is to add some images in our structure that will serve as background images. You can set that by changing the variation between 1 and 2: The speed is the animation speed between each transition (from normal to blurred) and the blurFactor is basically the radius for the blur effect used in Stack Blur. Demos Demo 1: Here we use variation 2, showing the coming image without blurring it first. We hope you liked our little experiment and find it inspiring and useful! View demo Download source

How to Use the jQuery UI Autocomplete Widget In this tutorial we'll be looking at one of jQuery UI 1.8's newest components - the Autocomplete widget. Auto-completing text fields can be a popular choice with visitors to your site because they make entering information much easier. They can be used on product search fields for example, or when a visitor must enter a country, or a city, or anything else that may be a choice from a common dataset. I'm not a massive fan of Facebook, I much prefer Twitter (@danwellman btw), but one Facebook feature I do like is the messaging feature which lets you send a message to a friend or friends. In this tutorial we'll use the jQuery UI Autocomplete widget to replicate this aspect of Facebook's messaging system. Step 1 Getting Started We'll need to build a custom download of jQuery UI containing just the components we need; head over to the download builder at CoreWidgetPosition Once downloaded, create a new folder on your computer and call it autocomplete.

25 jQuery Plugins to help with Responsive Layouts The most popular topic of discussion at the moment is undoubtedly responsive layouts in web design. Without going into it too much, a responsive layout allows you to offer a specific and optimised screen size based on whatever device (mobile, tablet…) the visitor uses. You would typically use Media Queries to resize the overall layout, but what about all of those individual elements and features that make your page unique? Navigation, forms, images, sliders, carousels… they all need to be optimised as well. That is were this post comes in, by highlighting 25 jQuery plugins that will help you optimise and resize those trickier web elements. Response.js Response JS is a lightweight plugin that gives you the tools for producing performance-optimized, mobile-first responsive websites. Response.js Responsly The Responsly plugin is a set of simple responsive widgets written using CSS3 transformations. Responsly Menu to a Dropdown for Small Screens Menu to a DropdownDemo Responsive Menu Doubletake

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.