Archive for the ‘jQuery’ Category
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
![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-1")
* * *
Animated Content Menu with jQuery
![jQuery Animation in Navigation Menu [TUTORIALS]](http://blog.tmimgcdn.com/wp-content/uploads/2011/11/jquery-animation-navigation-menu-tutorials-2.jpg?9d7bd4 "jquery-animation-navigation-menu-tutorials-2")
* * *
When WordPress goes paring with jQuery in the process of site development, you can come out with some really smart layout results. Because jQuery allows you to quickly animate your blog, style the navigation menu, add some interactive dynamic elements to showcase works – well this list can be endless as jQuery functions variety is ever-increasing. Most often site owners feel that the space on the front page is not enough to properly render their project objectives – if that is the case then this JavaScript library could be the solution you need. We extend our WordPress Themes with jQuery elements so you could make use of sliders, image/content galleries, show and hide functions as well as other interesting animation effects. You can use the most advanced techniques of this framework and your WordPress powered design will then feel more powerful and easy to browse and interact with. Those of customers who use our WordPress designs enhanced with jQuery already take advantage of everything this two amazing technologies can offer them. Now’s the time for you to benefit from our most advanced WordPress products.
* * *
Jacov WordPress Theme
* * *
JustStephen WordPress Theme
* * *
Zero WordPress Theme
* * *
Why are website forms so important? Logically enough, forms play a crucial role for the website conversion, and therefore impact the project success indicators on the whole. Having some basic knowledge of HTML, you’ll find it pretty easy to generate a standard form. But it’s not as easy to design and style your website form to make it look exquisite and be easy-to-use and accessible for all users at the same time. Hopefully you’ll find the article valuable while designing and coding website forms.
Most of web forms are known to be created with PHP, because it is an open-source coding environment which works perfectly with all major browsers and is widely available. But we shouldn’t stay too conservative and consider the other back-end coding options like ASP, Pearl, Ajax and JavaScript as well as advanced CSS properties to diversify the form appearance and functionality.
Generally, any web form acts in two ways: it generates an email or works with a database. The first rule while working with forms might be to avoid “re-inventing the wheel”. There are tons of open source services for generating the necessary codes and make the form do what it is supposed to do. One of such solution is Web Form Factory and is available for free on the Internet.
Wufoo is another popular option to make the web form creation an easy and painless task. They offer the creation wizard both for free and for the fee. But their prices are quite reasonable for such an efficient way of forms implementation.
Make Use of <Fieldset> And <Legend> Elements
It’s always good to group the related fields together, especially if you generate a lengthy form and require additional usability. The form is to be divided into separate manageable visual components.
The elements like <fieldset> and <legend> are the options to provide such a structuring for your form. The <fieldset> element features a border by default and you may just change or remove it within CSS.
You may group several related fields of a single form using <fieldset> and <legend> elements exactly like in the piece of code below:
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
jQuery with its great features can be a great usability enhancement for an eCommerce Magento site, as it can improve the customer experience by introducing dynamic interactive elements. The layout of Magento website, being enhanced with jQuery content sliders or image galleries, creates a great deal of sense of attraction to site visitors. They will see all the information that appears at the top of your homepage as the content will be in constant rotation or displayed in a very modular and tidy way. Our blog team has already reviewed designs like this before and if you want to see them check out 20 Magento Themes with Extra jQuery Features. These attractive designs will make the browsing experience of every visitor of your website really enjoyable. Now you can also see the list of fresh Magento templates that give us all the standard theme features and are delivered with various jQuery plugins. You can find the full assortment of such designs seeing all Magento themes with jQuery elements.
* * *
Dress Store Magento Theme
* * *
Flooring Online Store Magento Theme
* * *
Parallax effect may not sound like something familiar to you, but believe us – you know what it is and you know it very well. The good old video games where games had moving background and static foreground (or on the contrary) were the first to have used parallax. Nowadays static websites can boast with some cool effects that add dynamics and enliven website navigation with original solutions like parallax. There are many different ways of how you can use this effect on your website. For example the classical static background with horizontally of vertically moving foreground, the in-depth pseudo 3D effects, dancing elements of the menu – there are no limits for your imagination. Here is a collection of 25 websites with parallax scrolling and if you want to surprise your visitors with interesting browsing experience this is a right place to look for good examples. Please don’t forget that parallax effect is a very unusual effect, and you shouldn’t apply it everywhere you want. So use it wisely, because visitors might be distracted with the non-standard navigation ( this may even cause some troubles with conversion rates etc). The perfect area to use parallax is web design studio website and personal web blogs where there can never be too much of creativity!
BenTheBodyguard
* * *
Unfold
* * *
Iutopi
Today we’re happy to share a small Magento hit list which includes originally designed Magento themes enhanced with some flexible and efficient jQuery features. New eCommerce projects keep emerging all over the web at the speed of sound. So, if you are going to start a new online store we think that you should check out our 20 Magento themes that we’ve featured below. Of course you have heard about jQuery plugins and now you can get a Magento template with some useful plugin.
Sliders are the most popular and useful plugin that can be used at the online stores. These great tools enhance your website navigation and make your products catalog more accessible. Also you can often meet such interesting jQuery solutions implemented in our themes as accordions (spectacular navigation solution for the main navigation menu), slideshows (helps to concentrate visitors’ attention at promo products and offers), and animated effects (add to your store more interactivity and attract visitors with spectacular effects).
J&D Clothes Boutique
* * *
Xtrim
* * *
Follow TemplateMonster Updates
Rss Feed: