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.
Here is a jQuery snippet for a jQuery plugin boilerplate by Stefan Gabos.
Read More →
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.
Read More →
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');
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.
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.
Read More →
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.
Read More →
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.
Read More →
Below is different ways you can show or hide content.
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.
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.
Read More →
JQuery is a easy way of using JavaScript reducing the time it takes to code and reduces the amount of lines you need to code. This is a good example of this is by removing an option from a select box using jQuery.
Read More →