Archive for the ‘jquery’ Category

Submit A Form Without Page Refresh using jQuery

Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let’s get started.

Submit A Form Without Page Refresh using jQuery

Fancy Sliding Form with jQuery

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

jquery form

A jQuery inline form validation, because validation is a mess

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

A jQuery inline form validation

Improved Current Field Highlighting in Forms

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it’s own hands and applies a glowy blue border around active form elements

Improved Current Field Highlighting in Forms

Adding Form Validation to WordPress Comments using jQuery

When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial I’ll show you how to use jQuery to do some instant checking on an example comment form.

Adding Form Validation to WordPress

Form Validation using jQuery

Ah… form validation. A subject that has been the source of debates ever since Web browsers were born. There are as many ways to implement form validation as there are opinions of the best way to do it. This article discusses client-side validation using jQuery’s validation plugin. That is, we will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.

Form Validation using jQuery

Build An Incredible Login Form With jQuery

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it.

Build An Incredible Login Form With jQuery

Changing Form Input Styles on Focus with jQuery

A lot of forms can be boring and plain, don’t let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Changing Form Input Styles on Focus with jQuery

Ajax Forms with jQuery

There are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.

Creating a Digg Style Sign Up Form

Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

Creating a Digg Style Sign Up Form

Creating Slick Forms Using Ajax, jQuery & CSS: No More Ugly Forms

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Impressive techniques using some jQuery magic to style slick forms with a simple, rich user experience that gets them excited about your contact, register or whatever form you have.

Creating Slick Forms Using Ajax

Build a Simple Password Strength Checker

Providing instant feedback is the in-thing right now. Why limit yourself to checking usernames and email addresses? Why not extend this to provide quick visual feedback about the strength of the password the user has input? Today, we’ll take a look at how to create a simple password strength checker using the jQuery library, regular expressions and a simple algorithm.

password checker

A fancy Apple.com-style search suggestion

Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design.

A fancy Apple.com-style search suggestion

How to Add Auto Complete to Your Google Custom Search Engine

This tutorial will show you how to use the “Popular Queries” feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.

How to Add Auto Complete to Your Google Custom Search Engine

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.

Checking username availability

25 jQuery Plugins for Working with Forms

Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post we’ll feature 25 useful plugins that you may be able to use in your own work with forms.

jQuery Plugins for Working with Forms

Simple Slide

Jquery Image And Slider Plugins – simpleSlide is a very open-ended plugin that writes itself around the way you want to use your slideshow plugin. Whether you want a photo slideshow, a text-based slide presentation, a mix of both, an automated slideshow, a step-by-step form application (with the ability to jump back to unvalidated fields) and whatever else you can imagine using it for. It can even create a status slider element for with you with little more than an integer parameter and a couple lines of markup.

Simple Slide

Nivo Slider

The Most Awesome jQuery Image Slider.

Nivo Slider

AJAX-ZOOM jQuery Image Zoom & Pan Gallery, PHP

I know this is not simple but if you want powerful image gallery plugin then ajax-zoom is the answer.AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website. AJAX-ZOOM uses image tiles to quickly generate a portion of an image. It also has the ability to watermark zoomed portions on the fly thus adding protection to the source image. The program supports Gdlib and ImageMagick and can be used as gallery script or stand alone image zoom interface.

AJAX-ZOOM

Visual Lightbox

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

Visual Lightbox

jQuery stackem

jQuery stackem

Zoomer Gallery

In today’s post, I’m going to be giving away a new plugin for jQuery that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

its superman

Improved Micro Image Gallery: A jQuery Plugin

Here’s an improved version of the Micro Image Gallery Plugin. I have added some features as suggested in the comments, specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To add descriptions for the images, just place your text inside the alt attribute of the image tag, like shown further in the HTML Structure section.

Improved Micro Image Gallery

Designing Drop-Down Menus: Examples and Best Practices

Great Examples & Tutorials Of Mega Drop-Down Menu – As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

