posizionare un' elemento in una posizione definita

darkstaring · 14 Dic 2012

Giorno

...

Sto tentando di posizionare un' elemento in una posizione definita...
Ho la posizione (top e left) dove vorrei si posizionasse l' oggetto, ma inserendo queste coordinate con

HTML:

$( "#draggable" ).css("top", VALORE);

le coordinate partono dal div che contiene l'oggetto "draggable" mentre vorrei che le coordinate si riferissero alla pagina....

Sto tentando di mettere l' elemento sopra una tabella...
scrivendo il div con id="draggable" direttamente dentro la cella dove dovrebbe posizionarsi è sbagliato perchè l'elemento dovrebbe coprire più elementi e la dimensione delle celle della tabella deve essere sempre la stessa...

Sapete aiutarmi???

Spero di essere stato chiaro

Graziasss ;-)

darkstaring · 14 Dic 2012

Ho quasi risolto chiudendo la tabella e l'elemento in un contenitore

HTML:

<div id="content">
      <div id="draggable"> <p>Appuntamento</p> </div>
      <script type="text/javascript">
      scrivitabella();
      </script>
</div>

criric · 14 Dic 2012

Ciao,
credo che devi impostare la position con i css

Codice:

div#draggable {
     position:absolute;
}

poi con jquery gli assegni top e left

darkstaring · 15 Dic 2012

criric ha scritto:
Ciao,
credo che devi impostare la position con i css

Codice:

div#draggable { position:absolute; }

poi con jquery gli assegni top e left

Grazie per la dritta!

darkstaring · 18 Dic 2012

Umm.. con absolute non funge...
in pratica ho questi div:

HTML:

<div id="content">
 <div id="appuntamenti"></div>
 <div id="tabella">  </div>
  
</div>

Dentro il div tabella con un innerHTML scrivo la tabella; dopo aver scritto la tabella ricavo delle posizioni delle celle (quelle che mi servono) con offsetTop & offsetLeft
Dopodiché sempre con un innerHTML vado a scrivere nel div appuntamenti altri div, uno per ogni cella che mi serve e poi aggiungo del codice jquery per mettere un' elemento nelle posizioni
che ho ricavato prima...

Posizionando l'elemento con:

"$( "#drag"+i ).css("position", "relative"); " il div che contiene l' "oggetto" prende spazio e di conseguenza incasina le coordinate...

con absolute il div non occupa spazio (meglio) ma le coordinate all'oggetto partono dall'angolo dello schermo, mentre io riesco a ricavarle partendo dalla tabella(così sembrerebbe)...
con fixed ho lo stesso risultato di quello con absolute....

In pratica vorrei scrivere una tabella e posizionare degli oggetti sopra con jquery

...Sapreste consigliarmi come muovermi????

Grazie Francesco

darkstaring · 18 Dic 2012

Se volete dare un'occhiata al codice.. questo è l'output della pagina in php:

HTML:

<h2><center>[18 - 12 - 2012]</center></h2>

<script language="javascript" type="text/javascript">
v_appuntamenti = new Array();
v_appuntamenti[0]= new Array('1020528', '1', '1', '155270', '2', '75', '09:00:00'); 
v_appuntamenti[1]= new Array('1020529', '1', '3', '155403', '2', '75', '09:00:00'); 
</script>


<script language="javascript" type="text/javascript">
vett_sedi = new Array ();
vett_sedi[0]= new Array ( "1", "Sassari", "09:00:00", "20:00:00");
</script>

<script language="javascript" type="text/javascript">
vett_dip = new Array ();
vett_dip[0] = new Array ();
vett_dip[0][0] = new Array( "1", "Sandra"); 
vett_dip[0][1] = new Array( "2", "Rita"); 
vett_dip[0][2] = new Array( "3", "Paola"); 
vett_dip[0][3] = new Array( "5", "Ester"); 
vett_dip[0][4] = new Array( "6", "Antonella"); 
vett_dip[0][5] = new Array( "8", "Floriana"); 
vett_dip[0][6] = new Array( "9", "Claudia"); 
vett_dip[0][7] = new Array( "10", "Daniela B"); 
vett_dip[0][8] = new Array( "11", "Denise"); 
vett_dip[0][9] = new Array( "12", "Bengi"); 
vett_dip[0][10] = new Array( "13", "Francesca"); 
vett_dip[0][11] = new Array( "14", "Grazia"); 
vett_dip[0][12] = new Array( "15", "francesco"); 
</script>
<body>


<script language="javascript">
var altezza_cella = 20;
var larghezza_cella = 80;
var celle_per_ora=4;
var incremento = (60 / celle_per_ora);

function scrivi_select_sede()
{
document.write("<form name='form1'>");
document.write("<SELECT name='sede_selezionata' onChange='scrivi_tabella();'>");
document.write("<option>Seleziona Sede</option>");
for(var i=0;i < vett_sedi.length;i++)
{
document.write("<option value=" + i + ">" + vett_sedi[i][1] + "</option>");
}
document.write("</SELECT>");
document.write("</form>");
}

