Dynamic Portfolio Template

STEP1

In index.php add this after line 140

<li><a href="javascript:;" id="fourth_page">Fourth page</a></li>

After line 421 in <em>index.php</em> add this 

<pre><div class="fourth_page" style="display:none">
     <h1>FOURTH PAGE HERE</h1>
    ... Your conten here ....
 </div></pre>

<strong>STEP2</strong>

In <em>script/dynamics.js</em>

At line 54 add <em>#fourth_page</em> after <em>#third_page</em>
<pre>$('#first_page, #second_page, #third_page, #fourth_page').bind(</pre>

After line 91 add

<pre>$('#fourth_page').click(function(){
            $('#fourth_page').addClass("active");
            $('#first_page').removeClass("active");
            $('#second_page').removeClass("active");
            $('#third_page').removeClass("active");
            $('.fourth_page').fadeIn("slow");
            $('.first_page').fadeOut("slow");
            $('.second_page').fadeOut("slow");
            $('.third_page').fadeOut("slow");
        });</pre>

After line 68, 79, 90 add

<pre>$('#fourth_page').removeClass("active");</pre>

After line 72, 83, 94 add

<pre>$('.fourth_page').fadeOut("slow");</pre>

<strong>FINAL</strong>

At the end <em>Click function</em> (beginning at line 48 in <em>dynamics.js</em> ) should look like this

<pre>$(function()
    {

       // Initialize jScrollPane
       $('#scroll_content').jScrollPane();    

       // Always scroll on top 
       $('#first_page, #second_page, #third_page, #fourth_page').bind(
                    'click',
                    function()
                    {
                        $('#scroll_content')[0].scrollTo(0);
                        return false;
                    }
                );

        // Click function            
        $('#first_page').click(function(){
            $('#first_page').addClass("active");
            $('#second_page').removeClass("active");
            $('#third_page').removeClass("active");
            $('#fourth_page').removeClass("active");
            $('.first_page').fadeIn("slow");
            $('.second_page').fadeOut("slow");
            $('.third_page').fadeOut("slow");
            $('.fourth_page').fadeOut("slow");
        });    

        $('#second_page').click(function(){
            $('#second_page').addClass("active");
            $('#first_page').removeClass("active");
            $('#third_page').removeClass("active");
            $('#fourth_page').removeClass("active");
            $('.second_page').fadeIn("slow");
            $('.first_page').fadeOut("slow");
            $('.third_page').fadeOut("slow");
            $('.fourth_page').fadeOut("slow");
        });        

        $('#third_page').click(function(){
            $('#third_page').addClass("active");
            $('#first_page').removeClass("active");
            $('#second_page').removeClass("active");
            $('#fourth_page').removeClass("active");
            $('.third_page').fadeIn("slow");
            $('.first_page').fadeOut("slow");
            $('.second_page').fadeOut("slow");
            $('.fourth_page').fadeOut("slow");
        });

        $('#fourth_page').click(function(){
            $('#fourth_page').addClass("active");
            $('#first_page').removeClass("active");
            $('#second_page').removeClass("active");
            $('#third_page').removeClass("active");
            $('.fourth_page').fadeIn("slow");
            $('.first_page').fadeOut("slow");
            $('.second_page').fadeOut("slow");
            $('.third_page').fadeOut("slow");
        });

});       </pre>

Try to change the height for contact div. In css search for #contact and change the height from 510px to 1200px