[FF] Versleepbare GoT reply: Fixed t.o.v. relative?

[Verwijderd]

Hee,

ik heb een bookmarklet gemaakt voor firefox die textareas laat zweven en versleepbaar maakt, deze doet dat voor GoT (bedoeling is later een universele versie voor alle textarea's):
http://www.wdavids.nl/test/t.html

Handig als je naar beneden bent gescrollt om te reageren op andere posts/foto's oid Dit is de code:

JavaScript:

javascript:

styles='
#sleep {
top: 10px;
left: 10px;
width: 500px;
height: 20px;
z-index: 100;
background-color: #9f998c;
-moz-opacity: 0.7;
cursor: move;
position: fixed;
border-style: solid;
border-width: 1px;
border-bottom: 0px;
}

#messageBox {
position: fixed;
top: 30px;
left: 10px;
width: 500px;
height: 250px;
z-index: 99;
-moz-opacity: 0.9;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
';


css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'data:text/css,' + escape(styles);
document.documentElement.childNodes[0].appendChild(css);

dragboxie = document.createElement('div');
dragboxie.id = 'sleep';
dragboxie.setAttribute('onmousedown', 'beginSleep(this,event)');
dragboxie.setAttribute('onmousemove', 'drag(event)');
document.body.appendChild(dragboxie);
document.getElementById('sleep').style.left = 10 + 'px';
document.getElementById('sleep').style.top = 10 + 'px';

var slepen = false;
var sleepObject;
var eX, eY;
var curX, curY;

function beginSleep(dragdiv,e){
    slepen = true;
    sleepObject = dragdiv;
    curX = e.clientX;
    curY = e.clientY;
    eX = curX - parseInt(sleepObject.style.left);
    eY = curY - parseInt(sleepObject.style.top);
}

function drag(e){
    var newPosX;
    var newPosY;
    if(slepen == true){

        curX = e.clientX;
        curY = e.clientY;

        sleepObject.style.left = curX - eX + 'px';
        sleepObject.style.top = curY - eY + 'px';

        document.getElementById('messageBox').style.top = curY - eY + 20 + 'px';
        document.getElementById('messageBox').style.left = curX - eX + 'px';

        document.onmousemove=drag;

    }
}
document.onmouseup=new Function('slepen = false;');


void 0

Maarrr... ik zou willen dat de textarea los komt van de pagina op de positie waar hij staat. Dus niet dat ie naar linksboven (10px, 10px) gegooid wordt. Ik gebruik 'position: fixed' voor beide elementen (sleep + messageBox), maar die kan ik niet de coördinaten van de oude messageBox geven omdat die relatief staat.

Onderaan staat nog een ander probeersel:
http://www.wdavids.nl/test/t.html

Daar append ik de 'sleep' div niet aan body, maar aan de form. Door dan absoluut gebruiken komt ie dan iets dichter bij Ik weet niet waar anders aan te appenden? Als ik ergens anders dmv javascript de elementen in kan voeren, kan ik ook gelijk een vervanger voor de oude messageBox invoegen, omdat de boel anders collapsed als messageBox op fixed gezet wordt.

De messageBox op relatief doet ie het aan het begin wel goed: op dezelfde positie blijven (maar niet als je al een beetje hebt gescrollt)

Hm, ingewikkeld verhaal voor een simpele vraag: hoe kan ik de textarea op fixed zetten, maar op dezelfde plaats laten staan (en met de nieuwe div er 20 pixels boven)?

bvd!

[Tux]

Erg leuk
Is het misschien ook mogelijk om een knopje te maken om het floatende invoervak weer terug te plaatsen op de normale plaats?

[ Voor 11% gewijzigd door Tux op 14-06-2006 17:25 ]

[crisp]

zoiets?

mmmz, dat werkt wel met de gewone reply-box maar blijkbaar niet echt lekker met de quick-reply.
Het idee is dat je de offset tov de pagina bepaald; in de GoT JS staan daarvoor 2 handige functies tw getOffsetTop en getOffsetLeft.

[ Voor 27% gewijzigd door crisp op 14-06-2006 17:44 ]

[MTWZZ]

Hint: doe die mouse move op je window en niet op het floatende object, zo voorkom je dat je als je snel muist zoals ik ineens buiten het blok zit en die vrolijk blijft staan.

[benoni]

Een relevant linkje voor wie meer met deze technieken wil expirimenteren:
de Walter Zorn's Javascript drag- en resize API.