function scrivi_tabella()
{

var i = document.form1.sede_selezionata.value;

var idsede=(vett_sedi[i][0]);
var nomesede=(vett_sedi[i][1]);
var apertura=(vett_sedi[i][2]);
var chiusura=(vett_sedi[i][3]);

var orario=apertura;

var tabella = ("<table border='1'>");
tabella += ("<tr><th colspan=" + (vett_dip[i].length +1 ) + "> "+ nomesede + idsede + "</th></tr>");
tabella += "<tr><th>Ore</th>";
for(var dip=0 ; dip < vett_dip[i].length; dip++)
{
tabella += "<th>"+ vett_dip[i][dip][1] + vett_dip[i][dip][0] + "</th>";
}
tabella += "</tr>";
while(orario < chiusura)
{
tabella += ("<tr><td rowspan='"+celle_per_ora+"' width='50px'>" + orario + "</td>");

for(var righe=0; righe < celle_per_ora; righe++)
{
for(var dip=0 ; dip < vett_dip[i].length; dip++)
{
tabella += ("<td width='"+larghezza_cella+"' height='" + altezza_cella + "px' id='"+orario + "-" + vett_dip[i][dip][0] + "' onclick=(alert(this.id))></td>");
}
tabella += ("</tr>");
if(righe+1 != celle_per_ora) tabella += ("<tr>");
orario=add_a_orario(orario, incremento);
} 
}
tabella +=("</table>");

document.getElementById('tabella').innerHTML = (tabella) ;
scrivi_appuntamenti(idsede);
}

function scrivi_appuntamenti(idsede)
{
document.getElementById("appuntamenti").innerHTML = "";
for(var i = 0; i < v_appuntamenti.length; i++)
{
if(v_appuntamenti[i][1] == idsede)
{
var id_appu = v_appuntamenti[i][0];
var id_dip = v_appuntamenti[i][2];
var id_cliente = v_appuntamenti[i][3];
var id_stato = v_appuntamenti[i][4];
var durata = v_appuntamenti[i][5];
var ora= v_appuntamenti[i][6];

var cella = (ora + "-" + id_dip);

//dimensioni
var _larghezza = larghezza_cella;
var _altezza = (Math.floor( (durata/incremento) * altezza_cella) );
//posizione
var _top=document.getElementById(cella).offsetTop ;//+ _altezza;
var _left= document.getElementById(cella).offsetLeft;

//document.getElementById("test").innerHTML = ("<br>TOP=" + _top + " LEFT= " +_left + "<br>");

document.getElementById(cella).innerHTML += ("Appuntamento" + id_appu);
document.getElementById("appuntamenti").innerHTML += ("<div id='drag"+i+"'><p>"+cella+"</p></div>");

$(function () { 
$( "#drag"+i ).draggable();
$( "#drag"+i ).draggable({ revert: true });
$( "#drag"+i ).css("background-color", "yellow");
$( "#drag"+i ).css("position", "absolute");

//POSIZIONO
$( "#drag"+i ).css("top", _top);
$( "#drag"+i ).css("left", _left);
//DIMENSIONO
$( "#drag"+i ).css("height", _altezza);
$( "#drag"+i ).css( "width", _larghezza);
});

//	var elemento = ("#drag"+i);

//var temp += ("<div id='" + elemento + "'></div>");

//temp = ("<style>" + elemento + " { width: 150px; height: " + _altezza + "; background-color:yellow;} </style>");
//temp += ("");
//temp += ("<div id='" + elemento + "'>OGGETTO</div>");
//temp += ("");
//document.getElementById('appuntamenti').innerHTML += ("<div id='" + elemento + "'>" + id_cliente + "</div>");
//document.getElementById('appuntamenti').innerHTML += ("<style>" + elemento + " { width: 150px; height: " + _altezza + "; background-color:yellow;} </style>");


//document.getElementById('appuntamenti').innerHTML += (temp);


}
}
}

function add_a_orario(orario, incremento) //orario=add_a_orario("08:00",22); document.write(orario);
{
vett_ora=orario.split(":");

var ore=parseInt(vett_ora[0]);
var minuti=parseInt(vett_ora[1]);
minuti += incremento;
while(minuti > 59)
{
ore++;
minuti -= 60;
}

ore=String(ore);
minuti=String(minuti);
if(ore.length < 2) ore=("0" + ore);
if(minuti.length < 2) minuti=("0" + minuti);
orario=(ore+":"+minuti+":00");

return(orario);
}

</script>

<style>
#content { width: 100%; margin:auto;}
#tabella table { margin:auto; }
#tabella th { height: 30px;}
#tabella td:hover { background-color: #245250; }
/* #appuntamenti { position: static; } */
</style>

<div id="test"></div>





<script type="text/javascript">
<!--
scrivi_select_sede();
-->
</script>



<div id="content">
<div id="appuntamenti"></div>
<div id="tabella"> </div>
</div>
<br><br>
</body>
</html>

Cerca

Cerca

posizionare un' elemento in una posizione definita

darkstaring

Nuovo Utente

darkstaring

Nuovo Utente

criric

Super Moderatore

darkstaring

Nuovo Utente

darkstaring

Nuovo Utente

darkstaring

Nuovo Utente

Discussioni simili