Single page awesome jQuery portfolio website: Demo, download and tutorial

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Today we’ll discuss a website developed in late 2008 and was my portfolio site when I was studying.

This one is a single page website wherein we put our content in four different divs and navigate between them with cool transition effects using jQuery.

Before we proceed you should check,

Demo

Okay! What’s the idea?

If you have a fair bit of idea about DHTML then you should understand this tutorial very easily. You can call this code as a tweak rather than a product of my programming skill. Lets see the tutorial,

1. We created a top-level div called ‘total’ that has 5 divs inside it. Out of these 5 divs, first div has menu while the rest four divs includes the user content – acts as 4 different pages.

2. The image below shows the menu and content of a div (one div is displayed at a time),

awesome single page jquery website1

3. Inside the top-level div ‘total’, we named the first div as ‘top’ while the other four divs as ‘midcon1’, ‘midcon2’, ‘midcon3’ and ‘midcon4’, respectively.

3.1 When clicked, menu inside the ‘top’ div displays a particular div. Here is our menu,

/*MENU*/
<div id='top'>
<p onclick=doit('#midcon1','#home') id='home'>HOME</p>
<p onclick=doit('#midcon2','#me') id='me'>ME</p>
<p onclick=doit('#midcon3','#works') id='works'>WORKS</p>
<p onclick=doit('#midcon4','#contact') id='contact'>CONTACT</p>
</div>

3.2 Now we put content inside the other four divs – you can put text data, images or anything of your liking. To keep it simple, we added simple text.

Here is the code,

<div id='total'>
<div id='top'> Menu </div> /*with menu, we put website icon here*/
<div id='midcon1’ class='midcon'> First Webpage </div>
<div id='midcon2’ class='midcon'> Second Webpage </div>
<div id='midcon3’ class='midcon'> Third Webpage </div>
<div id='midcon4’ class='midcon'> Fourth Webpage </div>
</div>

4. It’s time to save our file as index.htm (or index.php/index.asp).

The biggest catch

Suppose, the height of topmost div is 400px, our menu part is 100px and all four divs are of 300px height.

Here we display only one div at a time by using ‘overflow:hidden’ css property in the topmost div. This cuts off three divs when fourth one is displayed, menu at the top remains static.

Lets see this by an image,

explaining single plage jQuery website catch

The jQuery part; transition between divs

Now the main content starts here when we put jQuery for navigating from one div to other. Here is what our jQuery code looks like,

var page=['#midcon1','#midcon2','#midcon3','#midcon4']; /*div ids in array*/
var tab=['#home','#me','#works','#contact']; /*menu item ids in array*/
var i;
function doit(x,y){ /*a menu item is clicked, respective div shows up*/
for(i=0;i<page.length;i++)
{
if(page[i]==x && tab[i]==y)
{
$(x).slideDown(500);
$(y).css({"background":"url('redtrans.png')"});
}
else
{
$(page[i]).slideUp(1000);
$(tab[i]).css({"background":"url('')"});
}
}
}

There are few more tweaks possible but I’ve deliberately extended the code to make it easier to understand. If you liked it, why don’t you download it and run it on your system.

Download entire jQuery website
blog comments powered by Disqus