[JS/DHTML]X Y positie uitlezen

[Roeligan]

Ik heb een (variabel aantal) elementen (in DIV) die versleepbaar zijn. Nu wil ik als de div op een andere positie staat de x en y coördinaat uitlezen. Ik heb gezocht en een en ander gevonden maar niets werkt.

Geprobeerd:

<DIV id="tets">Bla</DIV>

in script:
function bla(obj)
document.layers[obj].left
document.layers[obj].posLeft
document.layers[obj].offsetLeft

en ook ipv layers all (document.all[obj].blablabla)

Ik geef in de aanroep WEL het id mee (onclick="bla(tets)")

Maar ik krijg het niet voor elkaar

Wat doe ik fout????
[edit]
DIT IS DUS NIET ZOALS HET SCRIPT STAAT!!! Is wel in de goede syntax

[ Voor 11% gewijzigd door Roeligan op 27-05-2003 14:28 ]

[crisp]

document.layers is NS4, document.all is IE4, dus wordt het tijd om eens een up-to-date tutorial te gaan zoeken. Het magische woord is DOM, en je kan hiermee de positie uitlezen:

code:

var left = document.getElementById(obj).offsetLeft;
var top = document.getElementById(obj).offsetTop;

[Roeligan]

Hier krijg ik de melding object vereist, terwijl deze echt meegegeven wordt

[crisp]

Roeligan schreef op 27 May 2003 @ 14:43:
Hier krijg ik de melding object vereist, terwijl deze echt meegegeven wordt

doet eens:

code:

onclick="bla('tets')"

(let op de quotes, je moet een string meegeven en geen object)

[ Voor 7% gewijzigd door crisp op 27-05-2003 14:46 ]

[Roeligan]

Je bent geweldig (heb ik me hier nou 3 uur mee zoet gehouden )

Trouwens enig idee hoe ik over alle div heen kan loopen? (het aantal is variabel das echt irri)

[ Voor 44% gewijzigd door Roeligan op 27-05-2003 15:00 ]

[crisp]

Roeligan schreef op 27 May 2003 @ 14:54:
Je bent geweldig (heb ik me hier nou 3 uur mee zoet gehouden )

Trouwens enig idee hoe ik over alle div heen kan loopen? (het aantal is variabel das echt irri)

JavaScript:

var alldivs = document.getElementsByTagName('div');

for (var i = 0; i < alldivs.length; i++) {

  var top = alldivs[i].offsetTop;
  // etcetera

}

[Roeligan]

Ik heb nu dus

JavaScript:

function tets(){
    var alldivs = document.getElementsByTagName('DIV');
    for (var i = 0; i < alldivs.length; i++) 
        {
        var y = alldivs[i].offsetTop;
        var x = alldivs[i].offsetLeft;
        alert(x y)
        }
}

En ik krijg een melding ')' wordt verwacht, alles is toch goed afgesloten?

[crisp]

doet eens:

JavaScript:

alert(x+' '+y);

[angl2k]

alert(x + " " + y);

edit: te laat

[ Voor 50% gewijzigd door angl2k op 27-05-2003 16:13 ]

[Roeligan]

Crisp

Thx ik zit zo diep in een project dat ik niet eens meer normaal kan nadenken

