posizionare un' elemento in una posizione definita

darkstaring

Nuovo Utente
10 Dic 2012
24
0
0
Sassari
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 ;-)
 
Ultima modifica di un moderatore:

darkstaring

Nuovo Utente
10 Dic 2012
24
0
0
Sassari
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
credo che devi impostare la position con i css
Codice:
div#draggable {
     position:absolute;
}
poi con jquery gli assegni top e left
 

darkstaring

Nuovo Utente
10 Dic 2012
24
0
0
Sassari
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

Nuovo Utente
10 Dic 2012
24
0
0
Sassari
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Posizionare una tabella con scroll su un elemento specifico PHP 3
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
P Cerco Seo per posizionare pagine Offerte e Richieste di Lavoro e/o Collaborazione 2
Creatt [PHP] Posizionare e formattare testo PHP 13
S Posizionare player audio javascript in tabella Javascript 0
V Posizionare Iframe e menù a discesa HTML e CSS 1
Shyson Dove posizionare i codici php? PHP 5
A posizionare dialog uial centro dello schermo jQuery 1
Shyson Posizionare testo vicino all'immagine HTML e CSS 1
P posizionare overlay non al centro jQuery 0
S cerco programmatore esperto javascript, php e in grado di posizionare il sito online.. Offerte e Richieste di Lavoro e/o Collaborazione 0
A Come posizionare centralmente in modalità fissa un logo in una pagina html HTML e CSS 5
zighy Posizionare un div da coordinate database Javascript 8
E Posizionare widget?? HTML e CSS 0
A Posizionare i div HTML e CSS 0
A posizionare la riproduzione di un FLV con action script Flash 0
M posizionare un sito su google SEO e Posizionamento 1
catellostefano Strutture per posizionare server Web Server 0
G Che diverso dominio per posizionare sito inglese? Domini 0
Nik Posizionare un div (contenente una tabella) al centro, problema con mozilla HTML e CSS 0
ale-inka Come posizionare un banner a sinistra? HTML e CSS 5
c.ronaldo Posizionare una finestra in basso a destra delllo schermo Programmazione 2
U Come posso posizionare questo codice ? HTML e CSS 5
F Problema nel posizionare popup... Javascript 3
N Aiuto CSS, come posizionare un'immagine centralmente HTML e CSS 4
E posizionare correttamente una stringa HTML e CSS 0
D Spazio vuoto in un elemento di un array php PHP 2
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
S [PHP] individuare chiave elemento array PHP 7
Cosina [PHP] Impostare colore singolo elemento in fwrite PHP 2
S aggiornare valore di un elemento xml con php PHP 8
S [PHP] recuperare determinato elemento con lo scraping PHP 1
M [WordPress] [HTML] SVG tag: aumentare dimensioni elemento 'path' WordPress 0
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
C Cancellare un elemento del DOM jQuery 4
C [PHP] eliminare elemento da un array multidimensionale PHP 9
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
asevenx modificare lista elementi togliendo l'elemento selezionato jQuery 1
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
F inserimento ordinato di un elemento in un array ordinato C/C++ 1
S [RSS] Gli RSS si aggiornano in base al tempo o ad un nuovo elemento? XML 2
A [Javascript] addClass da un elemento in poi Javascript 5
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
F visibilità nuovo elemento html creato con jquery jQuery 2
A [Javascript] richiamare lo pseudo elemento after Javascript 1
R [Photoshop] Selezionare elemento in immagine ed esportarlo Photoshop 3
C CSS elemento tagliato fuori da div HTML e CSS 9
A creare un nuovo elemento ul in un menu jQuery 1
Marco_88 Aggiornare elemento DOM jQuery 9
J Come modificare un elemento all'interno di una tabella. jQuery 5

Discussioni simili