Mega Drop-Down Menu, Enjoy It Responsibly!

A perfect website is the result of the application of several techniques that come from different fields. The most famous trends in the modern web design are just the perfect combination among rules from design, web usability, user interface design, science behind HTML, CSS and Javascript.A relatively recent trend is the use of mega drop-down navigation menus. They are simple to build and have a great appeal for the users.

Mega Drop-Down Menu

Mega Drop-Down Menus (33 examples)

Mega drop-down menus are characterized by large panels divided into groups of navigation options. By structuring navigation choices through the use of layout, typography, and icons, everything is visible at once which avoids the need to scroll.

examples of Drop-Down Menus

A Trend of Multi Column Mega Drop-down Menus with 30 examples!

The Navigation Menu plays a key role in any website, either it is a drop-down or a simple one. Its ok for small sites with 5 to 6 menu items, you will have more options to present the menu with better navigation by giving good look and feel by taking the latest web trends & usability into consideration.But what if you have a huge portal or a site with lots of content to feature to the visitors of your site? That’s the first and main question comes to every designer and developer before they plan to develop a website. It’s the same case with me – I always dig into different kind of sites like magazine, news, huge portals etc. to find how others are giving better navigation – the different ways/approaches to present the menu by highlighting their key sections/parts of their site.

A Trend of Multi Column Mega Drop-down Menus

Mega Drop Down Menus w/ CSS & jQuery

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

Mega Drop Down Menus w/ CSS & jQuery

How to Make a Mega Drop-Down Menu

Mega drop-down menus are not actually new, but more and more we see them on popular websites and blogs. With the ever increasing quantity of content on the web we have to figure out solutions to display content and navigation but still keep everything usable and provide a good user experience. It’s no wonder mega drop-downs are now used more often.Today we’ll take a look at creating a simple HTML site with a horizontal navigation bar where a menu item will have a mega drop-down attached to it. I used jQuery for the drop-down and some CSS3 for the rounded corners.

How to Make a Mega Drop-Down Menu

24 Clever Website Designs That Combine jQuery and Illustration

jQuery And Web Design – Thanks to the might of JavaScript, the words “dynamic” and “illustration” no longer apply exclusively to Flash-based websites.Now that dynamic HTML is a reality in most commonly used browsers and that a lot of fancy JavaScript libraries exist to make using it easy, CSS websites can take back some of the street cred held so tightly by Flash.Of these new JavaScript libraries, jQuery has become one of the most widely adopted because of its ease of use, breadth of features and initial focus on visual uniqueness.Here are 24 clever examples of website designs using jQuery and Illustration.

10 Cool Websites with Amazing jQuery Effects

jQuery framework is getting really hot nowadays. A lot of websites have started to use it as the javascript framework. For myself, I too stick with jQuery because it has a really good documentation, a lot of tutorials out there (I have written heaps of them as well 🙂 ), heaps of plugins available and most importantly it’s pretty stable and supported by most modern browsers.Before jQuery, I hated javascript, but now, jQuery has changed thing around, it has changed the way we code javascript and make it really easy and enjoyable! Alright, too much of compliments (by the way, noone pays me to say that).Alright, it’s time to show you something cool. Check out the following websites, they all are using pretty amazing animation and intensive javascript effects!

25 Beautiful Websites That Use jQuery

Among the major benefits jQuery delivers is the ability to add motion effects and interactive features that don’t require a web page reloading. Besides, it’s much easier and faster to learn and in many cases it can be a decent alternative to Flash templates. No doubt, Flash has a way more extensive list of features, which makes it a preferable option for creating some complex multimedia, audio/video players, animation and 3D. However, when it comes to designing some particular website elements, like slideshows, drop down menus, validation forms, popups/tooltips, expandable elements, etc, jQuery can be a more effective and time-saving solution.

A gallery showcasing awesome sites built with jQuery

30 Tutorials Combining Both WordPress and jQuery

