Html beginner’s tutorial – part 4

Learn about jQuery to enhance your web projects

In this part of our html beginner’s tutorial we will introduce JavaScript, more specifically the jQuery library. This will open fascinating possibilities to enhance your website an make it much more interactive and user friendly. You should definitely check out our previous tutorials where you can learn the very basics of html and css:

By getting to grips with JavaScript, you can say that you master the devine Trinity of webdesign. The more you dive into these matters, the more you will find out they interact closely together. JavaScript allows you to manipulate html and css to a great extend, opening a whole new world. You can use JavaScript for a variety of applications like:

form validation
cookies
pop-up windows
dynamic menus, navigations and images
changing styles and animations
AJAX-webapplications
APIs
…

As a simple search query in Google will tell you: the possibilities of JavaScript are endless, way too big to cover in this sole tutorial. We will limit ourselves to an introduction and a practical example you can use in your web projects. If you are keen to see what the result will be, you can already download the completed files. If you want to built it step by step, please continue reading.

A brief history of JavaScript

JavaScript dates back to 1993 and was developed by Brendan Eich, working for Netscape. Originally, it was called LiveScript but when the web language Java of Sun became increasingly more popular, they decided to change the name. LiveScript was already based on Java but was much simpler and faster to learn than Java. It soon turned out that is was an excellent tool to enhance the functionalities of web pages. Back then, the combination of html and JavaScript was known as Dynamic html (DHTML).

Browsers in those days (like Internet Explorer 4 and Netscape 4) offered support for the combination of html and JavaScript in webpages. Times – and browser versions – have changed but JavaScript is still an important pillar within any given browser, regardless if it’s Firefox, Chrome or Safari, both on desktop and on mobile devices.

JavaScript is a so-called ‘client sided’ programming language. This means it operates completely inside the browser of the user. It does not interact with a web server, contrary to ‘server sided’ languages such as PHP. If you plan to use JavaScript in one of your projects (and it’s not like you have a choice, because you will have to), you will soon end with one of the more popular libraries out there, such as jQuery, Dojo Toolkit or MooTools.

Our library of choice: jQuery

In this example we will make use of jQuery. It is probably the most used JavaScript library out there. Popular CMS sytems like WordPress even have it pre-installed and it is regularly updated and widely supported by an uncountable number of developers like Google and Microsoft. In short: a no-brainer. Just to make matters clear because there is some widespread confusion: jQuery is JavaScript. You will be amazed how it simplifies your work and how versatile it is to use.

Preparing your environment

Remember we mentioned the importance of a well-structured tree in your web project to keep things like html, css and scripts organized. So grab your folders of the previous tutorial and add a new folder in the root, where we will store our jQuery files. Call this folder ‘js’.

Now go to jquery.com and click on the big download button. At the moment of writing, version 3.2.1 is the most recent. Click on the link to download the compressed production version (with the .min.js extension). A compressed version will always be smaller in file size, hence optimizing speed.

The entire library will be displayed in a new browser window. Slect it all and copy it (Cmd+a and Cmd+C on Mac, Ctrl+a and Ctrl+c on PC). Open a new blank file in you favourite html browser and paste it (Cmd+v on mac, Ctrl+v on PC). Save the file as jquery-3.2.1.min.js in the new folder named js you just created.

Link the jQuery library to your webpage

There are two ways to link the jQuery library to your webpage. Since we downloaded it and placed it into our local installation, we will link it like we linked our css-file in the previous tutorial. Write this line of code directly below the line where you link the css-file in your index.html-file.


<script src="js/jquery-3.2.1.min.js"></script>

An alternative would be to link the jQuery library externally through one of the available CDNs.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Since we are working locally, we will use the first option.

Modifying the html code

As an example, we will turn the static image on top of the page into a working photoslider. First, we need two extra photos. You can download some pictures from the web or use the ones in our finished example. Make sure they measure 1000px width by 400px height and add them to your images folder.

Now go back to your index.html file, still opened in your favourite html editor and alter the code where the original image is located. We will add an extra div-tag which will funtion as a wrapping element and we add the two extra images.


<div id="slides">
     <img title="World of wines" src="images/world-of-wines.jpg" alt="World of wines">
     <img title="World of wines" src="images/world-of-wines-2.jpg" alt="World of wines">
     <img title="World of wines" src="images/world-of-wines-3.jpg" alt="World of wines">
</div>

When you save the file and view it in your favourite browser, you will notice the three images are simply put below each other. Doesn’t really look an image slider, does it? Therefore, we will need to install an additional jQuery plug-in, which hooks in into the jQuery library, already linked to your page.

Turning the images into a real photoslider

There are tons of jQuery libraries out there but for this tutorial, we picked the SlidesJS plug-in. You can simply download it from their website and when you unzip the download, you will notice it is already pretty elaborated as-is. When you browse the folders, you will see a very similar file structure as the one we use in your tutorial.

In this tutorial, we picked the ‘playing’ example. Copy the ‘jquery.slides.min.js’ file from the downloaded folder and paste it into the js-folder of your own installation. Next, take a look into the img-folder of the plug-in and copy these two files: btns-next-prev.png and pagination.png. These are two tiny image files which contain the icons for the navigation. Copy these two files into the img-folder of your own installation.

We also need some css markup to display everything properly. Often, jQuery plug-ins come with their own css-files but you can alter these as you wish. The code below goes into the css-file you created in the previous tutorial.


/* The CSS settings for the photoslider*/
#slides {
      display: none;
      margin-bottom: 10px;
      position: relative;
      z-index: -999999;
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }

Writing the code and linking all the files

We’re almost there. The majority of jQuery plug-ins offer a variety of options you can adjust. In this case, you can see all the possibilities on the docs-tab of the developer’s website. We will limit yourselves tot the default settings provided on the download.

Create a new folder in your html editor and paste the following code into it:


jQuery(document).ready(function() {

// The script for the photoslider
// http://www.slidesjs.com/
	jQuery(function() {
    	jQuery('#slides').slidesjs({
        	width: 1000,
        	height: 400,
        	play: {
          		active: true,
          		auto: true,
          		interval: 4000,
          		swap: true
        	}
      	});
    });
});

Save the file as ‘scripts.js’ in the js-folder of your installation.

We now have all the elements in place. The only thing left to do, is linking them to your index.html-file. The jQuery library and the css-file are already linked, so this leaves the plug-in and the newly created scripts.js file to link.


<script src="js/jquery.slides.min.js"></script>
<script src="js/scripts.js"></script>

When your reload your webpage in your browser, you will see the static image changes every 4 seconds. You can pause the carousel or navigate through the slides with the pagination and navigation buttons. These functionalities are all delivered with the plug-in, taking work out of your hands.

With this example, we are just scraping the surface but you see it is very ease to make your web pages come alive with jQuery.

Posted on August 17, 2018 by Benjamin Slap, last modified on August 17, 2018