Gennemsigtig boks der fortæller afstand fra venstre top hjørne

En lille tilføjelse:

Den skal i øvrigt på samme måde returnere højden i en text box også. (som jo selvfølgelig vil blive skjult som type="hidden" :)

Håber på lidt hjælp her.

Ps. Det er i øvrigt også vigtigt at den ikke ødelægger den anden function. Så hvis de gældende funktioner kunne kaldes noget andet, ville det bare være super. Ellers lægger jeg det selvfølgelig bare i to filer, og inkluderer efter behov ;) - De skal aldrig bruges samtidig, men ville være rart at kunne have det samlet.

Hvordan skal du have afstanden ?-)

-- som to værdier, der fortæller hhv. vertikal og horisontal afstand eller som een værdi, der fortæller en afstand i pixels ?o]

Det skal være i pixels.

Altså hvis den box er 30 pixels nede og 50 pixels oppe, skal der i input-x være 30, og input-y 50.

:) - Tror det var den nemmeste måde at forklare det på.

Så læste jeg lige hvad du skrev. Tror jeg fik forklaret det herover, men for god ordens skyld:
"som to værdier, der fortæller hhv. vertikal og horisontal afstand " - Det var den rigtige.

I så fald er det bare at fordoble alle nogetX-ting med også en nogetY-ting, og aflæse top i stedet for left på de værdier ...

Prøv selv !-)

Ok, jeg vil forsøge så :D

Det vil ikke virke.. Hvad har jeg overset?

/*  Handy wrapper funktioner  */
var d=document;
function gE(id){return d.getElementById(id)};
function pI(s){return parseInt(s)};
function gXe(e){e=e||window.event;if(!e.srcElement)e.srcElement=e.target;
if(typeof e.clientX=="undefined"){e.clientX=e.pageX;e.clientY=e.pageY}
if(!e.preventDefault)e.preventDefault=function(){this.returnValue=false};
return e};
/********************************/

/*  Constructor for slider objektet  */
function SliderObject(sliderID, fieldXID, fieldYID) {
// Opret reference til objektet selv.
// - nødvendig ved callback fra event-handlers
    var me = this;
    this.oSlid = gE(sliderID); // Slider elementet
    this.oXField = gE(fieldXID); // X Feltet, der skal opdateres
    this.oYField = gE(fieldYID); // Y Feltet, der skal opdateres
    this.minXValue = 0; // Default X minimums værdi
    this.maxXValue = 650; // Default X  maximums værdi
    this.minYValue = 0; // Default Y minimums værdi
    this.maxYValue = 180 // Default Y maximums værdi
// Den samlede bredde af sliderens venstre- og højre-border
    this.borderXOffset = pI(this.oSlid.style.borderLeftWidth) + pI(this.oSlid.style.borderLeftWidth);
    this.borderYOffset = pI(this.oSlid.style.borderTopWidth) + pI(this.oSlid.style.borderTopWidth);
    this.oDownX = null; // Indeholder senere X-værdien for brugerens klik
    this.oDownY = null; // Indeholder senere Y-værdien for brugerens klik
// Sæt event-handler på slideren
    this.oSlid.onmousedown = function(e){me.mDown(e)};
    return this; // returner objektet
}
var _p = SliderObject.prototype;
_p.mDown = function(e) {
    var me = this; // Reference til objektet selv
    e = gXe(e); // Skab et X-browser event-objekt
// Gem documentets event-handlers til senere brug
    this.docEventCache = {"move":d.onmousemove, "up":d.onmouseup};
// Sæt event-handelers på dokumentet
    d.onmouseup = function(e){me.mUp(e)};
    d.onmousemove = function(e){me.mMove(e)};
// Gem venstre-værdien for brugerens klik - minus sliderens venstre-offset
    this.oDownX = e.clientX - pI(this.oSlid.style.left);
    this.oDownY = e.clientY - pI(this.oSlid.style.top);
}
_p.mMove = function(e) {
// Sæt max-værdien for sliderens left
    var x, maxXL = this.maxXValue-(this.oSlid.offsetXWidth-this.borderXOffset);
    var y, maxYL = this.maxYValue-(this.oSlid.offsetYWidth-this.borderYOffset);
    e = gXe(e); // Skab et X-browser event-objekt
    x = e.clientX - this.oDownX; // Udregn den nye venstre-værdi
    x = e.clientY - this.oDownY; // Udregn den nye venstre-værdi
// Juster, hvis værdien er under min eller over max
// - sæt den nye værdi på slideren
    this.oSlid.style.left = ((x<this.minXValue)? this.minXValue : (x>maxXL)? maxXL : x) + "px";
    this.oSlid.style.top = ((y<this.minYValue)? this.minYValue : (y>maxYL)? maxYL : y) + "px";
}
_p.mUp = function() {
// Opdater elementet i formen
    this.oXField.value = pI(this.oSlid.style.left);
    this.oYField.value = pI(this.oSlid.style.top);
// Retabler dokumentets event-handlers
    d.onmouseup = this.docEventCache.up;
    d.onmousemove = this.docEventCache.move;
}

var oSlider = null;
window.onload = function(){
    oSlider = new SliderObject("alph_box", "sliderX", "sliderY");
    oSlider.maxXValue = 650;
    oSlider.maxYValue = 180;
}

Jeg har tilføjet endnu et input felt, med id sliderY :)

Mit venstre input er i øvrigt med det samme:
input id="sliderX": 0
input id="sliderY": NaN

hvor de begge før var standard valuen...

Glem min sidste besked: "Mit venstre input er i øvrigt med det samme:
input id="sliderX": 0
input id="sliderY": NaN

hvor de begge før var standard valuen..."

Det passer ikke...