offtopic:
Onze stagiair heeft dit in een module verwerkt voor het Xaraya CMS, als soort van bouw-uw-eigen-pagina-pagina voor onze klanten (met positioneerbare div's die als placeholder fungeren voor afbeeldingen en teksten uit de database). Het is nog niet helemaal af maar 't wordt heel leuk.

[Verwijderd]

Bedankt voor de reacties. Ik ben weer verder gegaan met dit script, en het werkt nu voor alle textarea's binnen een form op een pagina. Hier staat ie weer:
http://www.wdavids.nl/test/t.html

De mousemove staat op het document, en er is nu een knop om het veld naar zijn oorspronkelijke plaats terug te brengen. Dit kan ook door het script opnieuw te starten (bookmarklet weer aanklikken).

Ik heb nog gekeken naar getOffsetTop en Left, dat werkte op zich wel maar hm, het script werd zo groot, en er moest dan ook weer rekening gehouden worden met hoe ver er al gescrollt is, en als het veld buiten het zichtbare deel van de pagina staat moet het toch ergens anders geplaats worden. Misschien maak ik het later nog zo dat het veld pas 'fixed' wordt op het moment dat er gesleept gaat worden.

Dit is nu de code:

JavaScript:

javascript:

styles='
.sleep
{
top: 10px;
left: 10px;
width: 250px;
height: 20px;
background-color: #9f998c;
opacity: .7;
cursor: move;
position: fixed;
border-style: solid;
border-width: 1px;
border-bottom: 0px;
text-align: left;
}

.resetknopje
{
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
background-color: #000000;
cursor: pointer;
text-align: center;
color: #FFFFFF;
border: outset;
border-width: 1px;
font-size: 10px;
}
';

var slepen = false;
var sleepObject;
var sleepFormNr, sleepTxtAreaNr;
var eX, eY;
var curX, curY;
var positie = 10;
var positieIncrease = 60;
if (!areaAmount) oldStyle = new Array();
var areaAmount = 0;

css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'data:text/css,' + escape(styles);
document.documentElement.childNodes[0].appendChild(css);

for (var i = 0; i < window.document.forms.length; i++)
{
    var form = window.document.forms[i];

    for (var k = 0; k < form.elements.length; k++) 
    {
        if (form.elements[k].type == 'textarea')
        {
            if(document.getElementById(i+k))
            {
                resetStyle(areaAmount, i, k);
            }
            else 
            {
                zweef(i, k);
                positie += positieIncrease;
            }
            areaAmount++;
        }
    }
}

function zweef(formNr, txtAreaNr)
{
    textArea = window.document.forms[formNr].elements[txtAreaNr];
    saveOld(textArea);
    textArea.style.position = 'fixed';
    textArea.style.top = positie + 20 + 'px';
    textArea.style.left = positie + 'px';
    textArea.style.opacity = 0.9;
    textArea.style.zIndex = areaAmount + 100;
    
    dragboxie = document.createElement('div');
    dragboxie.id = formNr + txtAreaNr;
    dragboxie.style.zIndex = areaAmount + 100;
    dragboxie.setAttribute('class', 'sleep');
    dragboxie.setAttribute('onmousedown', 'beginSleep(event,this,' + formNr + ',' + txtAreaNr + ')');
    document.body.appendChild(dragboxie);
    dragboxie.style.left = positie + 'px';
    dragboxie.style.top = positie + 'px';
    dragboxie.style.width = textArea.clientWidth + 'px';
    dragboxie.appendChild(document.createTextNode(textArea.name + ' ' + textArea.id));

    resetknop = document.createElement('div');
    resetknop.id = 'resetknopje' + formNr + txtAreaNr;
    resetknop.setAttribute('class', 'resetknopje');
    resetknop.setAttribute('onmouseup', 'resetStyle(' + areaAmount + ',' + formNr + ',' + txtAreaNr + ')');
    dragboxie.appendChild(resetknop);
    resetknop.appendChild(document.createTextNode('X'));
}

function saveOld(formObj)
{
    oldStyle[areaAmount] = new Array();
    oldStyle[areaAmount][0] = formObj.style.position ? formObj.style.position : 'relative';
    oldStyle[areaAmount][1] = formObj.style.top ? formObj.style.top : '0px';
    oldStyle[areaAmount][2] = formObj.style.left ? formObj.style.left : '0px';
    oldStyle[areaAmount][3] = formObj.style.opacity ? formObj.style.opacity : '1';
    oldStyle[areaAmount][4] = formObj.style.zIndex ? formObj.style.zIndex : '0';
}

function resetStyle(OrderNr, Nform, Ntxtarea)
{
    textArea = window.document.forms[Nform].elements[Ntxtarea];
    textArea.style.position = oldStyle[OrderNr][0];
    textArea.style.top = oldStyle[OrderNr][1];
    textArea.style.left = oldStyle[OrderNr][2];
    textArea.style.opacity = oldStyle[OrderNr][3];
    textArea.style.zIndex = oldStyle[OrderNr][4];
    document.body.removeChild(document.getElementById(Nform + Ntxtarea));
    slepen = false;
}

function beginSleep(event, dragdiv, formNr, txtAreaNr)
{
    slepen = true;
    sleepObject = dragdiv;
    sleepFormNr = formNr;
    sleepTxtAreaNr = txtAreaNr;
    curX = event.clientX;
    curY = event.clientY;
    eX = curX - parseInt(sleepObject.style.left);
    eY = curY - parseInt(sleepObject.style.top);
    event.preventDefault();
}

function sleep(event)
{
    var newPosX;
    var newPosY;
    if(slepen == true)
    {
        curX = event.clientX;
        curY = event.clientY;

        sleepObject.style.left = curX - eX + 'px';
        sleepObject.style.top = curY - eY + 'px';
        
        window.document.forms[sleepFormNr].elements[sleepTxtAreaNr].style.top = curY - eY + 20 + 'px';
        window.document.forms[sleepFormNr].elements[sleepTxtAreaNr].style.left = curX - eX + 'px';
        event.preventDefault();
    }
}
document.onmouseup=new Function('slepen = false;');
document.onmousemove=sleep;

void 0

In opera 8 werkt de opacity niet, en de sluit knop wordt ook niet goed weergegeven. In opera 9 werkt de opacity en de sluit knop wel, maar het bugt nogal tijdens het slepen. Soms.

Maar goed, als er iemand commentaar heeft op de code, graag! Ik ben nog niet zo lang bezig met javascript.

[Swaptor]

Ik ben nu al fan, scheelt weer een boel scroll-werk.

*bookmarked*