Using jQuery In The WordPress Admin Area

When you are coding in the WordPress admin area, there may be times when you want to code some functionality which requires Javascript.

WordPress comes with an inbuilt Javascript library called jQuery. This is a Javascript framework which makes it very easy to do almost anything with your Javascript.

When working in the admin area jQuery is already included on all the pages and can be used in your own Javascript files.

But there is a common problem which some people get stuck on when working with jQuery and that is the use of the $ symbol.

Most people are used to using jQuery by loading the file using the script tag and using the $(document).ready() function to use your jQuery code.

$(document).ready(function () {
      $(body).append('Hello World');
  });

JQuery Plugin Boilerplate

In a previous article I pointed out a great resource for starting your jQuery plugins.

This resource is called Starter and will allow you to pass through your parameters to your plugin and will generate the boilerplate for your jQuery plugin.

Starter

Here is a jQuery snippet for a jQuery plugin boilerplate by Stefan Gabos.
Continue reading »

Use jQuery To Highlight Active Menu Item

If you are using menus on your web designs it's a common web design technique to highlight the current page that you are on to show you where you are on the site.

This technique is normally done by adding a CSS class to the menu item to highlight it differently to the other menu items.

If your using a WordPress site then you are most likely using the WordPress function wp_nav_menu() to display the menu items. In wordpress this function will automatically add a CSS class of current_page_item to the current page.
Continue reading »

Get First X Number Of Elements With jQuery

Here is a quick snippet for getting the first lot of elements from a jQuery object.

Lets say you want to get the first 5 paragraphs on a page then you will start off by getting all the paragraphs on the page.

var paragraphs = $('p');

Get Select Box Value With jQuery

Use the following jQuery snippet to get the value of the selected option in the select box.

First create a new jQuery function

function getSelectedOption(id){
     $('#' + id).val();
}

Then create your select box.

Handle Image Loading Errors With jQuery

Images

If an image can't load correctly in the browser it will do a number of things depending on what browser you are using. It will either display a ? question mark image or will just display nothing.

When an image can't be found the browser will throw an error, these errors can be found and used by using jQuery.

You can add an event handler to your images to see if there is an error, if they return an error you can make jQuery do something. For example if an image can't be found you could change the image to a missing image picture, or just hide the image box which is easy to do in jQuery.
Continue reading »

How To Disable Enter Key On Forms

Enter key

On HTML forms if you are filling out a text box and press the enter key it will submit the form, even if you haven't finished filling in the rest of the information.

There are many websites which use this feature such as Google search box will submit when you press the enter key. This works because you only have one text box to fill out, but if there are more than one field to fill in you don't want the form to submit on the enter key.

To change this basic feature you need to add a bit of Javascript on the page to stop the form submitting.
Continue reading »

Fallback on Local jQuery If CDN Fails

jQuery

Many big websites are now offering CDN services for things like jQuery. Google offers a few of the biggest Javascript libraries from their own CDN network. Microsoft also allows you to use a CDN to implement jQuery in your website.

The benefit of this is that the loading of the jQuery will reduce bandwidth because it will be downloaded from a local server, which therefore should download faster and this script should be cached by the many different websites using it.

Using a CDN to delivery your CSS and Javascript will speed up your page loading times.
Continue reading »

Toggle Show/Hide HTML Element

Below is different ways you can show or hide content.

Javascript

Is a function using raw Javascript which is passed an ID of a HTML element. We then use the getElementById function to get the element.

Now we have the element we can see what the current style display is. If it is set to none then we set it to block, if it's set to block then we set it to none.

Validate Date Of Birth And Set Age Limit In jQuery

calendar
Using jQuery you are able to easily work out the age of a person by the date of birth. If you can work out the age you can add a age limit to stop under aged visitors from continuing into the link.

The following function will take an input of day, month and year. It will then take these values and create a new date object when compared to the current date we can work out the age of the visitor.

If there is a age limit and the visitors age is not more than the age limit we can then disallow entry.
Continue reading »