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.

<script type="text/javascript">
 $.noConflict();
 // Code that uses other library's $ can follow here.
</script>

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" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $.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.

<script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 });
 // Code that uses other library's $ can follow here.
</script>

If you still facing issue with jquery then please write to me on support@wordpressapi.com.

Here are some useful resources and links about Jquery and wordpress.

100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

Incoming search terms:

• wysiwyg wordpress 3 3 1 conflict

Follow us on Twitter WordPress API

Galleriffic

Photo Zoom Out Effect with jQuery

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.

Create A Multiple URL Shortener Page

A Colorful Clock With CSS & jQuery

You will learn how to build a highly original colorful jQuery & CSS clock using Tutorialzines very own jQuery plug-in – tzineClock.

Colorful Rating System with CSS3

Color Lines Free Font

Micro Image Gallery: A jQuery Plugin

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.

jQuery DJ Hero

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.

Floated lists with CSS3 and jQuery

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.

Cross-Browser Rounded Buttons with CSS3 and jQuery

CSS3 & jQuery Image Gallery and Slider Tutorials
An Awesome CSS3 Lightbox Gallery With jQuery

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.

Contextual Slideout Tips With jQuery & CSS3

Annotation Overlay Effect with jQuery

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.

Why and how to create Microsoft Office Minibar

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.

Feature Table Design

In this experimental tutorial you will learn how to recreate the ‘sexy’ table design from Shopify, firstly in Photoshop and then in HTML/CSS.

Simple AJAX Commenting System

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.

Apple-like Retina Effect With jQuery
In this tutorial you will learn the technique of turning a static image into a fully functional “Retina effect” with only jQuery and CSS.
A Fresh Bottom Slide Out Menu with jQuery

COIN SLIDER

Interactive Photo Desk with jQuery and CSS3

menu using CSS3 transitions.

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.

Automatic Image Slider w/ CSS & jQuery

Simple Tooltip w/ jQuery & CSS

Piecemaker XML Gallery

How to Create a Drop-down Nav Menu

Awesome CSS3 & jQuery Slide Out Button

qTip – The jQuery tooltip plugin

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.

Interactive Image Vamp up with jQuery, CSS3 and PHP

Elegant Accordion with jQuery and CSS3

Full Page Image Gallery with jQuery

Create a “Stay-On-Top” Menu with CSS3 and jQuery

Create Your Own Dashboard Menu
A Fresh Bottom Slide Out Menu with jQuery

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

Lens Flare

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).

Making a Mosaic Slideshow With jQuery & CSS

SlideNote

Nice And Simple Toolbar For Your Website

In this tutorial you’ll learn how to build a nice toolbar for your website using some CSS3 properties and basic jQuery techniques.

SuperSized

jqFancyTransitions

Cloud Carousel – A 3d Carousel in Javascript

CSS3 Styled jQuery Dropdown

Beautiful Photo Stack Gallery with jQuery and CSS3

Create a awesome images gallery using css3 and jquery

In this tutorial you are going to create your very own dashboard menu similar to Leopards dashboard.

Image Cross Fade Transition

imgAreaSelect

Awesome CSS3 & jQuery Slide Out Button

Open Standard Media Player

Pretty Simple Content Slider with jQuery and CSS3

CSS3 Rounded Image With jQuery

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.

Image Highlighting and Preview with jQuery

jQuery Smooth Tabs Plugin

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

jPlayer – jQuery mp3 player plugin

QuickSand

Colorful Sliders With jQuery & CSS3

prettyPhoto

Sponsor Flip Wall With jQuery & CSS
ImageFlow

HoverFade

Nivo Slider

Circular Motion Effect with jQuery

How to Create a Nifty Dynamic Shadow with jQuery

jQuery-Notes

jQuery plugin: Easy Accordion

jQuery quickie: Colourful rating system with CSS3

Growl

Control.Tabs

Javascript game engine for jQuery





Follow us on Twitter WordPress API

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.

<?php wp_enqueue_script(‘jquery’); ?>

If you want to use the functions.php file for adding the jquery then use following code.

