I used the model dialog box, In that form I want to use the jquery form validation. code for Jquery form validation with modal dialog box with custom messages.
Jquery form validation with modal dialog box with custom messages
$(function() {
//simple example 1
//click event for first button
$('#btn').click(function() {
$("#form1").valid(); //validate form 1
});
//example to validate inside a dialog box
//dialogopen button click event
$('#dialogbtn').click(function() {
$( "#dialog-form" ).dialog( "open" );
});
//code for dialog
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Save": function() { //on click of save button of dialog
if($('#form2').valid()){ //call valid for form2 and show the errors
//alert('submit form'); //only if the form is valid submit the form
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
After this i wanted to added the custom error messages.
I used the following code:
jQuery(function ($) {
$("#form2").validate({
errorLabelContainer: '#errors',
messages: {
email: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
name: {
required: "Please enter your name"
}
},
submitHandler: function () {
return false;
}
});
});
WordPress itself uses the jquery in all wordpress themes and loads automatically. But it is always good to load the jquery library through google CDN. It saves your sites bandwidth. Many people already written about same so here I am just putting the method.
Load jQuery library from Google CDN
Load the jQuery library from Google CDN is always good for seo and better performance of site. WordPress itself uses the jquery in all wordpress themes and loads automatically.
For more libraries you can visit the following URL:
https://developers.google.com/speed/libraries/devguide
What you need is, just copy and paste the following code into your functions.php file.
function jquery_from_google_cdn() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1');
wp_enqueue_script('jquery');
}
}
add_action('init', 'jquery_from_google_cdn');
Many latest framework are loading all javascript in footer. They reduce the page loading the errors. But wordpress load the jquery and other javascript in header.
loading javascript libraries in footer will be always best for every web or mobile application. Here in this article, I will show to Load jQuery in wordpress footer section.
But using following code you can load your javascripts and jquery in footer area. You just need to copy and paste the following code into the functions.php file.
Load jQuery in wordpress footer section
function wpai_add_jquery_in_footer( &$scripts) {
if ( ! is_admin() )
$scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'wpai_add_jquery_in_footer' );
After doing the this you js scripts will load in footer. This js will load in footer for only normal users, Not for admin user.
Load jQuery in wordpress footer section will be best
In every second wordpress sites we used the slider or slideshow. Sliders are very important in wordpress sites. There are many requirements about different types of sliders. Here I collected some very popular jquery wordpress slider plugins. Slider plugins are required in very second wordpress websites. I tested the following wordpress plugins and it found great features..
This is a highly customizable jQuery Slider plugin. You can set its width, height, pagination and other parameters. You can use it on your post or page using schortcode
The ‘JJ NextGen JQuery Slider’ allows you to create a ‘Nivo slider’ (http://nivo.dev7studios.com/) as a widget or as a shortcode. This plugin uses the ‘NextGen Gallery’ plugin for its images.
Promotion slider is a jQuery slider that makes it easy to insert a simple slideshow, or implement multiple rotating ad zones, on a webpage. Because it is highly-customizable, you are in complete control of what shows on the slider, what shows on your promotion pages and how it all works. A simple options page and straight-forward shortcodes provide great flexibility to the average user, while power users can take advantage of special actions and filters built into the plugin to add their own customizations.
WP Orbit Slider is based around the jQuery Orbit Slider from the excellent team Zurb. It uses a custom post type for each slide and taxonomies to create slider groups. The restriction is one slider per post/page. Dont fill your pages with sliders. Use one. Make it bold and get your message across!
The Simple Nivo Slider plugin provides easy access to Gilbert Pellegrom’s excellent jQuery-based Nivo Slider. The admin panel makes it easy to tweak the most commonly used Nivo Slider options from within WordPress.
Cyclone Slider 2 follows the keep it simple mantra. It leverages WordPress’ built-in features. It uses custom post for the slideshow, custom fields to store settings, and media uploader for the images. It also uses a template system that allows developers to easily customize the slideshow to their needs. Its simple yet flexible.
Features:
Very easy to use interface! Blends seamlessly with your WordPress workflow.
Supports image, video, and custom HTML slides.
Powered by Cycle 2, the most flexible jQuery slideshow plugin.
A template system that allows developers to easily customize the slideshows.
Customizable tile transition effects.
Ability to add per-slide transition effects.
Unlimited slideshows.
Unique settings for each slideshow.
Supports random slide order.
Shortcode for displaying slideshows anywhere in your site.
Ability to import images from NextGEN (NextGEN must be installed and active).
Ability to use qTranslate quick tags for slide title and descriptions (qTranslate must be installed and active).
Allows title and alt to be specified for each slide images.
Comes with a widget to display your slideshow easily in widget areas.
I created many wordpress themes for various purpose and clients. Jquery is common requirement for all the project. That is for menu, slider or validation and for effects. In wordpress adding the Jquery is very easy because wordpress itself uses the Jquery for admin panel. They provided the wordpress api for adding the jquery in wordpress theme files.
smart way to use jquery in wordpress theme
wordpess developers are always looking for wordpress jquery plugin, wordpress include jquery, wordpress jquery ui, wordpress jquery noconflict, wordpress jquery theme, wordpress jquery version, wordpress jquery slider, wordpress jquery not working. Here is the solution
smart way to use jquery in wordpress theme
Following is the simplest way to add jquery in wordpress theme.You just need to use the following code in your wordpress theme functions.php file.
function my_init() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
This way you can easily add the juqery in wordpress theme.
You can add the jquery from google also. Because google also like jquery. You just need to put the following function in your functions.php file.
function my_init() {
if (!is_admin()) {
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
}
}
add_action('init', 'my_init');
Main reason adding jquery from google is that will load the jquery faster in your site.
How you can use jquery in your theme.
you can use the jquery anywhere in theme file as follows
jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});
For DOM ready function or onload event you can use the juqery as follows.
jQuery(document).ready(function($) {
//Your custom code will goes here.
})
You can use the above function for slider or menu and any effect in your wordpress theme.
If you want to know about more Jquery and wordpress then you can refer following articles.
Jquery is most powerful javascript framework and which is used widely. WordPress is most powerful and famous cms in the world. When you are using the jquery in wordpress that time you need to keep in mind some issues. WordPress itself uses the jquery in there framework. But when we tries to add the different versions of jquery and there plugins, there was issue or conflict with jquery. Sometimes I saw issue with some plugins due to different versions of jquery. I shown in this tutorial, how to solve the wordpress and jquery conflicts easily.
wordpress and jquery conflicts – How to solve that
wordpress and jquery conflicts
Many people written the jquery wrapper around the jquery. They written in different style but when some jquery developers written or used same function name or same methods then jquery conflicts is happening.
WordPress itself uses the jquery for custom purpose. So you dont need to add the jquery script again in to wordpress. you just need to put following code in your wordpress theme for adding the jquery in your theme.
<!--?php wp_enqueue_script("jquery"); ?-->
Just put above lines in your header.php file for adding the jquery into your wordpress theme.
For removing the conflicts when you are using the jquery functions. just use following noconflict code in that.
$.noConflict();
// Code that uses other library's $ can follow here.
This technique is especially effective in conjunction with the .ready() method’s ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:
<script type="text/javascript">// <![CDATA[
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
// ]]></script>
Following is the some example for remove the conflicts from jquery with wordpress.
Just use the jquery multiple times for each jqeury plugins. That is the easiest way to solve the jquery conflicts.
But if you are having some knowledge of jquery then use the following code for remove the conflict.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
For many purpose we use the jquery in wordpress. Mainly jquery is used for sliders and menu and gallery.
For menu or slideshow use jquery in following fashion.
[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]
<script type="text/javascript">// <![CDATA[
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
// ]]></script>
[/viral-lock]
If you still facing issue with jquery then please write to me on support@purabtech.in.
Here are some useful resources and links about Jquery and wordpress.
Jquery is most popular and used javascript library which is used for multiple purpose. Every developer is using CSS and Jquery for modifying the UI and usability. Here I collected the more then 100 jquery and CSS techniques and tips and tutorials in this article. This articles are useful for every Jquery developers.
We collected the more then 100 jquery and CSS techniques and tutorials in this article.
Photo Zoom Out Effect with jQueryJquery is most popular and used javascript library which is used for multiple purpose. Every developer is using CSS and Jquery for modifying the UI and usability. Here I collected the more then 100 jquery and CSS techniques and tips and tutorials in this article. This articles are useful for every Jquery developers.
Interactive Photo Desk with jQuery and CSS3
In this little experiment you will create an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
By using the jQuery Color plugin, you can animate colors. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 features (rounded corners and drop shadow), you can create a Colorful rating system.
Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. By combining CSS3 and jQuery, you will create, in this experimental tutorial, two records that you can start spinning (faster and slower) and even scratching is enabled.
In this quick tutorial, the developer is going to explain how you can have a nicely floated list of items and you will use jQuery to make sure IE understands it too.
In this tutorial you are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lightbox gallery around it.
CSS3 Glow Tabs
You will learn how to recreate the ‘hover glow tabs’ from the jQuery Conference page, which has a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs and also applied some rounded corners and gradients to complete a very nice effect.
Recreating the MLB.com Content Switcher
The goal of this project is to try to recreate the Flash content switcher from MLB.com, using jQuery and CSS3 and without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
Pretty Simple Content Slider
You will learn how to create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
In this tutorial you will learn how to recreate a variation of MS Words (2007) toolbar that exposes context-related functionality. When user makes a selection in the input field, a Minibar pops up, semi-transparent, above the selection. It disappears when user clicks anywhere in the input field or performs an action by clicking on a Minibar button.
Making a Sleek Feed Widget With YQL, jQuery & CSS3
In this tut you will larn how to build a sleek feed widget, that will fetch any RSS feed and display it in your blog sidebar. You can set it to show the latest blog posts from different categorie, your latest stumbles, or it even display your Twitter mentions.
Awesome Image Gallery using CSS3 and jQuery
The simple CSS3 image gallery (with jQuery) you will be building will be slightly tilted to the side and on hover will move and whenever you click on the image a lightbox will pop out with the larger version of the image.
Kick-Ass jQuery & CSS3 Gallery With Animated Shine Effects
You will be shown how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
A Sexy Vertical Sliding Panel Using jQuery And CSS3
Here you can learn how to make a vertical sliding panel that will act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it is open.
Pure CSS3 Bokeh Effect with some jQuery help
IThe bokeh effect is currently a very popular trend amongst designers and in this unique tutorial you will learn how to create a pure CSS3 version of the effect. With some help from jQuery, you can add some randomness the the colors, sizes and vary the positions of the effect.
Create a Nifty Dynamic Shadow with jQuery
Here, Daniel Kurdoghlian, will show you how to recreate the very nifty looking dynamic shadow effect he created for his very popular CSS3 and jQuery experiment. He walks you through every step of the tutorial by using a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base.
Create A Multiple URL Shortener Page
In this tutorial, you’ll be shown how to create a simple page that will show short urls created by multiple url shortener services. You’ll be using HTML5, CSS3 for styling as well as jQuery for working with Ajax.
In this tutorial you will learn how to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Beautiful Looking Custom Dialog Box With jQuery and CSS3
This dialog box uses CSS3 drop shadow and a completely CSS3 styled button. So, latest version of Chrome, Firefox and Safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient.
Making a Mosaic Slideshow With jQuery & CSS
When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. In this technique you will be making a jQuery & CSS mosaic gallery, featuring an interesting tile transition effect when moving from one slide to another.
Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, you show the images of that album as a beautiful photo stack. In the photo stack view, you can browse through the images by putting the top most image behind all the stack with a slick animation.
Interactive Image Vamp up with jQuery, CSS3 and PHP
In this technique you will be shown how to create an online application for giving some funny touches to an image, using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.
CSS3 & jQuery Image Effects Image Highlighting and Preview with jQuery
In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context.
CSS3 Rounded Image With jQuery
In this tutorial you will learn how to give an image rounded corners using the CSS3 border-radius and box-shadow properties and using jQuery to automatically wrap a span tag around the image.
CSS3 & jQuery Menu and Navigation Tutorials Contextual Slideout Tips With jQuery & CSS3
With this tut you will learn how to make a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
Elegant Accordion with jQuery and CSS3
Here you will create an elegant accordion for your sites content. The idea is to have some vertical accordion tabs that slide out when hovering. You will add some CSS3 properties to enhance the looks.
In this tutorial you will create a unique bottom slide out menu. This large menu will contain the title and a description of the menu item and it will slide out from the bottom revealing the description text and icons. You will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.
Sweet AJAX Tabs
Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. In this tutorial you will be making an AJAX-powered tab page with CSS3 and version 1.4 of jQuery
Mac-style Skype Application Menu
Using CSS3 and jQuery for extra functionality you will learn how to recreate the amazing slick Skype (for Mac) layout. (Not the full layout: Only the menu where all your friends are listed).
Halftone Navigation Menu
In this tut you will be making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
Create Accordion Menu Using CSS3 Transitions
There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, you’ll see how to make an accordion
All web developers know about jquery. May be all of us know or heard about jquery. Jquery is javascript open source library. WordPress itself uses the jquery library for long time but many developers does not know about that.
Because When we develop new wordpress themes then we include the jquery files in that theme.
jquery tips for wordpress theme developers
jquery tips for wordpress theme developers
In this tutorial I will give very simple and basic tips about using jquery in wordpress themes. Using jquery we will introduce very nice effect in our website. with jquery we can generate the more traffic to our website.
Jquery is very lightweight javascript framework. Many web developers developed developed the third party effects and code with jquery.
We can add the Jquery in wordpress theme with very minimal effect. wordpress is given the api for including the jquery in our wordpress theme.
Add Jquery in wordpress theme
For adding the jquery in wordpress you just need to use header.php or functions.php file and put following code in that file.
For header.php put following code in that file.
we collected some unique of accordion JS scripts samples. we personally tested the scripts. All scripts are based on jquery. Jquery accordion used by everyone.
MooTools Accordion example: http://davidwalsh.name/dw-content/accordion.php
this has single ‘moo1.js’ (133KB) un-compressed version with first visible accordion, onclick backgroud color change
