Jeps... Det fandt jeg ud af...
Kan du så hjælpe med position... Hvordan får jeg de positioner jeg giver, til kun at gælde inden for f.eks
<div></div>
Så jeg kan placere det div hvor jeg vil, og så bare rette de positioner til som jeg har inde i det div... forstår du ?
Nyeste code jeg er kommet frem til er:
---
<html>
<head>
<title>scroller3</title>
<link rel="stylesheet" type="text/css" href="common.css">
<style type="text/css">
.clContent
{
left: 0px;
top: 0px;
}
#scrollContainer1
{
position: absolute;
overflow: hidden;
left: 50px;
top: 250px;
width: 520px;
height: 200px;
border: 1px solid #aeaeae;
}
#scrollLeft1
{
position: absolute;
left: 50px;
top: 280px;
width: 12px;
height: 12px;
background-color: #beddf1;
font-size: 1px;
background-image: url(left.gif);
cursor:hand;
}
#scrollRight1
{
position: absolute;
left: 340px;
top: 280px;
width: 12px;
height: 12px;
background-color: #beddf1;
font-size: 1px;
background-image: url(right.gif);
cursor:hand;
}
#scrollBar1
{
position: absolute;
left: 0px;
top: 0px;
width: 19px;
height: 12px;
background-color: #beddf1;
font-size: 1px;
background-image: url(bar.gif);
cursor:hand;
}
#scrollTrack1
{
position: absolute;
left: 70px;
top: 380px;
width: 472px;
height: 12px;
background-color: #cccccc;
font-size: 1px;
}
</style>
<script type="text/javascript">
// scroller3 by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code
// lib_basic.js by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code
// object constructor
function createObjectById(id)
{
this.el = document.getElementById ? document.getElementById(id) : null;
if (!this.el) throw new Error('Element with "' + id + '" id not found.');
this.css = this.el.style;
this.i = createObjectById.registry.length;
createObjectById.registry[this.i] = this;
this.w = this.el.offsetWidth ? this.el.offsetWidth : 0;
this.h = this.el.offsetHeight ? this.el.offsetHeight : 0;
this.x = this.el.offsetLeft ? this.el.offsetLeft : 0;
this.y = this.el.offsetTop ? this.el.offsetTop : 0;
this.o = 100;
}
// global reference to the dhtml object
createObjectById.registry = [];
// update object values
createObjectById.prototype.update = function()
{
this.w = this.el.offsetWidth ? this.el.offsetWidth : 0;
this.h = this.el.offsetHeight ? this.el.offsetHeight : 0;
this.x = this.el.offsetLeft ? this.el.offsetLeft : 0;
this.y = this.el.offsetTop ? this.el.offsetTop : 0;
}
// visibility
createObjectById.prototype.show = function() { this.css.visibility = 'visible'; }
createObjectById.prototype.hide = function() { this.css.visibility = 'hidden'; }
// display
createObjectById.prototype.display = function(d) { this.css.display = d; }
// colors
createObjectById.prototype.fg = function(f) { this.css.color = f; }
createObjectById.prototype.bg = function(b) { this.css.backgroundColor = b; }
// set layer opacity (in percent, between 0 and 100)
createObjectById.prototype.setOpacity = function(o)
{
if (typeof this.css.MozOpacity != 'undefined') { this.css.MozOpacity = (o / 100); this.o = o; }
else if (this.el.filters) { this.css.filter = 'alpha(opacity=' + o + ')'; this.o = o; }
}
// moves a layer to (x, y) pixels
createObjectById.prototype.moveTo = function(x, y)
{
if (x != null && typeof x == 'number')
{
x = Math.round(x);
this.x = x;
this.css.left = x + 'px';
}
if (y != null && typeof y == 'number')
{
y = Math.round(y);
this.y = y;
this.css.top = y + 'px';
}
}
// resize layer to (width, height) pixels
createObjectById.prototype.setSize = function(w, h)
{
if (w != null && typeof w == 'number')
{
if (w < 0) w = 0;
w = Math.round(w);
this.css.width = w + 'px';
}
if (h != null && typeof h == 'number')
{
if (h < 0) h = 0;
h = Math.round(h);
this.css.height = h + 'px';
}
this.update();
}
// clips layer to specific dimensions; (top, right, bottom, left) in pixels
createObjectById.prototype.clipTo = function(t, r, b, l)
{
if (t < 0) t = 0; if (r < 0) r = 0; if (b < 0) b = 0; if (l < 0) l = 0;
this.css.clip = 'rect(' + t + 'px, ' + r + 'px, ' + b + 'px, ' + l + 'px)';
}
// write content to layer
createObjectById.prototype.write = function(text)
{
if (typeof this.el.innerHTML != 'undefined')
{
this.el.innerHTML = text;
this.update();
}
}
var scroller = {
scrollables: 1, // set the number of scrollable scrollContent
step: 30, // set the timeout between each scroll
speed: 5, // set the scroll speed
wheelSpeed: 15, // set the scroll speed when using the mouse wheel
wheelScrolled: false,
timer: 0,
contentX: 0,
dragX: 0,
clickX: 0,
mouseDown: function(e)
{
e = fixEvent(e);
var canvas = new getViewport();
var mouseX = e.clientX + canvas.scrollX;
var target = (e.target.nodeType == 3 || e.target.tagName.toLowerCase() == 'img') ? e.target.parentNode : e.target;
scroller.wheelScrolled = false;
for (var i = 1; i <= scroller.scrollables; i++)
{
if (target.id == scroller.bar[i].el.id)
{
scroller.bar[i].grab = true;
scroller.clickX = mouseX - scroller.bar[i].x;
e.preventDefault();
}
else if (target.id == scroller.track[i].el.id)
{
if (scroller.content[i].w > scroller.container[i].w)
{
scroller.track[i].grab = true;
scroller.dragX = e.layerX - (scroller.bar[i].w / 2);
if (scroller.dragX < 0) scroller.dragX = 0;
if (scroller.dragX > scroller.track[i].w - scroller.bar[i].w) scroller.dragX = scroller.track[i].w - scroller.bar[i].w;
scroller.contentX = 0 - (scroller.dragX * (scroller.content[i].w - scroller.container[i].w) / Math.round(scroller.track[i].w - scroller.bar[i].w));
scroller.content[i].moveTo(scroller.contentX, 0);
scroller.bar[i].moveTo(scroller.dragX, 0);
e.preventDefault(e);
}
}
else if (target.id == scroller.left[i].el.id)
{
scroller.left[i].grab = true;
scroller.scroll(i, scroller.speed);
e.preventDefault();
}
else if (target.id == scroller.right[i].el.id)
{
scroller.right[i].grab = true;
scroller.scroll(i, -scroller.speed);
e.preventDefault();
}
}
},
mouseUp: function(e)
{
for (var i = 1; i <= scroller.scrollables; i++)
{
scroller.bar[i].grab = false;
scroller.track[i].grab = false;
scroller.left[i].grab = false;
scroller.right[i].grab = false;
}
clearTimeout(scroller.timer);
},
mouseMove: function(e)
{
for (var i = 1; i <= scroller.scrollables; i++)
{
if (scroller.bar[i].grab && scroller.content[i].w > scroller.container[i].w)
{
e = fixEvent(e);
var canvas = new getViewport();
var mouseX = e.clientX + canvas.scrollX;
scroller.dragX = mouseX - scroller.clickX;
if (scroller.dragX < 0) scroller.dragX = 0;
if (scroller.dragX > scroller.track[i].w - scroller.bar[i].w) scroller.dragX = scroller.track[i].w - scroller.bar[i].w;
scroller.contentX = 0 - (scroller.dragX * (scroller.content[i].w - scroller.container[i].w) / Math.round(scroller.track[i].w - scroller.bar[i].w));
scroller.content[i].moveTo(scroller.contentX, 0);
scroller.bar[i].moveTo(scroller.dragX,0);
e.preventDefault();
}
}
},
scroll: function(num, speed)
{
if (scroller.content[num].x < 0 || scroller.content[num].x > -scroller.content[num].w + scroller.container[num].w)
{
scroller.contentX = scroller.content[num].x + speed;
if (scroller.contentX < -(scroller.content[num].w - scroller.container[num].w)) scroller.contentX = -scroller.content[num].w + scroller.container[num].w;
else if (scroller.contentX > 0) scroller.contentX = 0;
scroller.content[num].moveTo(scroller.contentX, 0);
scroller.dragX = 0 - (scroller.content[num].x * Math.round(scroller.track[num].w - scroller.bar[num].w) / (scroller.content[num].w - scroller.container[num].w));
scroller.bar[num].moveTo(scroller.dragX, 0);
if (!scroller.wheelScrolled) scroller.timer = setTimeout('scroller.scroll(' + num + ', ' + speed + ')', scroller.step);
}
},
wheelScroll: function(e)
{
e = fixEvent(e);
var el = e.target;
if (el.id.slice(0, el.id.length - 1) != 'scrollContent')
{
do el = el.parentNode;
while (el.tagName.toLowerCase() != 'div' || el.id.slice(0, el.id.length - 1) != 'scrollContent')
}
var i = el.id.charAt(el.id.length - 1);
if (window.event.wheelDelta <= -120)
{
scroller.wheelScrolled = true;
scroller.scroll(i, -scroller.wheelSpeed);
}
else if (window.event.wheelDelta >= 120)
{
scroller.wheelScrolled = true;
scroller.scroll(i, scroller.wheelSpeed);
}
e.preventDefault();
},
init: function()
{
scroller.container = new Array();
scroller.content = new Array();
scroller.bar = new Array();
scroller.left = new Array();
scroller.right = new Array();
scroller.track = new Array();
for (var i = 1; i <= scroller.scrollables; i++)
{
scroller.container[i] = new createObjectById('scrollContainer' + i);
scroller.content[i] = new createObjectById('scrollContent' + i);
scroller.content[i].css.position = bw.moz ? 'relative' : 'absolute';
scroller.content[i].update();
scroller.bar[i] = new createObjectById('scrollBar' + i);
scroller.bar[i].grab = false;
scroller.track[i] = new createObjectById('scrollTrack' + i);
scroller.track[i].grab = false;
scroller.left[i] = new createObjectById('scrollLeft' + i);
scroller.left[i].grab = false;
scroller.right[i] = new createObjectById('scrollRight' + i);
scroller.right[i].grab = false;
if (bw.ie6) addEvent(scroller.content[i].el, 'mousewheel', scroller.wheelScroll, false);
}
addEvent(document, 'mousemove', scroller.mouseMove, false);
addEvent(document, 'mousedown', scroller.mouseDown, false);
addEvent(document, 'mouseup', scroller.mouseUp, false);
}
}
onload = scroller.init;
// lib_js by rod.rant-on.net | rodmorelos@msn.com
// keep these two lines and you're free to use this code
// functions i find useful or are used in my scripts
// measure page width and height (the viewable canvas area)
function getViewport()
{
if (document.documentElement && document.documentElement.scrollLeft) this.scrollX = document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft) this.scrollX = document.body.scrollLeft;
else if (window.scrollX) this.scrollX = window.scrollX;
else if (window.pageXOffset) this.scrollX = window.pageXOffset;
else this.scrollX = 0;
if (document.documentElement && document.documentElement.scrollTop) this.scrollY = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop) this.scrollY = document.body.scrollTop;
else if (window.scrollY) this.scrollY = window.scrollY;
else if (window.pageYOffset) this.scrollY = window.pageYOffset;
else this.scrollY = 0;
if (document.documentElement && document.documentElement.clientWidth) this.width = document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth) this.width = document.body.clientWidth;
else if (window.innerWidth) this.width = window.innerWidth;
else this.width = 0;
if (document.documentElement && document.documentElement.clientHeight) this.height = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight) this.height = document.body.clientHeight;
else if (window.innerHeight) this.height = window.innerHeight;
else this.height = 0;
}
// event listeners
// object = the object to attach the event handler to
// eventType = the type of event to listen for
// functionName = the handler function to execute when the event is fired
// capture = use event capture?
function addEvent(object, eventType, functionName, capture)
{
if (object.addEventListener)
{
object.addEventListener(eventType, functionName, capture);
return true;
}
else if (object.attachEvent)
{
var ae = object.attachEvent('on' + eventType, functionName);
return ae;
}
else { object['on' + eventType] = functionName; }
}
function removeEvent(object, eventType, functionName, capture)
{
if (object.removeEventListener)
{
object.removeEventListener(eventType, functionName, capture);
return true;
}
else if (object.detachEvent)
{
var re = object.detachEvent('on' + eventType, functionName);
return re;
}
else { object['on' + eventType] = null; }
}
function fixEvent(e, currentTarget)
{
if (!e) e = event;
if (!e.target) e.target = e.srcElement;
if (!e.currentTarget) e.currentTarget = currentTarget;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
if (typeof e.clientX == 'undefined') e.clientX = e.pageX;
if (typeof e.clientY == 'undefined') e.clientY = e.pageY;
if (!e.stopPropagation) e.stopPropagation = function() { this.cancelBubble = true; }
if (!e.preventDefault) e.preventDefault = function() { this.returnValue = false; }
return e;
}
// browser check
function browserCheck()
{
this.ua = navigator.userAgent.toLowerCase();
this.dom = document.getElementById ? 1 : 0;
this.op7 = (this.dom && this.ua.indexOf('opera 7') > -1 || this.ua.indexOf('opera/7') > -1) ? 1 : 0;
this.ie5 = (this.dom && this.ua.indexOf('msie 5') > -1) ? 1 : 0;
this.ie6 = (this.dom && this.ua.indexOf('msie 6') > -1) ? 1 : 0;
this.moz = (this.dom && this.ua.indexOf('mozilla') > -1 && this.ua.indexOf('gecko') > -1) ? 1 : 0;
return this;
}
// returns a random number between x and y (integers)
function rand(x, y) { return (Math.round(Math.random() * (y - x)) + x); }
// browser check variable
var bw = browserCheck();
</script>
</head>
<body>
<div id="scrollContainer1">
<div id="scrollContent1" class="clContent">
<nobr>
<a href="#">link 1</a> -
<a href="#">link 2</a> -
<a href="#">link 3</a> -
<a href="#">link 4</a> -
<a href="#">link 5</a> -
<a href="#">link 6</a> -
<a href="#">link 7</a> -
<a href="#">link 8</a> -
<a href="#">link 9</a> -
<a href="#">link 10</a> -
<a href="#">link 11</a> -
<a href="#">link 12</a> -
<a href="#">link 13</a> -
<a href="#">link 14</a> -
<a href="#">link 15</a> -
<a href="#">link 16</a> -
<a href="#">link 17</a> -
<a href="#">link 18</a> -
<a href="#">link 19</a> -
<a href="#">link 20</a>
</nobr>
</div>
</div>
<div id="scrollLeft1"></div>
<div id="scrollRight1"></div>
<div id="scrollTrack1"><div id="scrollBar1"></div></div>
</body>
</html>
---
