Archive for the ‘jQuery’ Category



The Internet is arguably one of the most used types of media nowadays, second only to the more common television. And as technology and science drives a swift bus known as evolution, the web is seen tagging along the ride.
There are tons of writers, programmers and designers out there contributing to the ever-growing world of internet media by creating websites and web pages, and developing more convenient and efficient ways of making them. One of the most popularly used nowadays is the JavaScript platform, which is pretty much a string-based programming environment used for writing codes that make a lot of things run, from a simple calculating program to a whole website or even mobile phones and other IT devices.
What’s jQuery?
JavaScript, like other programming languages, consists of smaller sub-applications with the same type of language, but aims to make coding much easier. These sub-applications, more commonly known as “libraries”, have different uses and can be found all over the internet.
One popular JavaScript library used today is jQuery. It has over 55% of the 10,000 most visited websites using it. Perhaps the main reason it got its fame is its emphasis on better graphic presentations (for those viewing it) and ease of use (for web designers and developers using it).
jQuery is an open sourced program, meaning that developers can add their own plugins or tweak the application to suit their needs. It is also free and dual licensed (MIT License or the GNU General Public License, Version 2), which means that anybody can use it freely and publish their works online. jQuery was released in January of 2006 by John Resig and up until now has been updated constantly to improve its performance.
A person who has no background might be thinking that it would be impossible to use jQuery without having knowledge in programming, but there are numerous articles out there about using it, ranging from introduction for newbies to more advanced tricks a seasoned user can benefit from.
Here are some of the tips and tricks anybody can use to start with. They are split into two parts: the general tips and the more application-specific tricks inside the jQuery environment itself.
General Tips in Using jQuery
These tips are for those who are just starting to get the gist of using jQuery. Most articles with the same topic provide similar (if not the same) tips of advice and thus making these points a part of the “need to know” list.
- Add plugins. Compared to JavaScript, jQuery provides easier code handling and designing. And with the use of additional plugins, creating a very appealing website will be just a breeze. The jQuery environment is written in a way that users can add other additional software to it. One of the easiest ways to do it is incorporating plugins into the program. These plugins have a wide variety of uses (from acting as a “shortcut” to longer strings of code or setting up an already complete system and then tweaking the theme based on the user’s needs. It can be easily found anywhere online, so one can just search for it in Google and receive many results.
- Use a cheat sheet. Memorizing all the codes requires a lot of time and, evidently it is very difficult to do. Instead, most people using jQuery create or look for cheat sheets. These can be in any form – be it just background wallpaper showing different terms and codes or a plugin for jQuery and created with jQuery itself. Adding this to the arsenal makes coding much easier and faster.
- Use the latest version. Since its launch in January 2006, jQuery has been updated regularly, improving its efficiency and usability. And since it is free, the updates that come along with it are free as well. Using the most recent version not only provides better performance but also lets the user know he/she is in line with the latest changes.






For a long time sliders have been amusing website users with their amazing effects. Still website developers try to impress users even more, producing design element that enhance overall functionality of the site without being intrusive or distracting.
Day after day web design market is being filled in with various goodies. Each month a new type of website slider appears, each and every is defined by its uniqueness. Designer crowd all over the world supports only the most trusted items and NivoSlider is one of them. This project became a huge success and during the first year it was downloaded more than 1M times and now it is known as the most beautiful and easy to use slider. NivoSlider is a shareware i.e. it can be downloaded toll free. There is no better way to make your website look totally stunning. If you don’t believe us, keep reading and you will see, how tiny plugin “can turn upside down” image presentation on your website.
NivoSlider is a lightweight (12kb compressed) jQuery plugin for creating good-looking image sliders. It converts an element that wraps images into a slider and offers 16 unique transition effects (effects ranging from slicing and sliding to fading and folding). The plugin can display prev-next buttons and a navigation to control the slides. The transition to be used can be a single one or you can set NivoSlider to randomly apply them. Also, it is possible to define the number of slices, animation speed and pause period for maximum customization. For you to experience visual presentation of NivoSlider we included several demos of this impressive slider:
Nivo Slider with Default Theme & Default Settings
***






There is a well-known idiomatic expression saying that ‘content is a king’. We assume that soon it can be transformed to something similar to this one – ‘video content is an emperor’. Web experts and SEO gurus convey that video content soon will overtake the web audience totally not leaving any chance to other types of media information. It is hard to estimate the current situation of the image content – video content antagonism because there is no valid and objective web content analytic tool. So considering the intensity of growing need in multimedia content we have tried to collect jQuery media plugins that would help you painlessly implement video content on your website. Below you’ll find various surprisingly simple yet efficient media tools.
* * *
Flare Video plugin allows to implement HTML5 video with Flash fallbackinto web pages. Also you can easily customize player’s skin by changing CSS/HTML/JS files. Following plugin support full screen option and it is completely open source and free for commercial use.
* * *
jPlayer is ope-source media library written in JavaScript. This plugin allows you to easily implement audio and video player into your web pages. jPlayer has powerful platform support – multi-codec, cross-browser and cross-platform.
* * *






JavaScript is widely used in modern websites and web applications. Developers prefer this scripting language to improve user interface, provide rich features, or make various interactive elements on the website. With the lapse of time JavaScript has evolved a lot and considering rapidly growing needs of modern web developers community has accumulated a huge need in fast, reliable and simple tools that simplify the process of compilation and debugging JavaScript code. Today we would like to introduce you the most popular JavaScript debugging tools. These online debuggers and browser based add-ons will be the most essential tools during the work with the JavaScript code. Don’t miss a chance to save your resources by using one of the items from our list.
Online tools
DamnIT simplifies the process of beta testing by providing useful and reliable feedback concerning possible errors. You’ll receive a message with the full information about the type of error, file, line number, and back-trace information.
1 2 3 4 5 6 7 8 9 10 11 | // the onclick event handler for the link we clicked var breakme = function(){ // surrounding your event handler code with try...catch ensures DamnIT // notifies you of errors in all browsers try { // this function doesn't exist, so it will cause an error a.func.that.will.brea.k(); } catch(e) { // the catch code runs when an error occurs in the try code ApplicationError.notify(e); // invokes DamnIT's functionality } } |
* * *
It is not a secret that JSON code doesn’t have any line breaks to save space that’s why it is almost impossible to read it. This tool solves the problem by formatting the JSON into more readable data.
* * *
JS bin is a collaborative JavaScript debugging web-application. It helps deal with JS, CSS and HTML codes, text blocks, and so on. Also it allows you to edit and test JavaScript and HTML which is very comfortable for developers.
* * *






Sometimes it seems that in website creation jQuery is involved in pretty much everything. This much-hyped JavaScript framework has turned out to be a very powerful tool for web designers. Now everything gets more interesting. As today we made a short list of some pretty nifty and really fresh jQuery & CSS3 gallery and slideshow tutorials that would help you out in creating similar galleries and sliders. We do believe that these tutorials will help you solve the issue of showing photos and images on your website. So if you don’t know where to start from, improve your slider creation skills with the power features of jQuery.
* * *
Fullscreen Slideshow with HTML5 Audio and jQuery
* * *
Image Wall with jQuery
* * *






Looking for the new kind of carousel scripts that will displays items in a continuous loop, we gathered some nice little jQuery goodies for you all. These plugins are capable of creating carousel-like slideshows where you can pan through the images using arrow indicators or simply view the showcase in auto-play. As opposed to displaying the images only, here you will also find several plugins that do cater for non-image content such as videos or text blocks. Plus in some cases you will have the ability to choose from horizontal or vertical order, a range of element positions, transition effects, slide timer length, and the like. If to recap, such kind of space-saving arrangement is definitely great for making your site uncluttered albeit shock-full of different content. So have these jQuery carousel plugins handy.
If you feel you’re not that tech-savvy to add the carousel yourself, we can suggest you template solutions with jQuery elements already inside them.
* * *
Circular Content Carousel with jQuery
* * *
Elastislide – a Responsive jQuery Carousel Plugin
* * *






If you love small wed design usability goodies and want to improve your website’s user friendly level, we think this roundup will sweep you along. What we have for you today is a bunch of jQuery tooltip plugins that will help you show any extra information on website without cluttering its design. jQuery tooltips are good for user experience as they behave like small overlays or hover boxes that appear over the main page, when you hover the mouse cursor over an element, and can be used to put up content, clue, short video clip or image that does not need to be displayed at once. Well, the tooltips can be of different visual styles and positions (relative to the cursor or to the element), they can go with a callout connector or just have simple shapes. You can see them tracking along with the cursor movement over the element, but it will be always positioned adjacent to the trigger element. The choices are many – we would like to suggest you some solutions you can configure and style to fit your website’s design.
If you don’t want to waste your time digging into this coding stuff, we can suggest you the solution you need to have it all on your website straight off. Extended Package Templates offered at TemplateMonster go packed with a range of awesome tooltip functionalities. In any design you can find three different tooltip versions such as standard, fixed & onclick tooltips that could make your site more user-friendly and attractive when hovered.
* * *
TipTip jQuery Plugin
* * *
Orbital Tooltip
* * *






So, do you want your website to be properly displayed on mobile devices and tablets? If yes (and we’re pretty sure it is ‘yes’) then it is time to think about how to make your layout more responsive. Being one of the most discussed web design trends of the year of 2011 responsive web design keeps moving forward by providing new efficient solutions for web developers and webmasters. Today this trend will be presented by the awesome jQuery plugins for responsive design. We’ve tried to put together various types of plugins that will help you to properly display your content on mobile devices, and by content we mean not only images but also fonts, videos and even grid system to make things look nice on small screens. Also don’t forget to look trough our article that would guide you through the basics of responsive web design – How to Get Started with Responsive Web Design. Now let’s get back to our list of jQuery plugins.
1. Responsly.js
Responsly jQuery plugin perfectly works with laptops, tablets and mobile device screens. It has pure CSS styling and is compatible with all modern browsers (IE drops transition support only). It is a very lightweight plugin that can be easily customized be editing CSS file.
* * *
2. Photo Swipe
Photo Swipe is a Javascript-powered image gallery plugin that has been created mostly for mobile devices. With it your visitors will be able to browse your website with a familiar and intuitive interface.
* * *
3. FitText
FitText makes font sizes flexible which means that all headlines on your website will be scalable. This plugin is another step that will help you make your layout more responsive.
* * *






Inspite of the wide choice of various web design solutions with awesome extra features, you are always looking for the one that will fit your business ideas in the best way. Of course, wallet-friendly and ready-made solutions are at your preferences. The professional, simple and effective themes are of biggest demand, and today you are welcome to get one of them – Free Website Template with jQuery Slider for Business Project.
We hope that you will like it because of its powerful functional background and visually attractive layout. Such stylish solutions in dual color scheme are considered to be among the most widely used in web templates for business projects. jQuery slider in the header of this theme will not become a surprise for you, it’s rather another pleasant feature of this free website template. Here it is – free template live demo for you to check out the rest of cool characteristics of this theme. You are welcome to try the theme we are providing you today and start your own profitable online business on its basis!
Free Website Template with jQuery Slider for Business Project:
As usual, you can get this free website template in two ways: with PSD source files included and without them. Follow the link below and download HTML source files. To download this theme with PSD source files, visit the Free Website Template with jQuery Slider for Business Project download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Feel free to use this template for your business, but you cannot resell it as a template.
Download Free Website Template with jQuery Slider for Business Project with PSD files (9,18MB)
Download Free Website Template with jQuery Slider for Business Project without PSD (778KB)
IMPORTANT NOTICE: TemplateMonster does not provide support services on free templates – including this one. We only provide support for the products that are being purchased from TemplateMonster. Our free templates are produced according to the latest web standards and we’ve been trying to make the process of working with them as easy as possible, so for people with minimum web development experience it should be easy to work with them. However, if you don’t have any experience, we recommend you to refer to the tutorials or community forums on how to work with platforms that each respective template is made with, or to hire someone to do the job for you.






It’s needless to say that navigation menu is the cornerstone of any website. Its design and functionality deeply affects the positive experience for the visitors during the time spent on your website. Due to the rapid development of web technologies during the past few years today any website owner has a wide choice of various navigation solutions with awesome extra features. Of course jQuery library is the true leader of this field. JQuery-powered menus are very reliable, simple and spectacular. Now if you are interested in improving your jQuery skills than you should check out navigation menu jQuery animation tutorials below. The great thing about these resources you can build powerful navigation menus with spectacular effect. So, basically you’ll have visually attractive menus with powerful functional background.
Also, in case you want something that’s already ready to be used, check out the awesome jQuery templates that we have at TemplateMonster, there are a lot of options with interesting navigation menu solutions there.
How to Create a jQuery Animated Sliding Sub-Menu Navigation
* * *
Animated Content Menu with jQuery
* * *




















![jquery-animation-navigation-menu-tutorials-1 jQuery Animation in Navigation Menu [TUTORIALS]](http://blog.tmimgcdn.com/wp-content/uploads/2011/11/jquery-animation-navigation-menu-tutorials-1.jpg?9d7bd4)
![jquery-animation-navigation-menu-tutorials-2 jQuery Animation in Navigation Menu [TUTORIALS]](http://blog.tmimgcdn.com/wp-content/uploads/2011/11/jquery-animation-navigation-menu-tutorials-2.jpg?9d7bd4)




Rss Feed: