Categories:

Home / Free JavaScripts / Content Management scripts / Here

Cut & Paste Fade In Content Viewer

Credit: JavaScript Kit

Description: This script turns ordinary HTML content wrapped around DIV tags into a series of interactive contents, with one faded into view on demand! You can use it to spotlight new or important contents on your site. And since each content is simply normal HTML on the page, setting it all up is painless. This is even true for the pagination links, which are just regular links (A elements) with special CSS classnames (ie: "toc") you define and style as desired. It's time to show your visitors what you got on your site!

Note that this script uses the jQuery library.

Example:

Mars is the fourth planet from the Sun in the Solar System. The planet is named after Mars, the Roman god of war. It is also referred to as the "Red Planet" because of its reddish appearance as seen from Earth. A terrestrial planet with a thin atmosphere, Mars has surface features reminiscent both of the impact craters of the Moon and the volcanoes, valleys, deserts and polar ice caps of Earth.
Saturn is the sixth planet from the Sun and the second largest planet in the Solar System, after Jupiter. Along with the planets Jupiter, Uranus, and Neptune, it is classified as a gas giant (also known as a Jovian planet, after the planet Jupiter).
Jupiter is the fifth planet from the Sun and the largest planet within the solar system. It is two and a half times as massive as all of the other planets in our solar system combined. Jupiter, along with Saturn, Uranus and Neptune, is classified as a gas giant. Together, these four planets are sometimes referred to as the Jovian planets, where Jovian is the adjectival form of Jupiter.

Directions:

Step 1: Insert the below code to the HEAD section of your page:

The code above references two external .js files, including . Download them below:

Step 2: Add the below example HTML code to your page:

The HTML set up for Fade In Content Viewer is as follows:

<div id="whatsnew" class="fadecontentwrapper">

<div class="fadecontent">
Content 1
</div>

<div class="fadecontent">
Content 2
</div>

<div class="fadecontent">
Content 3
</div>

</div>

<div id="whatnewstoggler" class="fadecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

<script type="text/javascript">
//SYNTAX: fadecontentviewer.init("maincontainer_id", "content_classname", "togglercontainer_id", selectedindex, fadespeed_miliseconds)
fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400)
</script>

Observe the HTML structure for the Main content container, the individual contents' containers, and the pagination container. You call:

fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400)

At the end to initialize everything. The last two parameters let  you set which content should be shown by default (0=1st content, 1=2nd etc), and the duration of the fade effect in milliseconds, respectively.

Customizing the Pagination links

The pagination links for the script are manually defined by you for maximum customization, with the use of CSS classnames to tell the script what each link should do:

<div id="whatnewstoggler" class="fadecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

Three different CSS class names can be used inside a link to give it special meaning:

  • class="prev": This tells the script this link should be used to cycle backwards
  • class="next": This tells the script this link should be used to cycle forwards
  • class="toc": This tells the script this link should be one of the individual page links. You should define as many of these links as you have number of contents being shown.

JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.