Min tanke är att ha en scroll innehållande ett flyttbart lager. Scrollen scrollar alltså, precis som vanligt, en yta men där i även ett flyttbart lager finns.
Problemet är att de två scripten inte fungerar tillsammans. Individuellt fungerar dem utmärkt, men när jag kör scripten samtidigt fungerar bara det ena eller andra beroende på vilken ordning scripten ligger i.
Med följande kod går det att flytta lagret men det går ej att scrolla.
Först scrollen:
<html><head><title>mjuk skog</title>
<style type="text/css">
#divContainer1 {position:absolute; z-index:2; overflow:hidden; left:416px; top:180px; width:300px; height:300px; clip:rect(0px,300px,300px,0px);}
#divContent1 {position:absolute; z-index:2; left:0px; top:0px; font-family:verdana,arial; font-size:10px; color:#000000; text-align:justify;}
#divUp1 {position:absolute; z-index:2; left:761px; top:150;}
#divDown1 {position:absolute; z-index:2; left:761px; top:495px;}
#divBar1 {position:absolute; z-index:2; left:761px; top:165px; width:15px; height:15px;}
#scrollbg1 {position:absolute; z-index:1; left:761px; top:132px;}
#sliderbg1 {position:absolute; z-index:1; left:761px; top:165px;}
</style>
<script language="javascript" type="text/javascript">
// All code copyright 2001 Rod Morelos, [url]www.e-syed.net/viewsrc[/url] | www20.brinkster.com/viewsrc
// Feel free to use this script for personal use, all I ask is that this code comment remain in tact.
// If you're are thinking of using this code for profit, you MUST get my permission before doing so.
// Thank you. - Rod Morelos (viewsrc@hotmail.com)
// Browser check (needed)
function checkBrowser()
{
this.agent=navigator.userAgent;
this.ver=navigator.appVersion;
this.dom=document.getElementById?1:0;
this.win=this.agent.indexOf('Windows')>-1;
this.mac=this.agent.indexOf("Mac")>-1;
this.ie4=(document.all && !this.dom)?1:0;
this.ie5=(this.ver.indexOf('MSIE 5')>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf('MSIE 6')>-1 && this.dom)?1:0;
this.ie4mac=(this.ie4 && this.mac);
this.ie5mac=(this.ie5 && this.mac);
this.ns4=(document.layers && !this.dom)?1:0;
this.ns6=(this.dom && parseInt(this.ver) >= 5)?1:0;
this.ie=(this.ie4 || this.ie5 || this.ie6 || this.ie4mac || this.ie5mac);
this.ns=(this.ns4 || this.ns6);
this.w3c=(this.ie5 || this.ie6 || this.ns6 || this.ie5mac);
this.bw=(this.ie4 || this.ie5 || this.ie6 || this.ns4 || this.ns6);
return this;
}
var bw=new checkBrowser();
// Variables to set:
var scrollstep=30; // the speed of the timeout between each scroll
var scrollables=1; // number of scrollable content
var scrollspeed=2; // scroll speed
// Variables NOT to set:
var scrolltimer=0; // timer variable for vscroll function
// Makes crossbrowser object
function makeObject(obj)
{
this.oref=bw.w3c?document.getElementById(obj):bw.ie4?document.all[obj]:null;
this.css=this.oref.style;
this.getLeft=f_getLeft;
this.getTop=f_getTop;
this.width=f_width;
this.height=f_height;
this.isover=f_isover;
this.isdrag=false;
return this;
}
// Get left position of object
function f_getLeft()
{
if (bw.ns6) { if (this.css.left) return parseInt(this.css.left); else return this.oref.offsetLeft; }
else if (bw.ie) { if (this.css.pixelLeft) return parseInt(this.css.pixelLeft); else return this.oref.offsetLeft; }
}
// Get top position of object
function f_getTop()
{
if (bw.ns6) { if (this.css.top) return parseInt(this.css.top); else return this.oref.offsetTop; }
else if (bw.ie) { if (this.css.pixelTop) return parseInt(this.css.pixelTop); else return this.oref.offsetTop; }
}
// Get object width
function f_width()
{
if (bw.ie) if (this.css.pixelWidth) return this.css.pixelWidth; else return this.oref.offsetWidth;
else if (bw.ns6) if (this.css.width) return parseInt(this.css.width); else return this.oref.offsetWidth;
}
// Get object height
function f_height()
{
if (bw.ie) if (this.css.pixelHeight) return this.css.pixelHeight; else return this.oref.offsetHeight;
else if (bw.ns6) if (this.css.height) return parseInt(this.css.height); else return this.oref.offsetHeight;
}
// Check is the mouse pointer is over the layer
function f_isover(x,y)
{
if (x>=this.getLeft()&&(x<=(this.getLeft()+this.width()))&&y>=this.getTop()&&(y<=(this.getTop()+this.height()))) return true;
else return false;
}
// Capture mouse move. Moves the content using scrollbar.
function mmove(e)
{
getmousexy(e);
for (i=1;i<=scrollables;i++)
{
if (oBar[i].isdrag)
{
scrollH=my-dragY;
if (scrollH<=oUp[i].getTop()+oUp[i].height()) scrollH=oUp[i].getTop()+oUp[i].height();
else if (scrollH>=oDown[i].getTop()-oBar[i].height()) scrollH=oDown[i].getTop()-oBar[i].height();
oBar[i].css.top=scrollH+'px';
scrollTo(i);
return false;
}
if (!oUp[i].isover(mx,my) || !oDown[i].isover(mx,my)) { clearTimeout(scrolltimer); }
}
}
// Mouse down
function mdown(e)
{
getmousexy(e);
for (var i=1;i<=scrollables;i++)
{
if ((oContent[i].getTop()>-oContent[i].height()+oContainer[i].height()) || (oContent[i].getTop()<0))
{
if (oBar[i].isover(mx,my)) { oBar[i].isdrag=true; dragY=my-oBar[i].getTop(); return false; }
if (oUp[i].isover(mx,my)) { vscroll(i,-scrollspeed); return false; }
if (oDown[i].isover(mx,my)) { vscroll(i,scrollspeed); return false; }
}
}
}
// Mouse up
function mup(e)
{
for (var i=1;i<=scrollables;i++) { oBar[i].isdrag=false; }
clearTimeout(scrolltimer);
}
// Function that moves the scrollbar and calls scrollTo
function vscroll(num,speed)
{
var barT=oBar[num].getTop()+speed;
if (barT<=oUp[num].getTop()+oUp[num].height()) barT=oUp[num].getTop()+oUp[num].height();
else if (barT>=oDown[num].getTop()-oBar[num].height()) barT=oDown[num].getTop()-oBar[num].height();
oBar[num].css.top=barT+'px';
scrollTo(num);
scrolltimer=setTimeout('vscroll('+num+','+speed+')',scrollstep);
}
// Function that scrolls the content
function scrollTo(num)
{
// (content-scrollheight/bar-scrollheight)*-(bar-top in its scrollheight)
contentT=(oContent[num].height()-oContainer[num].height())/((oDown[num].getTop()-oBar[num].height())-(oUp[num].getTop()+oUp[num].height()))*(-(oBar[num].getTop()-(oUp[num].getTop()+oUp[num].height())));
oContent[num].css.top=contentT+'px';
}
// Get mouse x and y coordinates
function getmousexy(e)
{
mx=bw.ns?e.pageX:event.clientX+document.body.scrollLeft;
my=bw.ns?e.pageY:event.clientY+document.body.scrollTop;
}
// Function to call on page load
function vscrollInit()
{
oBar=new Array();
oDown=new Array();
oUp=new Array();
oContainer=new Array();
oContent=new Array();
for(i=1;i<=scrollables;i++)
{
oContainer[i]=new makeObject('divContainer'+i);
oContent[i]=new makeObject('divContent'+i);
oBar[i]=new makeObject('divBar'+i);
oDown[i]=new makeObject('divDown'+i);
oUp[i]=new makeObject('divUp'+i);
if (bw.ns6) oContent[i].css.position='relative'; // scrollbar hack for NS6
}
document.onmousemove=mmove;
document.onmousedown=mdown;
document.onmouseup=mup;
}
// Initiate script on page load
onload=vscrollInit;
</script>
<csscriptdict>
<script><!--
CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
var curDoc = ly ? ly.document : document; var elem = curDoc[n];
if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
return elem;
}
function CSURLPopupShow(formName, popupName, target) {
var form = CSFindElement(formName);
var popup = form.elements[popupName];
window.open(popup.options[popup.selectedIndex].value, target);
popup.selectedIndex = 0;
}
// --></script>
</csscriptdict>
<SCRIPT LANGUAGE="javascript">
function ny_sida(url,width,height)
{ egenskaper="toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";
egenskaper+=",width="+width;
egenskaper+=",height="+height;
unik=new Date();
unik=unik.getSeconds()+"_"+unik.getMinutes()+"_"+unik.getHours();
window.open(url,unik,egenskaper);
}
//-->
</SCRIPT>
</head><body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">
Här börjar det som ska scrollas, inklusive det flyttbara lagret:
<div id="divContainer1">
<div id="divContent1">
<script>
drag = 0
move = 0
function init() {
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(dragObj.style.left)
clicktop = window.event.y - parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove() {
if (move) {
dragObj.style.left = window.event.x - clickleft
dragObj.style.top = window.event.y - clicktop
}
}
function mouseUp() {
move = 0
}
onload=init;
</script>
<div id="lager1" onMouseOver="dragObj=lager1; drag=1;" onMouseOut="drag=0" style="visibility: visible; position: absolute; left:5; top:5;">
aaa
</div>
</div>
</div>
Och här slutligen scrollen:
<div id="divBar1"><img src="bar.gif"><br></td></table></div>
<div id="divUp1"><img src="upp.gif"></div>
<div id="divDown1"><img src="ner.gif"></div>
<div id="scrollbg1" style=" position: absolute; z-index: 1; top: 132px; left: 320px; width: 620px; height: 330px; visibility: visible"></div>
<div id="sliderbg1" style="width: 15; height: 330"></div>
</body></html>