Det er til gengæld hvad den skriver når man trykker/hiver i slideren... Altså "0" i X-feltet, og "NaN" i y-feltet.

PYyhaa... er ved at forstå lidt henaf hvad der sker!

Seneste opdatering:

/*  Handy wrapper funktioner  */
var d=document;
function gE(id){return d.getElementById(id)};
function pI(s){return parseInt(s)};
function gXe(xe){xe=xe||window.event;if(!xe.srcElement)xe.srcElement=xe.target;
if(typeof xe.clientX=="undefined"){xe.clientX=xe.pageX;xe.clientY=xe.pageY}
if(!xe.preventDefault)xe.preventDefault=function(){this.returnValue=false};
return xe};
function gYe(ye){ye=ye||window.event;if(!ye.srcElement)ye.srcElement=ye.target;
if(typeof ye.clientY=="undefined"){ye.clientX=ye.pageX;ye.clientY=ye.pageY}
if(!ye.preventDefault)ye.preventDefault=function(){this.returnValue=false};
return ye};
/********************************/

/*  Constructor for slider objektet  */
function SliderObject(sliderID, fieldXID, fieldYID) {
// Opret reference til objektet selv.
// - nødvendig ved callback fra event-handlers
    var me = this;
    this.oSlid = gE(sliderID); // Slider elementet
    this.oXField = gE(fieldXID); // X Feltet, der skal opdateres
    this.oYField = gE(fieldYID); // Y Feltet, der skal opdateres
    this.minXValue = 0; // Default X minimums værdi
    this.maxXValue = 650; // Default X  maximums værdi
    this.minYValue = 0; // Default Y minimums værdi
    this.maxYValue = 180 // Default Y maximums værdi
// Den samlede bredde af sliderens venstre- og højre-border
    this.borderXOffset = pI(this.oSlid.style.borderLeftWidth) + pI(this.oSlid.style.borderLeftWidth);
    this.borderYOffset = pI(this.oSlid.style.borderTopWidth) + pI(this.oSlid.style.borderTopWidth);
    this.oDownX = null; // Indeholder senere X-værdien for brugerens klik
    this.oDownY = null; // Indeholder senere Y-værdien for brugerens klik
// Sæt event-handler på slideren
    this.oSlid.onmousedown = function(e){me.mDown(e)};
    return this; // returner objektet
}
var _p = SliderObject.prototype;
_p.mDown = function(e) {
    var me = this; // Reference til objektet selv
    xe = gXe(e); // Skab et X-browser event-objekt
    ye = gYe(e); // Skab et X-browser event-objekt
// Gem documentets event-handlers til senere brug
    this.docEventCache = {"move":d.onmousemove, "up":d.onmouseup};
// Sæt event-handelers på dokumentet
    d.onmouseup = function(e){me.mUp(e)};
    d.onmousemove = function(e){me.mMove(e)};
// Gem venstre-værdien for brugerens klik - minus sliderens venstre-offset
    this.oDownX = xe.clientX - pI(this.oSlid.style.left);
    this.oDownY = ye.clientY - pI(this.oSlid.style.top);
}
_p.mMove = function(e) {
// Sæt max-værdien for sliderens left
    var x, maxXL = this.maxXValue-(this.oSlid.offsetWidth-this.borderXOffset);
    var y, maxYL = this.maxYValue-(this.oSlid.offsetTop-this.borderYOffset);
    xe = gXe(e); // Skab et X-browser event-objekt
    ye = gYe(e); // Skab et X-browser event-objekt
    x = xe.clientX - this.oDownX; // Udregn den nye venstre-værdi
    y = ye.clientY - this.oDownY; // Udregn den nye venstre-værdi
// Juster, hvis værdien er under min eller over max
// - sæt den nye værdi på slideren
    this.oSlid.style.left = ((x<this.minXValue)? this.minXValue : (x>maxXL)? maxXL : x) + "px";
    this.oSlid.style.top = ((y<this.minYValue)? this.minYValue : (y>maxYL)? maxYL : y) + "px";
}
_p.mUp = function() {
// Opdater elementet i formen
    this.oXField.value = pI(this.oSlid.style.left);
    this.oYField.value = pI(this.oSlid.style.top);
// Retabler dokumentets event-handlers
    d.onmouseup = this.docEventCache.up;
    d.onmousemove = this.docEventCache.move;
}

var oSlider = null;
window.onload = function(){
    oSlider = new SliderObject("alph_box", "sliderX", "sliderY");
    oSlider.maxXValue = 650;
    oSlider.maxYValue = 180;
}

Nu vil den gerne slide fra horisontalt (altså højre til venstre) og overholder grænserne. Hvad skal jeg tilføje før den vil bevæge sig op og ned også ? :S

Internet Explorer siger fejlen ligger på linje 61:
this.oSlid.style.top = ((y<this.minYValue)? this.minYValue : (y>maxYL)? maxYL : y) + "px";

Men kan ikke se hvad fejlen er :(

Ved at ændre lidt frem og tilbage i den, viser det sig at det er "y" som fejler, og at det er:

    this.oDownY = ye.clientY - pI(this.oSlid.style.top);

this.oSlid.style.top, som er problemet. Fjerner jeg denne, kører den som sådan egentlig ok, altså den virker, men man kan liiige trække den lidt for langt hele tiden (hvilket den - this.oSlid.style.top vel sørger for.

Hvad gør jeg galt der, og hvordan får jeg det rettet til?

Hrm, jeg har ikke haft tid de senere dage, og har ikke nok nu, så jeg vil vende tilbage !-)

Glæder mig til det :)

Så virker det!

hmm... Det gjorde det så ikke alligevel. :S :( - Det var stadig "skævt" som beskrevet i tidligere post.

Oprette ny med point. Der skal det fortsætte (beklager! Jeg var lidt for hurtigt)