Jump to content
xisto Community
Sign in to follow this  
Followers 0
Nani Cheri

Javascript In Dreamweaver anyone whos familiar with dreamweaver

By Nani Cheri, in Programming

Recommended Posts

Nani Cheri    0

Nani Cheri
Posted

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:

 

[color=orange]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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// squidfingers.com | 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 Functionsvar 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 ClassScrollObj = 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 Functionsfunction 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>[/color]
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)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept