Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

beginner. custom scrolling?

Status
Not open for further replies.
spungemad

spungemad

Technical User
Mar 14, 2007
2
GB
well, i am a total beginner to web design of any sort and ive just used a variety of programmes to get to the stage i am at now.see>
and i have the idea of having custom scrollbars (using the pictures shown on the righthand side on the website).

i think i may have to do it in javascript, would that be right?

also is there any easy (lazy) way to do it?


andy advice would be greatful,
thanks,
Emma
 
Sort by date Sort by votes
spungemad said:
i think i may have to do it in javascript, would that be right?
Click to expand...
Yes.

spungemad said:
also is there any easy (lazy) way to do it?
Click to expand...
Even better, there's a whole tutorial on it:

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
thanks a lot for that. Im sorry i didnt make it more clear but i was thinking more of two arrows, one for up, one for down.


however if its not possible i will use what you suggested as a backup.

thanks again
 
Upvote 0 Downvote
It's certainly possible... and quite easy if you read the tutorial.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#contentArea {
	height: 200px;
	width: 200px;
	overflow: hidden;
	position: absolute;
}
#content {
	top: 0px;
	width: 200px;
	position:relative;
}
#scrollArea {
	height: 200px;
	width: 50px;
	position: absolute;
	left: 250px;
}
#scrollUp {
    height: 50px;
	margin-bottom:50px;
}
#scrollDown {
	height: 50px;
	margin-top:100px;
}
</style>
<script type="text/javascript" language="javascript">
function scroll(strDirection){
	var currTop = document.getElementById("content").offsetTop;
	var increment = (strDirection == 'down' ? -50 : 50);
	document.getElementById("content").style.top = (currTop + increment) + "px";
}

</script>
</head>

<body>
<div id="contentArea">
<div id="content">
This is the top
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis. 
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
Dominus Deus qui ductor est vester pro vobis ipse pugnabit sicut fecit in Aegypto videntibus cunctis.
</div>
</div>
<div id="scrollArea">
<div id="scrollUp"><a href="#" onclick="scroll('up'); return false;">^</a></div>
<div id="scrollDown"><a href="#" onclick="scroll('down'); return false;">v</a></div>
</div>
</body>

</html>

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

mulawa1
  • Locked
  • Question
JavaScript game creation for beginners
Replies
3
Views
173
marcosuve
marcosuve
Krus1972
  • Locked
  • Question
On-Click Form Input Box Scrolling
Replies
4
Views
146
Krus1972
Krus1972
southbeach
  • Locked
  • Question
Using multiple jquery .dialog() with custom themes each
Replies
2
Views
127
southbeach
southbeach
JBorges
  • Locked
  • Question
Infinite Scrolling Both Up and Down
Replies
10
Views
235
JBorges
JBorges
yaknowss
  • Locked
  • Question
Slideshow that disappears when scrolling down on a page
Replies
7
Views
153
yaknowss
yaknowss

Part and Inventory Search

Sponsor

Back
Top