Lukas: Ajax sortable list mit "ul position:relative" und cust. scrollb.

SELF-Forum

Ajax sortable list mit "ul position:relative" und cust. scrollb.

Lukas
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich brauche dringendst Hilfe:
Ich bastele gerade an einer todoliste, im einsatz habe ich die sprachen: "HTA(html)",CSS, vbscript und javascript (mit scriptaculous framework).

Die Problematik ist, dass ich einen selber gemachten scrollbar haben möchte,
soweit ich weiss funktioniert das nur wenn der zu scrollende Bereich(in meinem Fall ein ul) das css Attribut "position" auf "relative" gesetzt ist und ein div mit "overflow:hidden" aussenrum liegt.
mit position:relative funktioniert aber das sortieren der Liste nicht mehr!
Falls einer/eine von euch andere Methoden kennt selber gemachte scrollbars zu basteln oder einen Workaround für das Sortable Problem kennt, bitte helft mir!
Ich bin am verzweifeln, bitte dringendst um Hilfe!
 Daten: Scriptacoulous version 1.8.1 und neueste Prototype Version.
Den ganzen Code kann ich nicht posten, da dieser über 600 Zeilen lang ist, aber hier (hoffentlich)alles relevante:

Die wichtigen HTML Elemente und das zugehörige css:

<div id="scrollArea"><div id="scroller"></div></div>
<div id="container">
<ul id="list" class="ulist">
</ul>
</div>

.list {
 font-weight: lighter;
 position:relative;
 list-style-type: none;

}
#container{
 margin-top:100px;
 position:absolute;
 height:443px;
 overflow:hidden;
}
#scrollArea {
 position : absolute;
 left : 850px;
 top : 112px;
 height : 443px;
 width : 15px;
 border : 1px solid #666;
 overflow : hidden;
}

#scroller {
 position : absolute;
 top : -1px;
 width : 15px;
 background : #AAA;
 border-top : 1px solid #666;
 border-bottom : 1px solid #666;
}

// hier wird die Sortable List erstellt
function filllist(li){

if(li!=undefined){

$('list').innerHTML=li;
Position.includeScrollOffsets = true;

Sortable.create("list",{onUpdate:chprio});

}else{

$('list').innerHTML="";
}
}

//jetzt der(zu meiner Schande kopierte) Code für den Scrollbar
//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
 init: function() {
loaditems();
 //collect the variables
 scroller.docH = $("list").offsetHeight;
 scroller.contH = $("container").offsetHeight;
 scroller.scrollAreaH = $("scrollArea").offsetHeight;

//calculate height of scroller and resize the scroller div
 //(however, we make sure that it isn't to small for long pages)
 scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
if(scroller.scrollH < 15) scroller.scrollH = 15;
 $("scroller").style.height = Math.round(scroller.scrollH) + "px";

//what is the effective scroll distance once the scoller's height has been taken into account
 scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);

//make the scroller div draggable
 Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);

//add ondrag function
 $("scroller").onDrag = function (x,y) {
 var scrollY = parseInt($("scroller").style.top);
 var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
 $("list").style.top = docY + "px";
 }
 }

}

onload = scroller.init;

Der Code ist noch nicht sooo schön, aber ich mache zur Zeit sehr viele Veränderungen, entschuldigt bitte

Falls ihr doch das ganze Packet braucht, habe ich mal ein rar hochgeladen, bitte urteilt nich über den code, vorallem das vbscript ist noch recht untrukturiert und nicht besonderst schön anzuschauen....

http://ls123.ath.cx/todoliste/todolist.rar

Vielen Dank und liebe Grüsse Lukas

Beitrag melden
–
Informationen zu den Bewertungsregeln