Archive for the ‘jquery tutorials’ 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 | 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.
- jquery tutorials içinde
- Yorum Yapın
How to Build a Lava-Lamp Style Navigation Menu
A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.
Create Portfolio Website With CSS/jQuery
Since last some weeks i have started learning jQuery, and today i thought why not give a tutorial on jquery and css. So i come up with this amazing tutorial (amazing for me atleast), which uses only pure CSS and jQuery to design a whole portfolio website, no photoshop or any other design software required. Here we go…
Jquery CSS Tutorial on Zooming Image
Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing.
Working with cookies using jQuery and JavaScript
Today i want to go over a few techniques to easily use cookies via jQuery (much easier) or pure javascript.
10 jQuery Transition Effects: Moving Elements with Style
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 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.
10 Awesome jQuery and JavaScript Snippets
Awesome collection of jQuery and JavaScript snippets. Enjoy.
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!
Create Background Scrolling Effect with jQuery
In this tutorial, we’re not only go through how to make it, we will have it in plugin as well which allow user to customize the speed of the movement and direction (vertically, horizontally and diagonally).
Jquery-Ajax Tutorials And Examples
Posted on: Mart 23, 2010
- jquery | jquery tutorials içinde
- Yorum Yapın
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.
Beginners Guide to Using AJAX with jQuery
AJAX offers users a seamless way to work with your interface, no waiting for whole pages to load. jQuery has a set of tools to make it super simple to implement. We will walk you through how to use jQuery to connect to PHP so you can step up your user interface.
Quick and Dirty AJAX
I’m trying something a little different today. It took me a while to figure out why I couldn’t open a free account with YouTube for about 3 weeks but now that it’s all straightened out I thought I’d upload a video where I walk you through some of the basic ways you could use jQuery to add AJAX functionality to your site.
Simplify Ajax development with jQuery
jQuery is a JavaScript library that helps simplify your JavaScript™ and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.
Fancy Quotes With jQuery, AJAX & CSS
Today we are making a fancy quote rating system that will display a number of famous quotes and will enable our site visitors to rate their favorites.
- jquery | jquery tutorials | tips içinde
- Yorum Yapın
10 Easy jQuery Tricks for Designers
There are plenty of jQuery tricks and techniques out there, and the vast and powerful jQuery library can meet almost anyone’s JavaScript’ing needs. Since jQuery makes JavaScript accessible to designers who want to add simple interaction and visual techniques into their design without knowing extensive programming knowledge, it’s worth a few moments to explore this excellent library.
8 awesome JQuery tips and tricks
Who doesn’t like JQuery? This fast and easy to use Javascript framework became very popular in 2008. In the following article, I have compiled a list of 8 absolutely useful JQuery hacks, tips and tricks.
20 Top jQuery tips & tricks for jQuery programmers
Following are few very useful jQuery Tips and Tricks for all jQuery developers. I am sharing these as I think they will be very useful to you.
5 Tips for Better jQuery Code
I’ve been coding using jQuery since shortly after it came out, and well — I’ve been using it almost every work day. Here is a few tips that have saved me time.
10 Advanced jQuery Performance Tuning Tips from Paul Irish
26 cool and useful jQuery tips, tricks & solutions
The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.
- jquery | jquery tutorials içinde
- Yorum Yapın
Create a Fun Tweet Counter With jQuery
n this tutorial, we will look at using jQuery to call Twitter’s API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.
A jQuery Twitter Ticker
In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
jQuery Twitter API plugin
You might have noticed that I am talking and spending more time on Twitter lately. I have been helping Twitter users with their jQuery related questions and problems as well. If you are using Twitter and have some kind of jQuery related question I will be happy to help.
How To Get Digg, Delicious and Tweet Counts Using jQuery
Majority of online services allow you to access some of their data through public API methods. Unfortunately most of the data formats served by these APIs can only be accessed using server side code. This is mainly due to JavaScript’s same origin policy, which restrict it from loading data from remote sites.
Using the Twitter Search API
Twitters new search feature is great for finding interesting people and topics to follow. So i wrote a script to get search results from twitter and display them on your site. This could be integrated into an existing application or used standalone to follow a particular topic or keyword on twitter,
jQuery – PHP & Ajax with the Twitter API
So for today’s blog post I am going to show you how you can use jQuery, PHP and a little ajax to connect up to the Twitter API and return results. I’ll cover off unauthenticated calls today to the search API, and follow up with the authenticated piece a little later, so watch out for that!
- jquery | jquery tutorials içinde
- Yorum Yapın
These are really amazing Jquery tutorials.Here i have collected 13 Incredible Jquery Tutorials For Playing With Images.I hope these tutorials could be useful for you.
Making a Photoshoot Effect With jQuery And CSS
We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
Making a Cool Spotlight Effect with jQuery
In this tutorial we will make an amazing effect i saw on a portfolio of an argentinean designer which is so great i had to write a tutorial about it. Here it is…
Create a Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web. (Take a peek at the final product.)
Create a Slick and Accessible Slideshow Using jQuery
In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.
Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
Photo Slider Tutorial
Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
Creating a polaroid photo viewer with CSS3 and jQuery
Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
Fancy Thumbnail Hover Effect w/ jQuery
Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.
Create an Image Rotator with Description (CSS/jQuery)
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
jQuery Slideshow Explained
Homepages generally don’t have enough space for all the promotions clients want to put on there. The homepage slideshow is a great space saving solution, while keeping your homepage from looking like a dollar store advert. This post will walk you through the code of a jQuery slideshow.
jQuery Thumbnail with Zooming Image and Fading Caption Tutorial
How to Create a Visual Image Preloader using jQuery
I have been searching the web for methods on how to visually preload the images on your site. I have found a few good ones but they require a defined source or path and that doesn’t work for me. I needed something to preload any image from any source or URL. So I gave up the search and created a simple solution for myself. Read on to find out how I did it.
- jquery | jquery tutorials içinde
- 1 Comment
Image galleries, sliders and slideshows have become increasingly popular within webpages over the last year or so, and with jQuery becoming ever more popular, more and more developers have been creating these amazing powerful, versatile and sleek galleries. Thank you jQuery.Below you will the most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.And here are Awesome Jquery Image Slider Tutorials And Plugins.
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials
37 Fresh jQuery Image And Gallery Display Solutions
25 jQuery Image Gallery/Slider Tutorials and Plugins
15+22 jQuery Image Slideshow/Slider Tutorials and Plugins for Your Next Projects
Top 10 Javascript slideshows, carousels and sliders
Top 14 jQuery Photo Slideshow / Gallery Plugins
Top 17 jQuery Photo Slideshow / Gallery Plugins
10 Superb Image Effects and Slider Tutorials with Jquery