Jquery-WordPress Plugins & Tutorials – Take the most popular CMS, WordPress, and then take the easiest and most versatile of Javscript libraries, jQuery, and you have a match made in heaven. Implementing jQuery within WordPress is a lot easier than you would think, all you need is a little support from the huge WP community and a little patience, and you are good to go. Below you will find 30 Tutorials Combining both WordPress and jQuery.

The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials

jQuery is ideal because it can create impressive animations and interactions while being simple to understand and easy to use. WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of jQuery with WordPress, the possibilities are infinite.

Jquery Plus WordPress : Plugins and Tutorials

WordPress is one of the famous blogging and CMS platform used by bloggers and now many corporate websites too. And jQuery is one of the most famous javascript framework used this days. So today we have collected some plugins along with tutorials which combines both wordpress and jquery.

10 Awesome Tutorials Combining WordPress And jQuery

Roundup of 10 awesome jquery tutorials that combine WordPress and the most famous javascript library – jQuery. Enjoy.

35 Stylish And Modern WordPress Plugins Using jQuery UI

n this post you’ll find out about very flexible and stylish WordPress plugins, which are based on Jquery UI. For a long time now jQuery has been very popular and modern approach displaying text, images, search, comment boxes etc. in modern way without any use of flash!Release jQuery power and enjoy benefits right now – hope you like my findings and you’ll put them in good use.

How To Build A Custom jQuery Selector

The other day, I wanted to build a custom selector in jQuery. I’ve built a basic one before, but the one I wanted to build this time was more complex; this one would required arguments to be passed into it. I looked all around the jQuery.com website and through Google and I had a really hard time trying to piece together how a complex, custom jQuery selector should be built. After a lot of searching and much trial and error, I think I finally figured it out.

5 Ways to Make Ajax Calls with jQuery

There are at least five ways to make AJAX calls with the jQuery library. For beginners, however, the differences between each can be a bit confusing. In this tutorial, we’ll line them up and make a comparison. Additionally. we’ll review how to inspect these AJAX calls with Firebug as well.

Building Your First jQuery Plugin

So you were out on your quest to find the answer to life, the universe, and everything, when blam, you found jQuery. Yes, I know, you were expecting 42, but too all of our surprise, it was jQuery. So what’s next? Build your own plugin!

jQuery: Understanding the “chain”

Yesterday I was writing some jQuery code and I thought I came across a bug—until I realized it was a bug in my way of thinking and not with jQuery.What I was trying to do is to dynamically append to the body tag some html that looked like this

Improve your jQuery – 25 excellent tips

jQuery is awesome. I’ve been using it for about a year now and although I was impressed to begin with I’m liking it more and more the longer I use it and the more I find out about it’s inner workings.

Regex Selector for jQuery

A while ago I published an article explaining the utter awesomeness of extending jQuery’s filter selectors. Building on that here’s something new; a regular expression selector. jQuery’s current attribute selectors (CSS3) do allow basic regex notation but no where near as much as this

[CSS3] jQuery Dropdown Navigation in WordPress

Today, we will learn how to enhance you WordPress in a whole new way. Multi-Level or Multi-Dimensional navigation menus can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. We will start off by making a HTML version, then making it compatible with WordPress.

Slick Drop down Menu with Easing Effect Using jQuery & CSS

Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool, while still being an attractive design feature.

jQuery Drop Down Menu for RSS Subscription Tutorial

I came across some websites with a drop down list specially made just for RSS subscription. They do it that way because they have different RSS feeds for different categories. I think it’s quite useful because it grouped all the RSS feeds together and display it only when the users want it. Space saving and more simple user interface.So, here we are, we will be creating a simple drop down menu for it. It’s easy to skin, and easy to understand how it works as well.

Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features

Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

Multi-level Menus with jQuery and CSS

Lately I’ve seen quite a few requests on Twitter and other places for multilevel menus using jQuery and/or CSS. There are quite a few ways to accomplish this and it largely depends on what your needs are.


Kategoriler