10
X

Intermediate

Show/Hide HTML Elements Using jQuery

jQuery’s .show() and .hide() methods can be used to show or hide any HTML elements on a page. Usually, the methods are used as the results of a trigger event (for example, if an item is either hidden or shown based on a click event) or used with a timer function so that something hides or shows based on how long a page has been loaded for. Whatever context you choose to use .show() or .hide() methods, they’re pretty handy and easy to understand.

For an example of how you would use the methods as a result of a click event, see the code below:

$(“.button”).click(function(){
    $(“h1”).show();
})

The example above demonstrates how you would use a click event to trigger an element appearing on a page. After the .button class is clicked, any h1 on the page that is hidden would be shown. Using the .hide() method instead would require the exact same syntax.

The .show() and .hide() methods also take a speed parameter that allows you to define the speed at which you’d like to have the selected elements appear or disappear. You can define the speed as a number (in milliseconds) or string (slow, fast). See an example of how to use the speed parameter below:

$(“.button”).click(function(){
$(“h1”).hide(400);
})

There are also a few other parameters that the .show and .hide methods will accept, including easing effects. As with most jQuery methods, you can also place a callback function within the method’s parentheses to be executed after the show/hide event.

jQuery’s .fade() Method

In jQuery, there several different methods that can be used to make an element fade in and out of view. They are: .fadeIn(), .fadeoOut(), .fadeToggle(), and .fadeTo().

.fadeIn() and .fadeOut() are pretty self explanatory. When triggered, it is used to have items either fade in or fade out, respectively. .fadeToggle() is used to toggle between .fadeIn() and .fadeOut(), so when .fadeToggle() is triggered the first time, the elements will fade out, and when it’s triggered again, they’ll fade in. If it’s triggered a third time, the elements will fade back out. .fadeTo() is used to partially fade elements out. With .fadeTo() you can control the opacity level that the elements fade to.

Here’s an example of how you would use .fadeOut() in context:

$(“.main”).click(function(){
$(this).fadeOut(“slow”);
})

When the code in the above example is executed, the .main element will fade out at a slow rate when it’s clicked. The two parameters that the .fadeOut() method takes are speed (could be in milliseconds or in fixed values like slow), and a callback, which gives you the option to insert another function to be executed once the fade is complete. .fadeIn() and .fadeToggle() take the same parameters.

How to Use jQuery’s .one() Method

jQuery’s .one() method is a really cool method that, when used, will trigger a function attached to a certain selector or element only once. Normally with jQuery methods, they will occur as many times as the trigger event is triggered, but when you use the .one() method, the code that it’s attached to only gets executed once per page load.

As an example, let’s say we wanted to use the .one() method to trigger an alert when a button with the class “.alert-button” is clicked, and we only want this to happen ONE time (so if the user clicks the button twice or three times, the alert will only have shown up after the first click. This is actually pretty easy to employ in your jQuery. To see how it works, check out the code below.

$(".alert-button").one("click", function(){
 alert("This alert message will only appear once!");
 })

So once that .alert-button button is clicked, the alert will pop up. But if the button is clicked again, no alert message will appear. We’ve found this method to be extremely useful because often in our projects we do want to limit actions to occurring only once, and it’s great to have a simple and effective way to do that.

Using jQuery to Check All Boxes

If you want to include a “check all” option in any of your projects, it’s actually pretty easy to do using jQuery. The snippet below demonstrates how to include a check all button that will check all of the inputs that fall within one fieldset tag. To start, make sure your HTML looks something like this:

<fieldset>
<input type="checkbox" class="checkall"> Check all <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
</fieldset>

So the first input type with the .checkall class is going to be the input that, when checked, will also check all the other boxes that are in that fieldset. The jQuery for achieving this effect is as follows:

$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});
});

Again, this code will only apply the check all functionality to boxes within the fieldset of the check all button. If there are other checkboxes within a different fieldset, they won’t be affected by the checking of this particular check all button (but if the code of another fieldset is exactly the same, checking that check all button will check all of the checkbox input fields in that particular fieldset). The code can be changed and customized to reflect your own classes.

 

 

5 Awesome Free jQuery Calendars for Your Next Project

There are so many free jQuery calendar projects out there that it can definitely be overwhelming when it comes to choosing one to include in your next project, which is why we’ve compiled this handy list of hand-picked FREE and lightweight jQuery calendar plugins. Each plugin on this list is easy to install, user-friendly, and beautifully styled.

1. Calendario

Screen Shot 2016-12-15 at 11.33.30 AM

Calendario is a lightweight calendar plugin that lets you create a beautiful transparent calendar using jQuery. The modern styling of the calendar is completely customizable to ensure that it’ll match all of the designs and branding of any project.

2. CLNDR.js

Screen Shot 2016-12-15 at 11.40.00 AM

CLNDR.js is a cool jQuery calendar plugin where you provide your own calendar template and the CLNDR.js inserts the data for you — this way you have total control over style and design.

3. Zabuto

Screen Shot 2016-12-15 at 11.43.05 AM

This calendar plugin was created for bootstrap but can be used with any framework or project. One really cool thing about this plugin is that it provides support for 10 different languages/language codes.

4. jQuery Verbose Calendar

Screen Shot 2016-12-15 at 11.46.19 AM

The layout of this calendar is an interesting take on the traditional calendar grid design. While it still uses a grid to lay the calendar out, the rows aren’t confined to 7 columns, and the characters spelling out the name of the months each get to have their own squares in the grid.

5. Calendar.js

Screen Shot 2016-12-15 at 11.53.41 AM

This self-proclaimed “pretty calendar” is a lightweight and totally customizable jQuery calendar plugin with a sleek, modern design. The plugin also functions as a Datepicker, which is always a useful functionality to be able to use on a calendar plugin — even if you don’t have a need for it now, a use for a Datepicker may arise in the future and it’s always nice to have the option of implementing that feature with your existing plugin that having to start from scratch.

jQuery Snippet: Enable Submit if Input Field has Value

A cool thing that jQuery allows you to do is enable and disable certain elements based on particular conditions. The following snippet shows you how to enable a submit button that has been disabled if text has been entered into an input field. If the input field has a value, then the form can be submitted, but if it doesn’t, then it can’t. The concept is pretty straightforward and makes a lot of sense, because often forms are submitted without being filled out properly or entirely.

To achieve this effect, we can use the jQuery .attr() method to change the disabled/enabled attribute based on the condition of whether or not the input field contains a value. For the purposes of the example below, let’s say that the input field in question has an ID of “#text”, and the submit button has an ID of “#submit”:

$("#text").keyup(function(){
 $("#submit").attr("disabled", !$("#text").val());
 })

That’s it! Just two lines of jQuery will take care of enabling a submit button based on any input field of your choosing having value.