How To Create News Tabs With Scrollbar Using Free JavaScript

Comments §

Scrollbar is a popular tool for website designing. And if it can be used with news tabs, then many purposes are served well.

First though, why is news tabs popular?

It is known well that search engines love contents. The reason is simple. Contents tell the engines what web pages are about, and that in turn help them to decide the relevance of those pages with respect to the search queries used by the surfers.

There are other factors like inward links, site structure, duplicate content, website’s age, and so on that play equally strong roles in the display of search results.

The point however remains that the content still rules and will continue to do so. The importance of news tabs may be seen in this context.

Look at the news tabs with scrollbar on the right, done with the help of free JavaScripts courtesy Nathan Faubion.

The content changes as the tabs, web video, about, and more are clicked on.

Interestingly, when you click ‘more’ the scrollbar vanishes because it is not needed since the content is not enough to overfill the container space.

 

More Content In Less Space

News tabs economize on space in the web page. While the contents appear only when specific tabs are pressed, they nevertheless are present in the page html, and will therefore be considered by search engines for assigning relevancy to such pages.

The following image is part of the front-page web edition of The New York Times. The page shows 2 separate tabbed news items. This is very useful for the giant newspaper to be able to show a wide range of news headlines without needing to leave the page.

 

Example of news tabs in NY Times

 

Video Tutorial

If this video does not play, it may need a more recent version of the Adobe Flash Player. If you are using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here. Thank you.

 

How To Do It

Fortunately, implementing news tabs with scrollbar is easy. You need 2 JavaScripts – scrollbar.js and scroller.js (named respectively as jsScrollbar.js [copy from here] and jsScroller.js [copy from here] in Nathan’s website), while the third one comes with the html code as given below.

Pay close attention to the style script in the head section. Here is where you can change the appearance of the news tabs and the scrollbar including their sizes and colors.

The html code below represents the news tabs with scrollbar above. Copy the code and make any change you want for your webpage.

If you do not want the navigation tabs, simply remove the portion of <div id=”Navigation”>. In that case only the first ‘tabbed’ content will be shown along with the scrollbar.

If on the other hand you wish there should be no scrollbar alongside, just omit the portion of <div id=”Scrollbar-Container”>. In this case the news tabs will be there with respective contents, but you cannot scroll to see the bottom contents.

 

Html Code

<html><head> 

<title>News Tabs With Scrollbar</title> 

<style type="text/css"> 

.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}

.Scrollbar-Up {
  position: absolute;
  width: 6px; height: 7px;
  background-color: #AFFFAF;
  font-size: 0px;
  border:1px solid #52CA52;
}

.Scrollbar-Track {
  width: 6px; height: 250px;
  position: absolute;
  top: 15px;
  background-color: #DFFFDF;
  border:1px solid #52CA52;
}

.Scrollbar-Handle {
  position: absolute;
  width: 6px; height: 30px;
  background-color: #AFFFAF;
  border-top:1px solid #52CA52;
  border-bottom:1px solid #52CA52;
}

.Scrollbar-Down {
  position: absolute;
  top: 273px;
  width: 6px; height: 7px;
  background-color: #AFFFAF;
  font-size: 0px;
  border:1px solid #52CA52;
}

#Scrollbar-Container {
  position: absolute;
  top: 26px; left: 245px;
}

#Container {
  position: absolute;
  top: 26px; left: 0;
  width: 240px;
  height: 280px;
  background-color: #FEF;
  border:1px solid #F9F;
  z-index:-1;
}

#Video, #About, #More {
  position: absolute;
  top: 10px;
  overflow: hidden;
  width: 240px;
  height: 260px;
  display: none;
}

#Video {display: block;}

p {
  margin: 0; padding: 0px 30px 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-indent: -8px;
  color: #606;
  text-align:justify;
}

#Navigation {
  position: absolute;
  top: 0;
  left: 0;
}

#Navigation a {
  margin: 5px 8px 0 0;
  padding: 0 5px;
  height: 20px;
  background-color: #FDF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #303;
  text-decoration: none;
  display: block;
  float: left;
  letter-spacing: 1px;
  border:1px solid #F9F;
}

