CODEWITHSUNDEEP
javascriptjqueryhtmlcss
unknown
unknown

Reputation: 251

Page slider in website

I am new to web programming. I want to build something like flip.hr. What interested me was the sliding effect created when we click on the navigation bar in the bottom of the page. What I currently know is this, where you create hyperlinks to different portions of the page and on clicking at them your are taken to a particular portion. Now I want to create sliding effect as done here. Please guide me to achieve this.

Upvotes: 0

Views: 1241

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

LIVE DEMO

It's terribly simple, let's say you have a bottom navigation and an #pages DIV that will have as first children the desired DIV pages:

<div id="pages">  
  <div id="home">HOME PAGE</div>
  <div id="about">ABOUT PAGE</div>
  <div id="products">PRODUCTS PAGE</div>
  <div id="contact">CONTACT</div> 
</div>

<table id="nav">
  <tr>
    <td><a href="#home">HOME</a></td>
    <td><a href="#about">ABOUT</a></td>
    <td><a href="#products">PRODUCTS</a></td>
    <td><a href="#contact">CONTACT</a></td>
  </tr>
</table>

all you need is to position:fixed the #nav at the bottom and set absolute as width and height 100% your pages:

#pages > div{
  position:absolute;
  width:100%;
  height:100%;
}
#pages div + div{ // To keep "HOME page" at 0 but push away all other pages
    left:-100%; /* note this */
}

// Style buttons and pages
#home,    a[href="#home"]    {background:#078;}
#about,   a[href="#about"]   {background:#780;}
#products,a[href="#products"]{background:#807;}
#contact, a[href="#contact"] {background:#088;}

#nav{
  position:fixed;
  bottom:0;
  width:100%;
  table-layout:fixed;
}
#nav a{
  display:block;
}

all you need is this tiny bit of jQuery:

jQuery(function($){

    function showPage( pageID ){
      var pID = pageID || window.location.hash;
      $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
      $(pID).stop().animate({left:0}, 600);
    }
    showPage();

    $('#nav a').click(function(){
      showPage( $(this).attr('href') );
    });

});

Note how the navigation anchors have the same anchor name as the relative pages ID. Now to explain:

$('#nav a').click(function(){

will set by default a #pagename hash in the URL bar, now all we need is a function that will read the targeted page ID by the passed argument pageID OR (||) if there was no argument go read the window.location.hash from the addressbar.

Doing that way you make sure that if I cpoy paste a page link to a friend like:

http://www.example.com/#contact

the showPage(); function trigger will bring him to the desired page.

Inside the function we make sure to always keep home page at 0 left pixels by simply targeting all other pages using the jQuery :gt() selector (greater than index):

$('#pages > div:gt(0)').animate({left: '-100%'}, 600); // speaks by itself

than we simply target the needed page ID and we animate it in place.

  • Did we passed the clicked anchor href attribute,
  • Did the loaded page already had an hash in the addressbar.

With jQuery another way to do it would be also simply like

$('#nav a').click(showPage);

but than inside our function we should be waiting for the HASH to change before we could apply any animation. For that purpose a setTimeout would be fine:

function showPage(){
  setTimeout(function(){
    $('#pages > div:gt(0)').animate({left: '-100%'}, 600);
    $(window.location.hash).stop().animate({left:0}, 600);
  },100);
}
showPage();

Upvotes: 3

astrodedl
astrodedl

Reputation: 210

If you are a little bit familiar with jQuery, you can eventually use the .show() function from jQuery UI, using the slide effect.

Or, you can make it only with HTML/CSS, there are plenty of tutorials on the web, like this one, but with divs that make 100% width and height.

Upvotes: 1

Santhosh Kumar
Santhosh Kumar

Reputation: 190

You can actually set a page as section and try to do the transform on click event. This will be really helpful. This will help You

Upvotes: 1

Related Questions