jQuery Powered Website With Only 9 Lines.

Posted on July 26th, 2015. Written by Dave.

Update : As user Pedro so rightly commented below I left out quite a vital feature of the website. This wasthe ability to link to pages. I have edited the code below to include this feature (And at the same time reduced the lines of code needed to 8 icon_smile)

Here is a tutorial on how to create an extremely simple jQuery powered website.

Check out the demo

The whole site is powered by just 9 lines of code :

<script type="text/javascript">

$(document).ready(function() {

	/*Set the home page*/
        var current_page = location.href.indexOf("#") != -1 ? window.location.hash.substring(1) : 'home.html';
      
        /*Load the home page into the div with class 'content'*/
	$('.content').load(current_page);

	/*When a user clicks a menu link take the href value and load the corresponding
	page into the contnt div*/
	$('.menu a').click( function () {
		var current_page = $(this).attr('href').substring(1);
		$('.content').load(current_page); 
	});
});
</script>

First we’ll have a look at the menu

<div class="menu">
    <ul>
      <li><a href="#home.html">Home</a></li>
      <li><a href="#about.html">About</a></li>
      <li><a href="#contact.html">Contact</a></li>
      <li><a href="#links.html">Links</a></li>
  </ul>
</div>

Each link in the menu has a unique href value, this value is a reference to a corresponding HTML file within the websites folder. When a user clicks on one of these links the div with the class ‘content’ is updated with the contents of the page listed in the href :

	$('.menu a').click( function () {
		var current_page = $(this).attr('href').substring(1);
		$('.content').load(current_page); 
	});

The above shows how this is done. The jQuery function which loads the page is the ‘load’ function. You can read more about it here.

Thats about it for all the jQuery used. To check out the demo or have a look at the source have a look before.

Check out the demo

This entry was posted on Sunday, July 26th, 2015 at 9:33 pm and is filed under CSS, jQuery, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can leave a response, or trackback from your own site.

Dave

Leave a Comment

You must be logged in to post a comment.

Random Ramblings

Looking for a good VPN service?

If you are serious about your online security and safety, you owe it to yourself to be using a trusted VPN. And Torguard is one of the best and most trusted VPN services around. For the best Torguard promo code to save you money, check out domaincouponspro.com