ResponsiveSlides.js · Responsive jQuery slideshow 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 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(); Plugin Options & Defaults item: '.stickem' Items that you want to stick on scroll. Since the plugin is just adding classes to the items, you will need to setup your CSS with something like this:
Checking username availability with ajax using jQuery Checking username availability with ajax using jQuery The time when username availability is checked after the page is normaly processed is long way behind us. Google has it, Yahoo has it and many many more sites have it, ajax username availability checker. So in this tutorial we will make an ajax username availability checker powered with jQuery. What are we making here? In the source code there also is a styled version. Source Notice: The source includes both styled and non-styled version. mysql_connect('host', 'user', 'pass'); mysql_select_db('database_name'); $username = mysql_real_escape_string($_POST['username']); $result = mysql_query('select username from users where username = "'. You will need to change these values: host(mysql db host, usualy localhost)user(mysql db username)pass(mysql db password)database_name(mysql db name)username(mysql db table field)users(mysql db table name) JQuery Final words That’s it, easy isn’t it . Related posts: Slobodan Kustrimovic
Best Practices for Hints and Validation in Web Forms Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time. Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart. Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form. Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. Hints in Web Forms Validation is frequently used to provide users with a response on what information they should have entered when an error occurs. By using a number of helpful hints, we can provide much of this information before they even enter their name. Alignment of Labels Labels inside Inputs Dynamic Hints The Good
JSON: What It Is, How It Works, and How to Use It This week I want to cover a topic that I feel has become an important part of any developer’s toolkit: the ability to load and manipulate JSON feeds from other sites via AJAX. Many sites are sharing data using JSON in addition to RSS feeds nowadays, and with good reason: JSON feeds can be loaded asynchronously much more easily than XML/RSS. This article will cover the following: What is JSON? We’ll also use our newfound skills with JSON at the end of this project to build a quick app that loads photos from Flickr without requiring a page refresh. What Is JSON? JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner. Storing JSON Data As a simple example, information about me might be written in JSON as follows: This creates an object that we access using the variable jason. Storing JSON Data in Arrays Summary
TinyNav.js · Convert navigation to a select dropdown on small screen Yannis Chatzikonstantinou / Freetile.js Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project. Features Freetile is inspired by similar, existing efforts such as Masonry, vGrid and Wookmark. It allows for any size of elements to be packed without using a fixed-size column grid, so you don't have to worry about specifying a column width appropriate to the size of your elements.The algorithm that evaluates each possible insertion position is easily customizable, allowing for different preferences to be expressed, e.g. a preference to left- or right-alignment of elements, or proximity between certain elements. Usage
Return errors from PHP run via. AJAX In-Field Labels: A Better Way + jQuery Plugin Last week I was dealing with a unique problem. I needed to set focus to a username field, but the field had an in-field label. The script was set to clear out the helper text (label) when the user entered the field. Hmm…. that won’t work! I remember seeing a nicer implementation on Mobile Me for their login. Basically the label stays over the input element even after it had focus. Benefits The input element or textarea never really has content, so validation can proceed without first checking for the field value.It uses standard markup for form elementsIt is under 1KB when minified and gzippedIt takes one line of jQuery code to implement.The overlay can contain images and other HTML elementsIts compatible with all modern browsers (And even IE6, the “not-so-modern” browser). Issues Like all in-field label implementations, this plugin still has problems when the browser tries to pre-fill the fields. Quick Overview Download It
Useful Glossaries For Web Designers and Developers Advertisement In a day in age where there are just as many freelancers as there are university educated designers, developers, and all around web gurus, it is amazing to me how much many of us don’t know or have forgot about our trade. As a self-taught designer, I will admit to you upfront that there is a lot I don’t know when it comes to official jargon or certain aspects of things like typography and graphic design. It is these reasons that I call upon glossaries from time to time. These glossaries are also especially useful for those of you who are just getting started in the online business world. But glossaries aren’t just for brushing up on old terms or for calling upon while you learn new things. Last week we presented Web Design Industry Jargon: Glossary and Resources1, a general guide to industry terms that should get you well on your way to understanding what web designers are talking about. Typography Glossaries Usability, UX and IA Glossaries Marketing Glossaries SEO Glossaries
Apprise - The attractive alert alternative for jQuery The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Demos Let's get right down to business. Pretty slick, right? Let's take a peak at the default settings before we change the options around a bit. You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. Let's try another demo, but changing the settings around a bit. We're going to use a custom CSS class on our confirm button. You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below: Response: Using