Position absolute

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)