Position absolute

Soyez le premier à donner votre avis sur cette source.

Vue 7 772 fois - Téléchargée 293 fois

Description

Script qui sert a connaitre et a determiner la position en relative (left et top) d'un objet dans une page en executant un drag sur l'objet que l'on selectionne en declarant son id il suffit simplement d'inclure dans nimporte quelle fichier html la ligne suivante :
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="gestion_position.js"></SCRIPT>
Dans la source un fichier html est inclu a titre d'exemple.

Source / Exemple :


document.onmousemove=tarto;
onload=orgatab;
var deb=0;
var nom_element='';
var element_nom='';

function rout(){
tour=2;
}
function router(){
tour=1;
}

function disableselect(e){
return false;
}
function enableselecte(e){
return true;
}

function attribelemnt(){

if(document.getElementById('inlem').value.length<1){
alert('entrez un ID');
return false;
}
nom_element=document.getElementById('inlem').value;
if(document.getElementById(nom_element)==null){
alert('ID inexistant');
return false;
}
var poposi
if(navigator.appName.substring(0,3)=="Net"){
poposi=getComputedStyle(document.getElementById(nom_element), null).getPropertyValue('position')
}
else{
poposi=document.getElementById(nom_element).currentStyle.position
}

if(poposi!='absolute'){
alert('l \'element seletionner n\'est pas positionner en absolute');
nom_element=element_nom
return false;
}
if(navigator.appName.substring(0,5)=="Micro"){
if(element_nom!=""){
document.getElementById(element_nom).style.cursor='auto';
document.getElementById(element_nom).detachEvent("onmousedown",sp);
document.getElementById(element_nom).detachEvent("onmouseup",rout);
document.getElementById(element_nom).detachEvent("onmousedown",router);
}
document.getElementById(nom_element).style.cursor='move'
document.getElementById(nom_element).attachEvent ('onmouseup',rout);
document.getElementById(nom_element).attachEvent ('onmousedown', function(){return sp(nom_element);});
document.getElementById(nom_element).attachEvent ('onmousedown',router);
element_nom=nom_element;
}
else{
if(element_nom!=""){
document.getElementById(element_nom).setAttribute("onmouseover","style.cursor='auto'");
document.getElementById(element_nom).removeAttribute("onmouseup","tour=2");
document.getElementById(element_nom).removeAttribute("onmousedown","tour=1;sp(nom_element)");
}
document.getElementById(nom_element).setAttribute("onmouseover","style.cursor='move'");
document.getElementById(nom_element).setAttribute("onmouseup","tour=2");
document.getElementById(nom_element).setAttribute("onmousedown","tour=1;sp(nom_element)");
element_nom=nom_element;
}
}
function orgatab(){
document.body.appendChild(document.createElement('div')).setAttribute("id","div_de_table");
document.getElementById('div_de_table').style.position = 'absolute';
document.getElementById('div_de_table').innerHTML="<table  border=2 bgcolor=#B9B3A7 style='height:100px;width:280px;z-Index:50'><tr><td colspan=4 height=20 bgcolor=blue onmousedown=tour=1;sp('div_de_table') onmouseup=tour=2;><tr align=center> <td colspan=2>valeur top</td> <td colspan=2>valeur left</td></tr><tr align=center><td>px</td><td>%</td><td>px</td><td>%</td></tr><tr align=center><td id='tbtpx'>00 px</td><td id='tbtpo'>00 %</td><td id='tblpx'>00 px</td><td id='tblpo'>00 %</td></tr><tr align=center><td colspan=4>ID de l'element : <input type=texte size=14 id='inlem'><button onclick=attribelemnt()>ok</button></td></tr></table>";
}

function tarto(s){
if(navigator.appName.substring(0,3)=="Net"){
setX = s.clientX+document.body.scrollLeft;
setY = s.clientY+document.body.scrollTop;
}
else{
setX = event.x+document.body.scrollLeft;
setY = event.y+document.body.scrollTop;
return false;
}
}

function sp(cen){

var tpo=document.getElementById('tbtpo');
var lpo=document.getElementById('tblpo');
var tpx=document.getElementById('tbtpx');
var lpx=document.getElementById('tblpx');
var elem=document.getElementById(nom_element);
if(tour==2){
document.onmousedown=enableselecte;
return false;
}
if(tour==1){
px=setX;
py=setY;
fen=cen;
tour=0;
}
idf=document.getElementById(fen);
idf.style.left=(idf.offsetLeft+setX-px)+"px";
idf.style.top=(idf.offsetTop+setY-py)+"px";
document.onmousedown=disableselect;
px=setX;
py=setY;
if(document.getElementById(nom_element)!=null){
tpo.firstChild.nodeValue =Math.floor( elem.offsetTop/(elem.parentNode.clientHeight/100))+" % ";
lpo.firstChild.nodeValue =Math.floor( elem.offsetLeft/(elem.parentNode.clientWidth/100))+" % ";
tpx.firstChild.nodeValue =elem.style.top;
lpx.firstChild.nodeValue =elem.style.left;
}
setTimeout("sp(fen)",1);
}

Conclusion :


Script qui peut eviter de se prendre la tete a positionner des objets dans une page

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1794
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
7 septembre 2021
134
ce n'est pas connaitre la position de l'objet qui complique le script c'est le fait que l'on puisse positionner a la vole avec la sourie par dragage les objets que l'on a selectionner par leurs id car le script sert a connaitre bien sur la position des objet mais il sert surtout a positionner les objects dalleur en relisant ton commantaire j'ai refait des testes pour la position relative et je me suis apercu de deux erreur l'une concerne le script j'ai du rajouter une alerte qui se termine par un false pour preciser que l'id selectionne n'ai pas en absolute la deuxieme erreur est que le titre de la source devrait s'appeler position absolute et pas relative ++
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Ça me paraît être un peu compliqué pour simplement connaitre un positionnement dans la page...

La fonction suivante te retourne les coordonnées d'un objet quelque soit son mode de positionnement (absolute/relative/fixed) :

function getRealOffsets(HTMLElt){var valTop 0, valLeft 0;
var obj = HTMLElt;
do{
valTop += obj.offsetTop || 0;
valLeft += obj.offsetLeft || 0;
obj = obj.offsetParent;
if(obj && obj.tagName.toLowerCase() == 'body') break;
}while(obj);
return {left: valLeft, top: valTop};
}

Si ca peut t'aider...
Messages postés
1794
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
7 septembre 2021
134
c'est pour IE pour ff j'utilise les deux fonctions qui se trouve ver le debut du script
# function disableselect(e){
# return false;
# }
# function enableselecte(e){
# return true;
# }
fontions que je declanche dans la fonction qui gere les deplacement
IE n'y prete pas attention et n'y decele aucunes erreurs
la solution peut paraitre pas tres propre pour moi ce n'est qu'une facon de resoudre un probleme bien evidement si on me propose une solution propre je suis preneur
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

ok, mais pourquoi l'appliquer à une condition et pas à l'autre ?
Messages postés
1794
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
7 septembre 2021
134
c'est fait j'ai normalise le code au niveau des virgules ;

en ce qui concerne la fontion tarto si il s'agit du return false c'est une astuce pour eviter que quand je deplace une fenetre les elements de la page soient selectionne
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.