CSS Codes
CSS Layouts

<html>
<head>
<link rel="stylesheet" type="text/css" href="scrollable.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="impetus.js"></script>

<script type="text/javascript" src="scrollable.js">

/***********************************************
* Scrollable Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script>

var scrollv, scrollh // register two global vars for two scrollable instances

jQuery(function(e){ // on DOM load

scrollv = new scrollable({
wrapperid: "scrollable-v"
})

scrollh = new scrollable({
wrapperid: "scrollable-h",
orient: 'horizontal'
})

})

</script>
</head>

<body>

<div id="scrollable-v" class="scrollable">
<div class="belt">

<!--INSERT CONTENT HERE INSIDE BELT DIV-->

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<!--END INSERTION -->

</div>
</div>

<p style="width:250px; text-align:right"><img src="roundup.png" onMouseover="scrollv.scrollContent('up')" onMouseout="scrollv.stopScroll()" /> <img src="rounddown.png" onMouseover="scrollv.scrollContent('down')" onMouseout="scrollv.stopScroll()" /></p>



<div id="scrollable-h" class="scrollable">
<div class="belt horizontal">

<!--INSERT CONTENT HERE INSIDE BELT DIV-->

<article class="columns">
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

</article>

<!--END INSERTION -->

</div>
</div>

<p style="width:250px; text-align:right"><img src="roundleft.png" onMouseover="scrollh.scrollContent('left')" onMouseout="scrollh.stopScroll()" /> <img src="roundright.png" onMouseover="scrollh.scrollContent('right')" onMouseout="scrollh.stopScroll()" /></p>

</body>
</html>