
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML Diagonal Scroller

Article by:

Premshree Pillai (8/28/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

Scroll text horizontally when the user hovers over a link.

Viewed: 67944 times

Rating (14 votes):

4.3 out of 5

Rate this Article

Read Comments

Post Comments

DHTML Diagonal Scroller

This script is a simple modification of Link Hint Scroller. The only difference here is that the hint will scroll diagonally.

When you move your mouse over the link a hint or something about the link will appear below the link in a diagonally scrolling fashion. When you move your mouseout the scrolling will stop.

There are a few variables you can change:

scroll_height : Scroll height variable (150 here)

time_length : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)

begin_pos : Beginning position of hint (20 here)

To use this Javascript, firstly you must copy the script and place it in the head section.

Select All Code

<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/qiksearch_vertical_scroller.htm
//*********************************************
//* Qiksearch Vertical Scroller               *
//* This script when you move your mouse over *
//* displays a vertical scrolling hint        *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com                  *
//* E-mail : premshree@hotmail.com            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var scroll_height = 150; //The scroll height
 var time_length =50; //Scroll speed
 var begin_pos = 20; //Start position of scroll hint
 var i;
 var j;
 
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//SCROLL
function Scroll(layerName){
if (NS4 || IE4) {
 if (NS4 || IE4) { 
 if(i<(begin_pos+scroll_height)){
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="visible"');
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.top="'+i+'"');
 i++;
 j++;
 if(i==j){
 setTimeout("Scroll('"+layerName+"')",time_length);}
 }
 }
 }
}

//STOP SCROLLING
function StopScroll(layerName)
{
i=begin_pos+scroll_height;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.top="'+i+'"');
  hideLayer(layerName);
}

function reset()
{ 
i=begin_pos;
j=i;
}

// HIDE HINT
function hideLayer(layerName){
 if (NS4 || IE4) {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="hidden"');
 }
 }

</script>
<!--END REQUIRED-->

Now place the following within the body of the page:

Select All Code

<!--BEGIN REQUIRED-->
<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; left:50; visibility:hidden" class="prem_hint">
<font color="#FF0000"><b>Vertical Scrolling!</b></font>
</div>
<!--END REQUIRED-->

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML Diagonal Scroller '

Posted by : Archive Import (Kaltun) at 06:42 on Monday, March 03, 2003

How shall I move an image from left to right across the screen

place email me back

Posted by : Archive Import (TAHA) at 08:25 on Tuesday, March 25, 2003

How shall I move an image from left to right across the screen

place email me back

Posted by : Archive Import (Yeong-Dong Han) at 00:30 on Thursday, September 18, 2003

How shall I move an image from left to right across the screen

place email me back

Posted by : bintababe at 11:55 on Tuesday, October 23, 2007

Hello my dear
compliment of the day.
my name is Binta,i am happy to contact you with all my heart,sorry to hear that a girl like me is searching for love,but i believe and i think that we can make it together,please i will like you to email me back if you real interested in my love, I believe we can move from here. I will be waiting to receive your lovely reply soonest,where i can give you my picture for you to know whom i am please contact back also with love from your heart,
thanks with love from my heart.
Binta

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	Re: Perl Script - File Handling.
•	Open a file from website
•	Re: to open 5 terminals from one and also execute different commands on each terminal
•	read a selected multiple line, those should match some of the values read in the files..
•	Help me please
•	Empty the contents of a file.
•	Month Start, End dates
•	show hide problem in dynamic table creation
•	Re: ASP Sendmail has huge delay - ANYONE??

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article