De bedoeling van het project is:
Er worden een aantal schermen (dynamisch) gevuld die uitgeprint moeten worden. Echter elk scherm kan met verschillende data/layout worden gevuld (bijv. een factuur, jan wil de datum bovenaan en piet wil de datum naast zn factuurnummer).
Ik ben nu bezig dat de client zelf een aantal templates kan maken met dhtml layers (de DIV's dus) die hij kan slepen naar de gewenste positie op het scherm en dan kan saven. Klikt ie in het factuur scherm op print krijgt ie eerst de vraag "print voor jan of print voor piet"

Joe snep?


Iig thx voor de hulp ik was ff de weg kwijt

[Verwijderd]

crisp schreef op 27 May 2003 @ 15:55:
[...]

JavaScript:

var alldivs = document.getElementsByTagName('div');

for (var i = 0; i < alldivs.length; i++) {

  var top = alldivs[i].offsetTop;
  // etcetera

}

Ik dacht eigenlijk dat:

JavaScript:

var alldivs = document.getElementsByTagName('div');
// geeft niet echt een Array terug, waar je doorheen kan loopen met [index]
// .length werkt wel, natuurlijk
// wat ie wel teruggeeft ben ik ff kwijt :P
// gebruik de .item(index) methode
for (var i = 0; i < alldivs.length; i++) {
  var top = alldivs.item(i).offsetTop;
  // etcetera
}

beetje muggenziften, maar daar ben jij altijd wel voor in, toch?

[crisp]

Verwijderd schreef op 27 mei 2003 @ 22:53:
[...]


Ik dacht eigenlijk dat:

JavaScript:

var alldivs = document.getElementsByTagName('div');
// geeft niet echt een Array terug, waar je doorheen kan loopen met [index]
// .length werkt wel, natuurlijk
// wat ie wel teruggeeft ben ik ff kwijt :P
// gebruik de .item(index) methode
for (var i = 0; i < alldivs.length; i++) {
  var top = alldivs.item(i).offsetTop;
  // etcetera
}

beetje muggenziften, maar daar ben jij altijd wel voor in, toch?

hij geeft een collection terug voor zover ik weet, en het zijn inderdaad geen (named) items als in een array, dus jouw manier is inderdaad beter
(en inderdaad, ik hou wel van geneuzel in de kantlijn )

[Roeligan]

Hij staat op het moment zo:

JavaScript:

function tets(){
    var alldivs = document.getElementsByTagName('DIV');
    for (var i = 0; i < alldivs.length; i++) 
        {
            var y = alldivs[i].offsetTop;
            var x = alldivs[i].offsetLeft;
            alert(alldivs[i].id + '\nX:'+x + '\nY:'+y)
        }
}

En dat werkt goed. (Nu moet ik ze alleen nog in een <cfset> zien te krijgen zodat ik ze kan inserten in de DB.)

Het werkt iig geil zo

[Roeligan]

Hoe zou ik de waardes mee kunnen geven naar een andere variabele die ik uit kan lezen (al dan niet in een volgende pagina)

[crisp]

Roeligan schreef op 28 mei 2003 @ 09:57:
Hoe zou ik de waardes mee kunnen geven naar een andere variabele die ik uit kan lezen (al dan niet in een volgende pagina)

stop ze komma-seperated in een hidden form veld oid

[Roeligan]

hmm

JavaScript:

document.printView.+alldivs[i].id.value = alldivs[i].id + 'X:'+x + 'Y:'+y;

Krijg ik een melding id wordt verwacht.

edit:

dit zijn dus form velden

[ Voor 22% gewijzigd door Roeligan op 28-05-2003 11:20 ]

[crisp]

Roeligan schreef op 28 May 2003 @ 11:20:
hmm

JavaScript:

document.printView.+alldivs[i].id.value = alldivs[i].id + 'X:'+x + 'Y:'+y;

Krijg ik een melding id wordt verwacht.

edit:

dit zijn dus form velden

JavaScript:

document.forms['printView'].elements[alldivs[i].id].value = alldivs[i].id + 'X:'+x + 'Y:'+y;

[Roeligan]

ok mijn grote dank.. damn wat ben ik een js n00b

[Roeligan]

nu probeer ik van buiten het iframe (waar het scrip staat) het form te submitten

met printen gaat het wel:

JavaScript:

self.frames['printView'].focus();self.frames['printView'].print()

maar het form submitten

JavaScript:

self.frames['printView'].forms['printView'].submit

Geeft de melding dat het leeg is of geen object. (naam van het form is printView, naam van het iframe ook)

[crisp]

Roeligan schreef op 28 May 2003 @ 11:41:
nu probeer ik van buiten het iframe (waar het scrip staat) het form te submitten

met printen gaat het wel:

JavaScript:

self.frames['printView'].focus();self.frames['printView'].print()

maar het form submitten

JavaScript:

self.frames['printView'].forms['printView'].submit

Geeft de melding dat het leeg is of geen object. (naam van het form is printView, naam van het iframe ook)

1) submit is een method, dus moet er ook () achter
2) check of je toevallig geen name="submit" hebt gebruikt in je form

[Verwijderd]

Heb een x een klein scriptje geschreven om layers te maken in IE en NS4 en NS6 :

<script language="JavaScript">

