Cut & Paste Fade In Content Viewer

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.

Prev Page 1 Page 2 Page 3 Next

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:

<div id="whatsnew" class="fadecontentwrapper"> <div class="fadecontent"> 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. </div> <div class="fadecontent"> <img src="http://i6.tinypic.com/87atkhw.jpg" style="float: right;" />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). </div> <div class="fadecontent"> 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. </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>

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:

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.

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info