function insert_jquery()
{
wp_enqueue_script(‘jquery’);
}
add_filter(‘wp_head’,'insert_jquery’);

Above are the very simple and basic tips for adding the jquery in your wordpress theme.

This code will include the latest jquery file in your wordpress theme.

Incoming search terms:

• wordpress api javascript
• wordpress javascript api
• wordpress js api

Follow us on Twitter WordPress API

<script type="text/javascript">

var str="Hello world!";
document.write(str.substr(3)+"<br />");
document.write(str.substr(3,4));

</script>

This function works with following browser.

• Firefox
• Safari
• Opera
• google chrome

There is issue with IE browser. Do not use the substr javascript method – this function is not working in IE browser.

You need to use the substring() method. This is similar to substr. You can achieve your work by using this method.

Following is the working example of substring method.

<script type="text/javascript">

 var str="Hello world!";
 document.write(str.substring(3)+"<br />");
 document.write(str.substring(3,7));

 </script>

Incoming search terms:

• javascript substring(1 1) not working
• substring not working in WordPress
• substring() js no working

Follow us on Twitter WordPress API

Many times we need the fadein and fadeout effect using javascript. But many developers go for jquery for using the simple fadein and fadeout effect. I suggest not to Jquery and Use following code for effect.  This is very minimal code and you can very easily customize the CSS and javascript as per your requirement.

<html>
 <head>

 <style type="text/css">

 .popup {
 border: solid 1px #333;
 font-family: Tahoma;
 font-size: 12px;
 display: none;
 position: absolute;
 width: 300px;
 z-index: 60;
 }

 .popuptitle {
 background: blue;
 color: white;
 font-weight: bold;
 height: 15px;
 padding: 5px;
 }

 .popupbody {
 background: #ddd;
 padding: 5px;
 text-align: center;
 }

 #popup1 { top: 100px; left: 50px; }

 #popup2 { top: 100px; left: 400px; }

 </style>

 <script type="text/javascript">

 var fadeOpacity  = new Array();
 var fadeTimer    = new Array();
 var fadeInterval = 100;  // milliseconds

 function fade(o,d)
 {

 // o - Object to fade in or out.
 // d - Display, true =  fade in, false = fade out

 var obj = document.getElementById(o);

 if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block'))
 {

 if(fadeTimer[o])
 clearInterval(fadeTimer[o]);
 else
 if(d) fadeOpacity[o] = 0;
 else  fadeOpacity[o] = 9;

 obj.style.opacity = "."+fadeOpacity[o].toString();
 obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

 if(d)
 {
 obj.style.display = 'block';
 fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
 }
 else
 fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
 }
 }

 function fadeAnimation(o,i)
 {

 // o - o - Object to fade in or out.
 // i - increment, 1 = Fade In

 var obj = document.getElementById(o);
 fadeOpacity[o] += i;
 obj.style.opacity = "."+fadeOpacity[o].toString();
 obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

 if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0'))
 {
 if(fadeOpacity[o]=='0')
 obj.style.display = 'none';
 else
 {
 obj.style.opacity = "1";
 obj.style.filter  = "alpha(opacity=100)";
 }

 clearInterval(fadeTimer[o]);
 delete(fadeTimer[o]);
 delete(fadeTimer[o]);
 delete(fadeOpacity[o]);

 }
 }

 </script>

 </head>
 <body>

 <input type="button" value="Show Popup 1" onClick="fade('popup1',true);"/>
 <input type="button" value="Show Popup 2" onClick="fade('popup2',true);"/>

 <div id="popup1">
 <div>Fade Popup 1</div>
 <div>
 <p>Press close to fade out this Popup</p>
 <input type="button" value="Close" onClick="fade('popup1',false);"/>
 </div>
 </div>

 <div id="popup2">
 <div>Fade Popup 2</div>
 <div>
 <p>Press close to fade out this Popup</p>
 <input type="button" value="Close" onClick="fade('popup2',false);"/>
 </div>
 </div>

 </body>

</html>

Incoming search terms:

• change color in fadein effect using javascript
• javascript fadeout effect
• js show fade onclick
• fadein fadeout html text div effect using jquery
• fadein fade out pop up code html
• javascript onclick fadein onclick fadeout
• code for fade in fade out effect div
• javascript fadein fadeout effect
• javascript fade popup effects
• javascript array fadein fadeout images onclick
• java script popup with fade out effect
• java script fadeIn() and fadeOut():
• download fadein fade out text effects jquery plugins
• how can i give fadeout effect if my style display is block
• fade out using javascript
• fadein fadeout effects in javascript
• java onclick fadein fadeout

Follow us on Twitter WordPress API

Ajax (pronounced /ˈeɪˌdʒæks/) (shorthand for Asynchronous JavaScript  and XML) is a group of interrelated web development techniques used on the client-side  to create interactive web applications. With Ajax, web applications can retrieve data from the server  asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

If you’re working on Ajax based websites, you’ll always face usability problems when users click on the Back or Forward buttons on the broswer. Using Really Simple History (RSH) allows you over come this issue.

The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.

In addition, RSH provides a framework to cache transient session information that persists after a user leaves the web page. This cache is used by the RSH framework to help with history issues, but can also be used by your own applications to improve application performance. The cache is linked to a single instance of the web page, and will disappear when the user closes their browser or clear their browser’s cache.

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Link: Really Simple History
Demo Link: testDhtmlHistory.html (try using the browser back button after you get to this demo)

Follow us on Twitter WordPress API

Many times we are searching for Javascript and css compression.

Few days before i was searching for Jquery JS library compression.
Yes there is compressed version available but i want to make some changes in JS files as per my project requirements.
So i want to compress my JS and CSS files without getting any error.
YUI Compressor 2.4.2. is the very nice tool for that. But i dont want to spend time on how YUI compressor is working.

So here is solution- I got online YUI compressor.
You can use that:
http://refresh-sf.com/yui/
It has very nice options.

http://compressor.ebiene.de/

http://www.cssdrive.com/index.php/main/csscompressor

Follow us on Twitter WordPress API

Various implementations of Drag & Drop sortable lists using JS and CSS.

“In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.”

Link: Drag & Drop Sortable Lists with JavaScript and CSS

Incoming search terms:

• simon cozens rearranging a list via drag & drop
• rearranging a list via drag & drop simon cozens
• wordpress sortable js

Follow us on Twitter WordPress API

If you want the nice slide animation effect with javascript. you can use following javascript. Here I am not using any third party javascript library for creating the slide effect.

For In page popup slide effect you can use following JavaScript code.

id="popup-container" style="height:200px;weight:200px;overflow: hidden; display: block; position: absolute; z-index: 1027;">

<a href="#" onclick="movead();" ><span>slide</span></a>

</div>

and use the following javscript code in your document.

function movead(){
timerID = setInterval("mocontainer()", 50);
}

function mocontainer(){
 var popup_element = document.getElementById('popup-container');
 animate_moveit(popup_element,0,-5);
}

function animate_moveit(obj, x, y){
obj.style.left = parseInt(obj.style.left) + x +"px"
obj.style.top = parseInt(obj.style.top)+ y + "px"
}

For changing the slide direction change the values in following line and put in to the mocontainer function

animate_moveit(popup-element,-5,0);  – this is for right to left

animate_moveit(popup-element,0,-5);  – bottom to top

You can change that to as per need.

Incoming search terms:

• javascript popup effects
• website javascript popup slider
• sliding pop up javascript
• sliding effect for popups in javascript
• slider popup wordpress
• slider pop up javascript
• slide con pop up en wordpress
• open pop up slider javascript
• javascript slider pop up
• wordpress slide in popup

Follow us on Twitter WordPress API

I you want the minimize functionality for your in page pop-up use following code for minimize and restore button. Following code you can use for showing the minimize button on pop-up.

Note: Here for this example My in page popup div id name is “popup-container”. For using following example you should keep the main popup continer id name is “popup-container”.

<a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>

<a id="dialog-minimize-return" href="#" onclick="minimize_restore();" style="display:none;"><span>Min</span></a>

Use following javascript function in your document.

function minimize(){

 var main-containter = document.getElementById('popup-container');
 window.divh = main-containter.style.height;
 window.divw = main-containter.style.width;
 window.divtop = main-containter.style.top;
 window.divleft = main-containter.style.left;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "block";

 main-containter.style.position ="absolute";
 main-containter.style.left ="10px";
 main-containter.style.bottom ="0px";
 main-containter.style.marginBottom ="-100px";
 main-containter.style.top = "auto";
 /* css({position:"absolute", left:"10px", width: 250, height: 100, bottom:"-60px"});
 top: 389px; left: 381px; bottom: -60px;
 */
}

function minimize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "none";
}

Above function will swap the minimize and restore button through javascript.

Using following function you can achieve the maximize and maximize restore functionality using the simple javascript. following code you need to use in your html for maximize button.

<a id="dialog-maximize" onclick="maximize();" href="#" style="display: block;"><span>Max</span></a>

<a id="dialog-maximize-return" onclick="maximize_restore();" href="#" style="display: none;"><span>Max</span></a>

following javascript code you need to use in your document.

function maximize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "none";
}

function maximize(){

 var popup_element = document.getElementById('popup-container');
 window.div_height = popup_element.style.height;
 window.div_width = popup_element.style.width;
 window.divtop = popup_element.style.top;
 window.divleft = popup_element.style.left;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "block";

 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 myWidth = myWidth -25;
 myHeight = myHeight -20;
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left ="10px";
 popup_element.style.height = myHeight +"px";
 popup_element.style.width = myWidth +"px";
 popup_element.style.top = "5px";
}

If you having any issue with this script please get back to me. Please write email to me on support@wordpressapi.com

If you need the more information about Javascript and Jquery then please refer the following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

Incoming search terms:

• jquery search form wordpress plugin

Follow us on Twitter WordPress API