Hi!!!

I'v made a lay-out in Fireworks for my website. I used nestled tables and slices...etc.etc. It took a while, but I finally found out how to put content in my layout...What my problem is, I want to put a 'scrollbox' in my lay-out to put my content in. But it's a Javascript code:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DivScroller</title>
<script type="text/javascript">

// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||
// --- version date: 01/24/03 ---------------------------------------------------------

// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||
// Cross-Browser Functions

var dom = document.getElementById;
var iex = document.all;
var ns4 = document.layers;

function addEvent(event,method){
this[event] = method;
if(ns4) this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function removeEvent(event){
this[event] = null;
if(ns4) this.releaseEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function getElement(name,nest){
nest = nest ? "document."+nest+"." : "";
var el = dom ? document.getElementById(name) : iex ? document.all[name] : ns4 ? eval(nest+"document."+name) : false;
el.css = ns4 ? el : el.style;
el.getTop = function(){return parseInt(el.css.top) || 0};
el.setTop = function(y){el.css.top = ns4 ? y: y+"px"};
el.getHeight = function(){return ns4 ? el.document.height : el.offsetHeight};
el.getClipHeight = function(){return ns4 ? el.clip.height : el.offsetHeight};
el.hideVis = function(){el.css.visibility="hidden"};
el.addEvent = addEvent;
el.removeEvent = removeEvent;
return el;
}
function getYMouse(e){
return iex ? event.clientY : e.pageY;
}

document.addEvent = addEvent;
document.removeEvent = removeEvent;

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Scroller Class

ScrollObj = function(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
this.speed = speed;
this.dragHeight = dragHeight;
this.trackHeight = trackHeight;
this.trackObj = getElement(trackObj);
this.upObj = getElement(upObj);
this.downObj = getElement(downObj);
this.dragObj = getElement(dragObj);
this.contentMaskObj = getElement(contentMaskObj);
this.contentObj = getElement(contentObj,contentMaskObj);
this.obj = contentObj+"Object";
eval(this.obj+"=this");

this.trackTop = this.dragObj.getTop();
this.trackLength = this.trackHeight-this.dragHeight;
this.trackBottom = this.trackTop+this.trackLength;
this.contentMaskHeight = this.contentMaskObj.getClipHeight();
this.contentHeight = this.contentObj.getHeight();
this.contentLength = this.contentHeight-this.contentMaskHeight;
this.scrollLength = this.trackLength/this.contentLength;
this.scrollTimer = null;

if(this.contentHeight <= this.contentMaskHeight){
 this.dragObj.hideVis();
}else{
 var self = this;
 this.trackObj.addEvent("onmousedown", function(e){self.scrollJump(e);return false});
 this.upObj.addEvent("onmousedown", function(){self.scroll(self.speed);return false});
 this.upObj.addEvent("onmouseup", function(){self.stopScroll()});
 this.upObj.addEvent("onmouseout", function(){self.stopScroll()});
 this.downObj.addEvent("onmousedown", function(){self.scroll(-self.speed);return false});
 this.downObj.addEvent("onmouseup", function(){self.stopScroll()});
 this.downObj.addEvent("onmouseout", function(){self.stopScroll()});
 this.dragObj.addEvent("onmousedown", function(e){self.startDrag(e);return false});
 if(iex) this.dragObj.addEvent("ondragstart", function(){return false});
}
}
ScrollObj.prototype.startDrag = function(e){
this.dragStartMouse = getYMouse(e);
this.dragStartOffset = this.dragObj.getTop();
var self = this;
document.addEvent("onmousemove", function(e){self.drag(e)});
document.addEvent("onmouseup", function(){self.stopDrag()});
}
ScrollObj.prototype.stopDrag = function(){
document.removeEvent("onmousemove");
document.removeEvent("onmouseup");
}
ScrollObj.prototype.drag = function(e){
var currentMouse = getYMouse(e);
var mouseDifference = currentMouse-this.dragStartMouse;
var dragDistance = this.dragStartOffset+mouseDifference;
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
this.dragObj.setTop(dragMovement);
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
this.contentObj.setTop(contentMovement);
}
ScrollObj.prototype.scroll = function(speed){
var contentMovement = this.contentObj.getTop()+speed;
var dragMovement = this.trackTop-Math.round(this.contentObj.getTop()*(this.trackLength/this.contentLength));
if(contentMovement > 0){
 contentMovement = 0;
}else if(contentMovement < -this.contentLength){
 contentMovement = -this.contentLength;
}
if(dragMovement < this.trackTop){
 dragMovement = this.trackTop;
}else if(dragMovement > this.trackBottom){
 dragMovement = this.trackBottom;
}
this.contentObj.setTop(contentMovement);
this.dragObj.setTop(dragMovement);
this.scrollTimer = window.setTimeout(this.obj+".scroll("+speed+")",25);
}
ScrollObj.prototype.stopScroll = function(){
if(this.scrollTimer){
 window.clearTimeout(this.scrollTimer);
 this.scrollTimer = null;
}
}
ScrollObj.prototype.scrollJump = function(e){
var currentMouse = getYMouse(e);
var dragDistance = currentMouse-(this.dragHeight/2);
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
this.dragObj.setTop(dragMovement);
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
this.contentObj.setTop(contentMovement);
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Misc Functions

function fixNetscape4(){
if(ns4origWidth != window.innerWidth || ns4origHeight != window.innerHeight){
 window.location.reload();
}
}
if(document.layers){
ns4origWidth = window.innerWidth;
ns4origHeight = window.innerHeight;
window.onresize = fixNetscape4;
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||

window.onload = function(){
// speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
myScroll = new ScrollObj(6,21,110,"track","up","down","drag","contentMask","content");
};

</script>
<style type="text/css">

body {
background-color: #785A3C;
overflow: hidden;
}
p {
font-weight: normal;
font-family: verdana,sans-serif;
font-size: 11px;
line-height: 13px;
color: #785A3C;
margin: 0 0 10px 0;
padding: 0;
}

</style>
</head>
<body>

<div id="box" style="position:absolute; left:65px; top:75px; z-index:1;">
<img src="images/box.gif" width="250" height="150" />
</div>
<div id="up" style="position:absolute; left:315px; top:75px; z-index:2; cursor:pointer;">
<img src="images/up.gif" width="21" height="20" />
</div>
<div id="track" style="position:absolute; left:315px; top:95px; z-index:3;">
<img src="images/track.gif" width="21" height="110" />
</div>
<div id="drag" style="position:absolute; left:315px; top:95px; z-index:4; cursor:pointer;">
<img src="images/drag.gif" width="21" height="19" />
</div>
<div id="down" style="position:absolute; left:315px; top:205px; z-index:5; cursor:pointer;">
<img src="images/down.gif" width="21" height="20" />
</div>
<div id="contentMask" style="position:absolute; left:75px; top:85px; width:230px; height:130px; clip:rect(0,230px,130px,0); overflow:hidden; z-index:6;">
<div id="content" style="position:absolute; left:0; top:0; width:230px;">
 <p>CONTENT HERE</div>
</div>

</body>
</html>


When I put my cursor at a place in the lay-out, where I'd like to put the scrollbox code in, and paste the part in -head- and -body-, the 'textarea' is'nt the way it supposed to be.
The content is longer then the box, while it supposed to stay in the box..so you can scroll up and down. But I'm also not able to scroll..
Also the content and images from the scrolllbox won't stay in the center or where I put my cursor when pasting the code.. The whole thing goes up, at the top of the page (when looking in design view)

I know it's very hard too read,, and understand what I mean...but if you know how to put pre-made JS codes in Dreamweaver...without trouble....please reply this topic or contact me!!!

nantjuh@hotmail.com (msn)

 

 

 


Reply