background preloader

50 Amazing jQuery Plugins That You Should Start Using Right Now

50 Amazing jQuery Plugins That You Should Start Using Right Now
jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Dialogs The browser's built-in dialogs are easy to use but are ugly and non-customizable. 1. Alertify (github) is small library for presenting beautiful dialog windows and notifications. alertify.alert("Message"); alertify.confirm("Message", function (e) { if (e) { } else { } }); 2. jQuery Avgrund jQuery Avgrund (github) is another cool dialog solution. Forms Forms are tedious and boring. 3. iCheck iCheck (github) is a jQuery plugin that enhances your form controls. 4. Long Press is a jQuery plugin that eases the writing of accented or rare characters. 6.

Raphaël—JavaScript Library Our Favorite jQuery Plugins and Libraries For Spring 2015 Nick Anastasov Web development is hard and there is much to learn. Developers and designers need to be on top of a lot of emerging technologies and trends. But the community is buzzing with activity and it creates awesome libraries and plugins that can help us do our work. Here are some of our favorites. Not all of them were released this year, but all of them were updated in the last few months and are a great addition to your bookmarks. 1. Animsition is a simple and easy jQuery plugin for CSS animated page transitions. Animsition 2. Waves is a plugin that recreates the on-click ink effect as seen in Google’s Material Design. Waves 3. This is an interesting library which allows you to scroll a web page by tilting your smartphone. Interdimensional 4. Unite Gallery is multipurpose JavaScript gallery based on jQuery. Unite Gallery 5. Scrollify is a jQuery plugin that assists scrolling and smoothly snaps to sections. Scrollify 6. SweetAlert is a beautiful replacement for javascript’s alert. 7.

20 Best jQuery Plugins for 2014 | Design Geekz If you are a developer you must be aware with the jQuery functionality and uses, jQuery is popular javascript Libraries on the web, and almost every developer and designer are familiar with jquery’s functionality and features. jQuery resolves almost every issue and fits to your website requirements to make your website creative and innovative. In this article we have compiled a list of Best jQuery Plugins which have been released recently and might be useful for developers in 2014. The following plugins will help you to optimize your websites and make the beautiful and visually stunning. Enjoy !! 1. ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar. 2. rowGrid.js is a small, lightweight (~700 bytes gzipped) jQuery plugin for placing images (or other items) in straight rows. 3. Remodal is a flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. 4. 5. jQuery Panorama 6. 7. 9.