#Navigation a:hover {
  margin-top: 0px;
  height: 25px;
}

#Navigation a.current {
  margin-top: 0px;
  height: 25px;
  background-color: #FEF;
  color: #303;
  border-bottom:1px solid #FEF;
}

</style> 

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

<script type="text/javascript">
var scroller  = null;
var scrollbar = null;

window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Video"), 240, 260);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
}

function scrollbarEvent (o, type) {
	if (type == "mousedown") {
		if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#DFFFDF";
		else o.style.backgroundColor = "#AFFFAF";
	} else {
		if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#DFFFDF";
		else o.style.backgroundColor = "#AFFFAF";
	}
}

function swapIt(o) {
	o.blur();
	if (o.className == "current") return false;

	var list = document.getElementById("Navigation").getElementsByTagName("a");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className == "current") {
			list[i].className = "";
			document.getElementById(list[i].title).y = -scroller._y;
		}
		if (list[i].title == o.title) o.className = "current";
	}

	list = document.getElementById("Container").childNodes;
	for (var i = 0; i < list.length; i++) {
		if (list[i].tagName == "DIV") list[i].style.display = "none";
	}

	var top = document.getElementById(o.title);
	top.style.display = "block";
	scrollbar.swapContent(top);
	if (top.y) scrollbar.scrollTo(0, top.y);

	return false;
}
</script> 

</head> 

<body> 

<!-- SHOW NAVIGATION TABS -->

<div id="Navigation">
  <a href="#" onclick="return swapIt(this)" title="Video" class="current">web video</a>
  <a href="#" onclick="return swapIt(this)" title="About">about</a>
  <a href="#" onclick="return swapIt(this)" title="More">more..</a>
</div> 

<!-- SHOW CONTENT CONTAINER -->

<div id="Container"> 

  <div id="Video">
    <div class="Scroller-Container">
      <p>Web video is fast becoming a popular way to increase search visibility.</p>
      <p>This has been happening ever since YouTube was acquired by Google in October 2006.</p>
      <p>Many people believe web video is possible to make only with a videocam movie. Nothing can be further from truth.</p>
      <p>You can make web video from PowerPoint slideshow, flash movie, screencast, and even static image converted to motion, apart from camera movie.</p>
      <p>Smart marketers are already doing that, and they are combining all 5 types of videos and audio podcast into a single video. </p>
      <p>After all, when you punch in more variety in a video, you will be successfully converting a wide cross-section of potential targets.</p>
    </div>
  </div> 

  <div id="About">
    <div class="Scroller-Container">
      <p>2WebVideo.Com is about making it easy to create web video.</p>
      <p>The flagship <a target="_new" href="http://www.2webvideo.com/video-production.html">video production course</a> is equipped to teach you how to create and combine audio podcast and 5 types of video into a single web video.</p>
      <p>The video production blog is like a showcase that demonstrates how you can make web video on virtually any topic of interest.</p>
      <p>The video articles successfully quashes the 3 notions that 1) a web video can only be a videocam movie, 2) not all topics can be made to demonstrative web videos, and 3) making web video is difficult.</p>
      <p>All these mean that if you are reasonably comfortable using computers, there is no reason why you cannot make web video to market your abilities on the Internet.</p>
    </div>
  </div> 

  <div id="More">
    <div class="Scroller-Container">
      <p>For more on 2WebVideo.Com’s products, or any information, do not hesitate to contact us in the comment form below.</p>
    </div>
  </div> 

</div> 

<!-- SHOW THE SCROLLBAR -->

<div id="Scrollbar-Container">
  <div class="Scrollbar-Up"></div>
  <div class="Scrollbar-Down"></div>
  <div class="Scrollbar-Track">
    <div class="Scrollbar-Handle"></div>
  </div>
</div>

</body> 

</html>
Reblog this post [with Zemanta]

Tagged: , , , , ,

This article of September 29th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications.
Enroll with our video production course

§ Leave a Reply

  • Audio/Music Tech Online Library (Annual)
    Total Training DVDs & Online (Software Training)
    Alibris

  • Recent Articles

Get Adobe Flash playerPlugin by wpburn.com wordpress themes