background preloader


Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash. Related:  External JS for Edge Animate

jQuery NiceScroll plugin - scrolling for desktop, mobile and touch devices Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. NOW support HORIZONTAL scrollbar too! Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices. It supports DIVs, IFrames, textarea, and document page (body) scrollbars. Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. On modern browsers hardware accelerated scrolling has implemented. simple installation and activation, it works with NO modification of your code. Recall ALWAYS in (document) ready statement. It's a plugin for the jquery framework, you need to include jquery in your scripts. Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script: 1. $(document).ready( function() { $("html").niceScroll(); } ); 2. var nice = false; $(document).ready( function() { nice = $("html").niceScroll(); } ); 3. 4. 5. var nice = $("#mydiv").getNiceScroll(); 6. 7.

CSS Layouts: 40 Tutorials, Tips, Demos and Best Practices - Noupe Design Blog Jul 28 2008 The main idea behind CSS-based layouts is offering more flexibility and enhancing the visual experience of visitors. Some important tips and related key-factors can help to learn basics and keep essential techniques in mind. And this is what this article is all about. Finding the perfect Layout that have Total Flexibility, Equal Height Columns and just works fine. So we’ve decided to take a deep look at articles about CSS-based layouts and the result was a list of 40 tutorials, resources and best practices offering gorgeous and valid CSS-based Layouts. You might be interested to check other CSS related posts: CSS Layout Tutorials 1-Three column fixed layout structure using CSS- This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects. Best Practices

Sticky - An unbelievably simple notification system for jQuery July 19, 2011 Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside. Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. Demo Let's start with some basic messages. $.sticky('<b>Can you see me? Returned: As you can see above, a bit of JSON will be returned with some potentially pertinent information. Software engineer. $('#ThrivingKings').sticky(); We can also use Sticky to display data we've grabbed via AJAX. Fetch the news Download Sticky is just a little guy. Download fullDownload minifiedGitHub Implementing Getting sticky up and running is extremely easy. Don't forget the close.png image file! Now, you're ready to get busy sending Sticky notes! <script> $(document).ready(function() { $.sticky('The page has loaded!') Or attach it to the object your choice. $('#download_status').sticky(); Manipulating The styling behind Sticky is all CSS.

jQuery plugin: Treeview Lightwof an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence. Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Eventually there will be successor as part of jQuery UI. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Current version: 1.4.1License: MIT/GPL Files: DownloadChangelogDemosDocumentationGitHub Repository Dependencies Required jQuery 1.2.x+, tested with 1.4.3 Support Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “treeview”. Donate

7 Things I Wish I Had Known About jQuery This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following: Base knowledge of JavaScriptWhat jQuery isHow to include jQuery in a web pageBasic knowledge of how to use the $ function (for example: $(‘#test .testing’))Basic understanding of the chainable eventsKnow what $(document).ready(function () { }); does (sometimes seen as $(function () {} ); or $().ready(function() {});)Know intermediate HTML and CSS (lists, padding, colors, borders and margin) If you don’t know anything about how to use jQuery you should read this. 1: Some Background Info Objects and Methods I know when I started learning jQuery, I wasn’t too familiar with objects and methods. Think of it this way: Objects work so well because they act just like real life objects- objects have properties and methods. By being able to tie, essentially, ’sub-variables’ to variables you don’t have to worry if that variable is already used. Use the following code as an example: Chainability

inuyaksa/jquery.nicescroll · GitHub Animated Scrolling for Same-Page Links Many months ago, I posted a note to the jQuery discussion list showing a script I wrote that uses the Interface plugin's ScrollTo() method to automatically scroll smoothly to any id or named anchor on the current page when clicking on a same-page link. The code was unwieldy and unneccessarily long, but it worked. A little game of one-upmanship followed among some of the gurus, ultimately reducing my 18 lines of code to 11. And that made me happy—until I tried the code in Internet Explorer 6. It didn't throw an error, but the smooth scrolling didn't seem to work in that one sad-sack browser. Since I was writing the code for my day job and I didn't have a lot of extra time to investigate the issue, I just left my initial code in there and shrugged it off. The other night, however, as I was digging around some old files, I came across the code from my discussion list friends again, so I decided to see if I could fix what ailed it in IE. JavaScript: This code does the following: Try it out

Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. Patterns And so on.

jQuery plugin: Autocomplete Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore. If you’re still using the plugin and can’t upgrade to jQuery UI autocomplete: Someone else is maintaining a GitHub repository with the plugin, including some fixes. There’s also an update to the original version of the standalone plugin in a Google Code project. Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook. Files:

Related:  jqueryPLUGINSscroll