Archive for the ‘jquery’ Category
- jquery | jquery tutorials | plugin içinde
- 2 Comments
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.
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.
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.
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
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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 | plugin içinde
- Yorum Yapın
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.
Nivo Slider
The Most Awesome jQuery Image 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.
Visual Lightbox
Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.
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.
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.
- css | design | inspiration | jquery içinde
- Yorum Yapın
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 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.
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.
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”.
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.
Beautiful Web Designs With Jquery
Posted on: Mayıs 28, 2010
- inspiration | jquery | web design içinde
- Yorum Yapın
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
- jquery | jquery tutorials | wordpress içinde
- Yorum Yapın
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.
jQuery KungFu
Posted on: Mayıs 2, 2010
- jquery | jquery tutorials içinde
- Yorum Yapın
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
- css | jquery | jquery tutorials içinde
- Yorum Yapın
[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.