Shuffle Letters Effect: a jQuery Plugin Martin Angelov In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows. The Code The first step is to write the backbone of our jQuery plugin. assets/js/jquery.shuffleLetters.js (function($){ $.fn.shuffleLetters = function(prop){ var options = $.extend({ },prop) return this.each(function(){ }); }; function randomChar(type){ } })(jQuery); Next we will turn our attention to the randomChar() helper function. function randomChar(type){ var pool = ""; if (type == "lowerLetter"){ pool = "abcdefghijklmnopqrstuvwxyz0123456789"; } else if (type == "upperLetter"){ pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; } else if (type == "symbol"){ pool = ",.? We could have used a single pool string for all types of characters, but this will do for a better effect. The Plugin In Action Now lets write the body of the plugin! assets/js/script.js Done by Martin Angelov Tutorials jQuery

Making a jQuery Countdown Timer Martin Angelov When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter. Today we are going to build a neat jQuery plugin for displaying a countdown timer. Let’s start with the markup! The HTML We will give the plugin the creative name of “countdown”. Generated markup In the above example, the plugin has been originally called on a div with an id of countdown. Inside is the markup for the digits. The static class of the digits gives them their gradient background and box-shadow. A jQuery Countdown Timer The .countDiv spans are the dividers between the units. But how is this markup generated exactly? The jQuery First let’s write two helper functions used by the plugin: init generates the markup you saw above;switchDigit takes a .position span and animates the digits inside it; assets/countdown/jquery.countdown.js Great!

Blog | Well Caffeinated jQuery считается вредным Хех, мне всегда хотелось написать один из этих «Х считается вредным» постов. Прежде чем я начну, позвольте сказать следующее: я считаю что jQuery оказал просто невероятное влияние на продвижение Web. Он дал возможность разработчикам делать такие вещи, которые ранее считались немыслимыми. Заставил производителей браузеров реализовать многие фичи нативно (без jQuery у нас наверное никогда бы не появился document.querySelectorAll). jQuery всё еще нужен тем, кто не может положиться на современные плюшки и вынужден поддерживать реликты вроде IE8 или хуже. Да, скорее всего, он вам не нужен... Определенно я далеко не первая, кто обращает внимание на то, что почти всё, что умеет jQuery, сегодня умеет и нативный JavaScript. … но это всё же не та причина чтобы отказаться от его использования Чтобы избежать расширения прототипов нативных объектов, jQuery использует собственные обертки над этими объектами. Тем не менее, эти ссылки всё время вылазят наружу в реальных проектах.

The 21 best jQuery plugins | jQuery When John Resig developed the jQuery library back in 2006, he can't have imagined that it would become the most popular JavaScript library on the web, or that it would have tens of thousands of plugins written for it. But it's true to say that jQuery, above all other libraries out there, has been embraced by the web design community. It is a fantastic library for designing and developing user interactions quickly. Whether it's an image gallery or form, content-revealing CSS animation or an explosion effect, the library provides the core building-blocks to allow you rapid prototyping and to deliver a unique user interface with the minimum of code and effort. This presents an interesting question, however. 01. This plugin from Pete R. is an excellent way to grab people's attention and add a little extra depth to your site. 02. The great thing about responsive web design is being able to create a single page that'll look good on any device. 03. 04. 05. 08. 09. 10.

alertify.js - browser dialogs never looked so good Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren't leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain - by all means go for it! It's been great seeing people use it and enjoy it and this decision is simply because I don't believe it's fair that developers are looking for help and not getting it. I wish I had more time or contributions to keep it going and make it better, but the sad reality is that not usually the case on these kinds of projects. Forks I will be updating this site to list forks of alertify.js.

Photobox - CSS3 image gallery modal viewer A lightweight image gallery modal window script which uses only CSS3 for silky-smooth animations and transitions, utilizes GPU rending, which can be completely controlled and themed directly from the CSS. Lightweight! jquery.photobox.js is only 5kb (gziped & minified) Hardware accelerated, CSS3 transitions and animations Mobile friendly Support videos via iframe embedding Stunning UI and user-friendly UX Images & videos can be zoomed using mousewheel Thumbnails can be zoomed using mousewheel Keyboard & mouse navigation. Even using mousewheel left/right ;-) Exposed UX control up to 99%. No need to mess with the source code Observes DOM changes (if images were added/removed) Event-delegation on all thumbnails events (obviously...) HTML5 History support: update location with the currently viewed image No images at all! Supports: Firefox, Chrome and IE8+ (This plugin has nothing to do with Flickr) Github project page

Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday

Правила эффективного использования jQuery Здесь приведен ряд очень простых правил, следуя которым, ваше сотрудничество с jQuery не будет омрачено скрежетом напрягшегося браузера. Конечно, не так часто случается, что скорость работы javascript’а оказывается критичной, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими. 1. Быстрее всего происходит поиск элементов по идентификатору: $('#someId'), вторым по быстродействию, является поиск по имени тега: $('tagName'). (Для большей наглядности, укажу текст страницы, к которому будут применен JS-код из примеров) 1. 2. 3. Из всего сказанного, можно вывести два основных правила: 1) Для поиска одного элемента, используйте поиск по id: $('#someId') 2) При поиске группы элементов, старайтесь придерживаться следующей формулы: $('#someId tagName.someClass') 2. $('#myElement').bind('click', function(){...}); . . . window.elements; function init() { elements = $('#someId tagName.someClass'); } 3. 4.

15 Newest jQuery Lightbox plugins A Collection of Free and Newest jQuery LightBox Plugins. Lightbox is a technique used to display large images using modal dialogs and way back I had posted about Top 5 Best jQuery LightBox Plugin but since then more lightbox plugins are released and I thought its time to create an updated list of free and newest jQuery lightbox plugins. These lightbox plugins not only supports images but offer supports for videos, iframes, website and any other type of content along with cool CSS3 effects. You may also like: Image Lightbox Image Lightbox is a ascetic, minimalistic, extensible & configurable, responsive and touch-friendly, iOS, Android and Windows Phone compatible lightbox plugin. Nivo LightBox A simple, flexible, responsive, retina-ready jQuery lightbox plugin.The Nivo Lightbox automatically detects the type of content you are trying to show and loads it correctly. Fluidbox Fluidbox is distraction-free, fluid lightbox, allows linking to a larger-resolution image. Tos"R"Us VenoBox ABigImage

garand/sticky

Related: