Tag Archives: javascript

AJAX Availability Widget

A basic AJAX Project created after brushing up on Ajax skills this morning @Treehouse. I created a simple ajax call to a JSON file to display my current working availability. Depending on the data within the JSON file, available months are dynamically creating through use of pure Javascript. The current date is also checked and underlined through CSS.

You can see this working on landing page of my portfolio site:

Plunker | Github

Read more jQuery script

Here’s something that I wrote and have since used numerous times on small and large projects. It’s a fairly short read more jQuery script to show / hide text with a super cool slick slide toggle effect. I thought I’d go ahead and share / document it.


First up is the HTML structure. Simple enough, a containing element .staff-details and the .bio div containing the content to be shown / hidden and a .read-more CTA link which fires the script.

The code is written in such a way so that numerous sections of the HTML code can appear on one page and only the CTA for that particular area of text is fired.

<div class="staff-details">
    <div class="bio">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse efficitur, leo sed rutrum mattis, arcu felis volutpat neque.
    Sit amet finibus enim nibh id elit.
    Praesent leo augue, malesuada at ligula ac, pharetra rutrum metus.
    Aenean cursus tempus pulvinar.
    <a href="" class="read-more">Read More</a>


Next up is the CSS. Again very basic but sufficient for this demonstration. A fixed height and a max-width with overflow set to hidden.

.bio {
    max-width: 300px;
    height: 55px;
    overflow: hidden;


And the jQuery that makes all the magic happen..!

$(function () {
    var originalHeight = $('.bio').height();
    var originalText = $('.bio').next('.read-more').text();
    $('.read-more').toggle(function () {
        var p = $(this).closest('.staff-details').find('.bio');
        var fullHeight = $(p)[0].scrollHeight;
            height: fullHeight
        }, 1000, function () {
            // Animation complete.
    }, function () {
        var p = $(this).closest('.staff-details').find('.bio');
            height: originalHeight
        }, 1000, function () {
            // Animation complete.

The jQuery in more detail

First things first.

Store both the current height of the .bio div and the text in .read-more using:

var originalHeight = $('.bio').height();
var originalText = $('.bio').next('.read-more').text();

We will we need both of these variables later on.

Next we set a listener on the .read-more link so when it is clicked the .toggle event fires. This then grabs the closest .bio div via:

var p = $(this).closest('.staff-details').find('.bio');

We use .closest() here as we don’t want to grab every .bio div on the page, just the one relevant to the link clicked. Read more about jQuery closest here, but in short it does the following.

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

The next line of code stores the height of .bio div in the variable fullHeight via:

var p = $(this).closest('.staff-details').find('.bio');

It is important to grab this value when the .toggle event fires and not before, as this value could vary. Statically (the number of words) or dynamically, the height of the .bio div could change when resizing the page.

Time to Animate!

Once we have the fullHeight we are ready to go. An animation is trigged on the .bio div extending it to the height stored in the variable fullHeight. Once this animation finished the text in the .read-more link is changed to Close via:


And back again!

Finally when the .read-more link is clicked for the second time, the .toggle event fires again. This time running the second half of the code setting the .bio div back to its original height and setting the original text back into the .read-more link.

This is where the values stored earlier in originalHeight and originalText come in handy.

Feel free to use / fork the following working demo.

Create a Quiz using HTML5 Local Storage & Javascript

html5 local storage quiz

After playing around with local storage in HTML5, I decided to create a short city / country quiz incorporating HTML5 local storage and Javascript. You can see the local storage at work by opening up the element inspector in your browser.

Using an .xml file to hold the questions and answers, the user is prompted to selected an answer before moving onto the next question and also has the option to go back and change their previous choice. A results page is display on finishing the quiz.

You may notice that all correct answers are in one particular place on each question. Using Fisher-Yates shuffle or a PHP shuffle function would fix this and add some variety to the quiz. But for now feel free to download the demo files and have a play around with the code.