/*
Version 1.1
Last modified 28-08-2002
*/

function initA1Layer(name,x,y,visible)
{
this.objRef=new Object;
this.useDisplay=false;
this.name=name;

this.visible=visible;

this.browser="IE";

if (document.getElementById)
{
this.objRef.obj = document.getElementById(name);
this.objRef.style = document.getElementById(name).style;
this.browser="IE";
}else if (document.all)
{
this.objRef.obj = document.all[name];
this.objRef.style = document.all[name].style;
this.browser="NS6";
}
else if (document.layers)
{
this.objRef.obj = document.layers[name];
this.objRef.style = document.layers[name];
this.browser="NS4";
}

// Define the functions
this.getX = getX;
this.setX = setX;
this.getY = getY;
this.setY = setY;
this.show=show;
this.hide=hide;
this.getName=getName;
this.getHeight=getHeight;
this.setHeight=setHeight;
this.setInnerHtml=setInnerHtml;


if(x!=null) this.setX(x);
if(y!=null) this.setY(y);

if(visible==0){
this.show();
} else {
this.hide();
}


// Implement the functions

function getName(){
return this.name;
}

function show(){
if(this.browser=="NS4"){
this.objRef.obj.visibility="show";
} else {
if(this.useDisplay==true){
this.objRef.style.display='';
} else {
this.objRef.style.visibility="visible";
}
}
this.visible=0;
}


function hide(){
if(this.browser=="NS4"){
this.objRef.obj.visibility="hidden";
} else {
if(this.useDisplay==true){
this.objRef.style.display='none';
} else {
this.objRef.style.visibility="hidden";
}
}
this.visible=1;
}

function getX(){
var xOut=0;

if(document.layers==true){
xOut=this.objRef.style.left;
} else {
xOut=parseInt(this.objRef.style.left);
}
return xOut;
}

function setX(newX)
{
this.objRef.style.left=newX;
}

function getY(){
var yOut=0;

if(document.layers==true){
yOut=this.objRef.style.top;
} else {
yOut=parseInt(this.objRef.style.top);
}
return yOut;
}


function setY(newY){
if(this.browser=="NS4"){
this.objRef.style.top=newY;
} else {
this.objRef.style.top=newY;
}
}

function getHeight(){
var hOut=0;
if(this.browser=="NS4"){
hOut=this.objRef.obj.document.height;
} else {
hOut=parseInt(this.objRef.obj.offsetHeight);
}
return hOut;
}

function setHeight(h){
if(this.browser=="NS4"){
this.objRef.obj.document.height=h;
} else {
this.objRef.obj.offsetHeight=h;
}
}

function setInnerHtml(newText){
if(this.browser=="NS4"){
this.objRef.obj.document.write(newText);
this.objRef.obj.document.close();
} else {
this.objRef.obj.innerHTML=newText;
}
}
}

</script>

<script>
var layersArray=new Array();
layersArray[0]=new initA1Layer("layer1","220","67",0);
<script>

Je maakt dan gewoon een div

<div name='layer1'>blaaat</div>


en kan je

<script>
layersArray[0].setY(10);
</script>

[Roeligan]

sorry, die () staat erachter, te vroeg geknipt/geplakt

en name=submit wordt niet gebruikt.

@ThaLyrick:
Ik had de lagen (dmv DIV) al. Iig thanx voor zover ik kan zien is het een mooi script.

[ Voor 36% gewijzigd door Roeligan op 28-05-2003 11:49 ]

[crisp]

mmmz, ik moet beter kijken volgende keer:

JavaScript:

self.frames['printView'].document.forms['printView'].submit();

dat moet het zijn dus

[Verwijderd]

@Roeligan : het loste mijn probleem om tussen verschillende browsers toch een <div> te grbuiken ;-) ...

[Roeligan]

Werkt!!!!
HULDE AAN CRISP

* Roeligan gaat gelijk JS/DOM boekjes bestellen

@ThaLyric
Onze app wordt alleen gebruikt in IE 5.5+ (is wel makkelijk... eisen kunnen stellen aan je gebruikers )

[ Voor 34% gewijzigd door Roeligan op 28-05-2003 11:59 ]

[Verwijderd]

@Roeli : hehe .. is heel makkelijk ;-) ...