JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Vertically sliding content areas activated by buttons

Click on a button below to see demo

article 1 content
article 2 content
article 3 content
article 4 content
article 5 content

 

Scripts needed (copy and paste inside <head>) - you won't need these if you are already using the HTML5 Starter Code


<script src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="path_to_javascript_file.js"></script><!--adjust this as needed-->

 

Here's the html code


<nav>
<div class="btn" id="btn1">button1</div>
<div class="btn" id="btn2">button2</div>
<div class="btn" id="btn3">button3</div>
<div class="btn" id="btn4">button4</div>
<div class="btn" id="btn5">button5</div>
</nav>
<section id="allArticles">
<div id="allArticlesWrapper">
<article id="article1">article 1 content</article>
<article id="article2">article 2 content</article>
<article id="article3">article 3 content</article>
<article id="article4">article 4 content</article>
<article id="article5">article 5 content</article>
</div>
</section>

 

Here's the CSS


#allArticles {
height: 600px;
width: 980px;
overflow: hidden;/*Necessary to hide non-visible articles*/
position: relative;
}
#allArticlesWrapper {
position: absolute;
z-index: 100;
height: 3000px;/*total height of all individual articles including padding and margin*/
width: 980px;
left: 0px;
top: 0px;
}
article {
margin: 10px;
height: 580px;
width: 960px;
position: relative;
}

 

Here's the javascript code


//declare all global variables
var btnClicked, articleNumber, newY, shiftTime, articleHeight, easingMethod;

//set initial values for some variables
shiftTime=1000;//time in milliseconds to shift to new positions
easingMethod="easeInOutQuint";//type of easing - for options, see http://jqueryui.com/resources/demos/effect/easing.html

articleHeight=$("#allArticlesWrapper article").outerHeight(true);//gets the height of a single article including padding and margin?
//actions when any class="btn" is clicked
$(".btn").click(function(){
btnClicked=$(this).attr("ID");//gets the id of the clicked button
articleNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
newY=-articleHeight*(articleNumber-1);//value for new y position based on articleNumber value
$("#allArticlesWrapper").stop().animate({//animates the div id="allArticlesWrapper"
"top":newY//sets new position of div id="allArticlesWrapper"
},shiftTime, easingMethod);
});