3 Weeks – Inserting JavaScript from Frameworks

To start the insertion of JavaScript into my WordPress website I installed and activated the “Insert Headers and Footers” plugin. I used it because it allowed me to insert both JavaScript framework/library sources as well as scripts into either the header or the footer of my website.

js2

To begin inserting the scripts I navigated to the settings area of the dashboard and clicked on the new plugin area that was added.

js6

Here I inserted my script sources into the header. This included links to the jQuery library and angularJS framework.

js8

I then added the JavaScript functions to the footer. I did this to ensure that the elements were loaded before the JavaScript is executed to avoid any errors. The first script I added used the JQuery library. It hides the images and paragraphs for an effect to be added to them when the page loads. In this case the images fade in over 3 seconds and the paragraphs slide down over 5.

js11

Here is an example of the paragraphs sliding down. The images shows the text as it is in the middle of being revealed by the slide down animation.

js3

This picture shows how the images fade in. As you can see the opacity of the image is not at 100% as it is currently fading in.

js4

I then went on to implement a script from the angularJS framework. It gives me the ability to show extra information when a button is clicked.

js9

However, before it would work I needed to add the information for the div it would reveal.

js7

Below is an example of this in action. When the user clicks the “Track Info” button they are presented with information about the tracks. They can also click it again to hide the text.

js10

Advertisements
3 Weeks – Inserting JavaScript from Frameworks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s