sito dinamico

pizzet

Bene ho deciso di cambiare il lavoro fatto in qualcosa di più standardizzato ed orientato all'utente finale.
Ho deciso di fare un form dove in base alle scelte dell'utente si filtrano delle select e compaiono campi nuovi da avvalorare.
Proprio a questo proposito (campi a comaprsa) ho un problemino nel senso che di solito funziona nella pagina ma... vi posto prima il codice
[PHP]
/INIZIO CODICE in javascript PER VISUALIZZAZIONE CAMPI NASCOSTI con checkbox/
function MostraCampi(obj, a){
var e=document.getElementById(a);
var ck=(obj.checked)?"block":"none";
e.style.display=ck;
}/**/
/FINE CODICE PER VISUALIZZAZIONE CAMPI NASCOSTI/

<?php if($db_errore_operativo!=NULL or $db_numero_pezzi_errore_operativo!=NULL or $db_kpi_errore_operativo!=NULL or $db_numero_pezzi_kpi_errore_operativo!=NULL or $db_gravita_errore_operativo!=NULL){?>
<div id="errore_operativo">
<tr><td style="width:300px" align="right" bgcolor="#CCCCCC">Errore operativo<input type="checkbox" name="CheckThis_eo" onclick="MostraCampi(this,'tr_errore_operativo_kpi')"/></td><td align="right">N° pezzi<input type="text" name="UserName" onfocus="CheckCheckBox_eo(this.form)" style="width:40px" onkeyup="verify_num(this);"/></td></tr>
<div id="errore_operativo_kpi">
<tr id="tr_errore_operativo_kpi" style="display:none"><td colspan="2" align="right">
<?php
if($prodotto_causa!="0"){
$sql_errore_operativo="
SELECT
DISTINCT(ID_KPI)
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_PRODOTTO='$prodotto_causa'
";
}else if($macroattivita_causa!="0"){
$sql_errore_operativo="
SELECT
DISTINCT(ID_KPI)
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_MACROATTIVITA='$macroattivita_causa'
";
}

$result_mssql_errore_operativo=@mssql_query($sql_errore_operativo,$link);

while($result_errore_operativo=mssql_fetch_array($result_mssql_errore_operativo)){
$id_errore_operativo = $result_errore_operativo ["ID_CAUSA"];//id
$n_causa = $result_errore_operativo ["N_CAUSA"];//nome per esteso
$id_kpi = $result_errore_operativo ["ID_KPI"];//id kpi
$domanda_quantita_kpi = $result_errore_operativo ["DOMANDA QUANTITA KPI"];//domanda quantità kpi
$quantita_kpi = $result_errore_operativo ["QUANTITA KPI"];//quantita kpi
$gravita_causa = $result_errore_operativo ["GRAVITA CAUSA"];//gravità causa errore

?>
<?php if($id_kpi=="0"){?>
KPI Errore operativo<select name="kpi_errore_operativo" style="width:400px">
<option value="" selected>- Seleziona</option>
<option value="1">kpi 1</option>
<option value="2">kpi 2</option>
<option value="3">kpi 3</option>
</select><br/>
<?php } ?>
<?php if($quantita_kpi==NULL){
if($domanda_quantita_kpi==NULL){
?>
N° pezzi KPI<input type="text" name="n_pezzi_kpi_errore_operativo" style="width:40px" onkeyup="verify_num(this);"/>
<?php }else{ ?>
<?php echo $domanda_quantita_kpi;?><input type="text" name="n_pezzi_kpi_errore_operativo" style="width:40px" onkeyup="verify_num(this);"/>
<?php } ?>
<?php } ?>
<?php if($gravita_causa==NULL){?>
Gravità errore<select name="gravita_kpi_errore_operativo" style="width:100px">
<option value="" selected>- Seleziona</option>
<option value="Lieve">Lieve</option>
<option value="Medio">Medio</option>
<option value="Grave">Grave</option>
</select>
<?php } ?>
<?php }//spostare ?>
</td></tr>
</div>
<div id="errore_operativo_specifico">
<?php
if($prodotto_causa!="0" and $macroattivita_causa=="0"){
$sql_errore_operativo_specifico="
SELECT
*
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_PRODOTTO='$prodotto_causa'
ORDER BY
ORD
";
}else if($prodotto_causa=="0" and $macroattivita_causa!="0"){
$sql_errore_operativo_specifico="
SELECT
*
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_MACROATTIVITA='$macroattivita_causa'
ORDER BY
ORD
";
}else if($prodotto_causa=="0" and $macroattivita_causa=="0"){
$sql_errore_operativo_specifico="
SELECT
*
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_PRODOTTO='$prodotto_causa' AND ID_MACROATTIVITA='$macroattivita_causa'
ORDER BY
ORD
";
}else if($prodotto_causa!="0" and $macroattivita_causa!="0"){
$sql_errore_operativo_specifico="
SELECT
*
FROM
AX_VIEW_ERRORE_OPERATIVO
WHERE
ID_PRODOTTO='$prodotto_causa' AND ID_MACROATTIVITA='$macroattivita_causa'
ORDER BY
ORD
";
}

$result_mssql_errore_operativo_specifico=@mssql_query($sql_errore_operativo_specifico,$link);

while($result_errore_operativo_specifico=mssql_fetch_array($result_mssql_errore_operativo_specifico)){
$id_errore_operativo_specifico = $result_errore_operativo_specifico ["ID_CAUSA"];//id
$n_causa = $result_errore_operativo_specifico ["N_CAUSA"];//nome per esteso
$id_kpi = $result_errore_operativo_specifico ["ID_KPI"];//id kpi
$domanda_quantita_kpi = $result_errore_operativo_specifico ["DOMANDA QUANTITA KPI"];//domanda quantità kpi
$quantita_kpi = $result_errore_operativo_specifico ["QUANTITA KPI"];//quantita kpi
$gravita_causa = $result_errore_operativo_specifico ["GRAVITA CAUSA"];//gravità causa errore

$causa_errore_operativo="";

$causa_errore_operativo.="<tr><td style='width:300px' align='right'>$n_causa<input type='checkbox' name='$id_errore_operativo_specifico' onclick='MostraCampi(this,'tr_$id_errore_operativo_specifico')'/></td><td align='right'>N° pezzi<input type='text' name='UserName' style='width:40px' onkeyup='verify_num(this);'/></td></tr>";

if($id_kpi=="0" or $quantita_kpi==NULL or $gravita_causa==NULL){
$causa_errore_operativo.="<tr id='tr_$id_errore_operativo_specifico' style='display:none'>";
if($id_kpi=="0"){
$causa_errore_operativo.="<td colspan='2' align='right'>
KPI $n_causa<select name='kpi_$n_causa' style='width:400px'>
<option value='0' selected>- Seleziona</option>
<option value='1'>kpi 1</option>
<option value='2'>kpi 2</option>
<option value='3'>kpi 3</option>
</select></td>";
}
if($quantita_kpi==NULL or $gravita_causa==NULL){
$causa_errore_operativo.="<tr><td colspan='2' align='right'>";
if($quantita_kpi==NULL){
if($domanda_quantita_kpi==NULL){
$causa_errore_operativo.="N° pezzi KPI<input type='text' name='n_pezzi_kpi_$n_causa' style='width:40px' onkeyup='verify_num(this);'/>";
}else{
$causa_errore_operativo.="$domanda_quantita_kpi<input type='text' name='n_pezzi_kpi_$n_causa' style='width:40px' onkeyup='verify_num(this);'/>";
}
}
if($gravita_causa==NULL){
$causa_errore_operativo.="Gravità errore<select name='gravita_kpi_$n_causa' style='width:100px'>
<option value='0' selected>- Seleziona</option>
<option value='Lieve'>Lieve</option>
<option value='Medio'>Medio</option>
<option value='Grave'>Grave</option>
</select>
";
}
$causa_errore_operativo.="</td></tr>";
}
}
$causa_errore_operativo.="</tr>";
echo $causa_errore_operativo;
}
?>
</div>
</div>
<?php } ?>
<?php if($db_ritardo_operativo!=NULL or $db_numero_pezzi_ritardo_operativo!=NULL or $db_kpi_ritardo_operativo!=NULL or $db_numero_pezzi_kpi_ritardo_operativo!=NULL or $db_gravita_ritardo_operativo!=NULL){?>
<div id="ritardo_operativo">
<tr><td style="width:300px" align="right" rowspan="2" bgcolor="#CCCCCC">Ritardo operativo<input type="checkbox" name="CheckThis_ro" onclick="MostraCampi(this,'tr_ritardo_operativo_kpi')"/></td><td align="right">N° pezzi<input type="text" name="UserName" onfocus="CheckCheckBox_ro(this.form)" style="width:40px" onkeyup="verify_num(this);"/></td></tr>
<tr><td align="right">Giorni di ritardo<input type="text" name="giorni_ritardo" onfocus="CheckCheckBox_ro(this.form)" style="width:40px" onkeyup="verify_num(this);"/></td></tr>
<div id="ritardo_operativo_kpi">
<tr id="tr_ritardo_operativo_kpi" style="display:none"><td colspan="2" align="right">
KPI Ritardo operativo<select name="kpi_ritardo_operativo" style="width:400px">
<option value="" selected>- Seleziona</option>
<option value="1">kpi 1</option>
<option value="2">kpi 2</option>
<option value="3">kpi 3</option>
</select><br/>
N° pezzi KPI<input type="text" name="n_pezzi_kpi_ritardo_operativo" style="width:40px" onkeyup="verify_num(this);"/>
Gravità errore<select name="gravita_kpi_ritardo_operativo" style="width:100px">
<option value="" selected>- Seleziona</option>
<option value="Lieve">Lieve</option>
<option value="Medio">Medio</option>
<option value="Grave">Grave</option>
</select>
</td></tr>
</div>
</div>
<?php } ?>
[/PHP]

Praticamente diciamo che l'utente sceglie un prodotto e dalla sua scelta vengono visualizzati gli errori relativi al prodotto scelto.
Prima di tutto vendono visualizzate le famiglie di errore (qui postato solo la famiglia errore operativo) poi sotto ognuno di questi vi sono inseriti gli errori specifici letti dal database.
Se l'utente seleziona la checkbox della famiglia errore operativo può pooi mettere il numero di errori e se non è definito sul db compare l'indicatore relativo all'errore e altri dati.
Questo funziona ma quando vengono creati dinamicamente gli errori specifici il codice (che è uguale a quello dell'errore principale) non funziona nwel senso che la checkbox non serve perchè la funzione MostraCampi() non fa il suo dovere e la riga della tabella contenente i campi dei form a comparsa non fa funzionare il comando style='display:none'.
Chi mi sa dire perchè il codice fa i capricci.

P.S. ricordo che la parte dinamica degl'errori specifici sono caricati su una variabile nel codice php e poi stampati a video mentre la famiglia dell'errore è codice html
:?:?:?:?:?:?

pizzet

ho risolto così banalmente.
[PHP]$causa_errore_operativo.="<tr><td style='width:300px' align='right'>$n_causa<input type='checkbox' name='$id_errore_operativo_specifico' onclick="MostraCampi(this,'tr_$id_errore_operativo_specifico')"/></td><td align='right'>N° pezzi<input type='text' name='UserName' style='width:40px' onkeyup='verify_num(this);'/></td></tr>";
[/PHP]

è possibile che " possa risolvere la vita?

privacy.impresa

decisamente... senza il " ti interpreta i " come chiusura dell'assegnazione alla variabile del contenuto e riprende al " successivo... quello che c'è in mezzo si aspetta che sia sintatticamente corretto in PHP e non un pezzo di stringa... generando ovviamente un errore... usando \ dici al parser che le " associate non sono di chiusura ma devono essere trattate come parte della stringa di testo...

keiske

pizzet

Ho trovato in giro un bel codice in javascript che mi permettesse di avere un campo data scelta da un calendario.
Il mio problema è che ho più campi di questo genere nello stesso form e che per le date in cima del form il calendario viene mostrato quasi affianco al suo bottone ma invece per le date in fondo al form il calendario viene ancora mostrato in cima e mi tocca scrollare la pagina (molto poco elegante).
[PHP]
/INIZIO CODICE in javascript PER FORM CALENDARIO/
var source;
var tipo;
var campi = new Array();
function cal(val, e, t) {
var dt = new Array();
xPos = (document.layers) ? e.pageX : ((document.all) ? event.x : e.clientX);
yPos = (document.layers) ? e.pageY : ((document.all) ? event.y : e.clientY);
tipo = t;
source = val;
if (t == 0) {
dt[0] = val[0].value;
dt[1] = val[1].value;
dt[2] = val[2].value;
}
else
dt = val.value.split('-');
showCalendar(new Date(dt[2], dt[1] - 1, dt[0]), xPos, yPos);
}
/FINE CODICE PER FORM CALENDARIO/
[/PHP]
[PHP]//esempio di codice di un campo richiamante il calendario
<tr><td class="td_form_sx">Data di rilevazione</td>
<td align="right">
<input type="text" name="datacompleta1" style="width:230px" maxlength="10" value="<?php echo $data_rilevazione;?>">
<input type="button" name="go1" value="V" onMouseDown="cal(datacompleta1, event, 1)"></td>
</tr>
[/PHP]
e quest'ultimo file ax_data.js e quello che richiama e costruisce il calendario
[PHP]
var xwidth = 220;
var xheight = 180;
var browser = document.layers ? 0 : document.all ? 1 : 2;

// colori
var backtable = '#999999';//#90C0FF
var calendback = '#CCCCCC';//#DDDDBB
var lines = '#404040';//#404040
var bright = '#000000';//#000000
var festa = '#FF0000';//#FD9139
// ------ Non cambiare ----------
var mesi = new Array('Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre');
var days = new Array('Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa', 'Do');
var dd = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var today = new Date();
var anno = today.getFullYear();
var mese = today.getMonth();
var currday = today.getDate();
var cellwidth = Math.floor(xwidth / 7);
xwidth = cellwidth * 7;
var xmese = 0;
var aboutx = false;
var isOn = false;

function action(g, m , a) {
function format(x) {
return x > 9 ? x : "0" + x;
}
getId().showIt(false);
if (tipo == 0) {
source[0].value = format(g);
source[1].value = format(m + 1);
source[2].value = a;
}
else
source.value = format(g) + '-' + format(m + 1) + '-' + a;
}
document.write('<style type="text/css">\n\n</style>');

function isfesta(d) {
var feste = new Array(0, 101, 106, 425, 501, 602, 815, 1101, 1208, 1225, 1226);
if (d.getDay() == 0)
return true;
var pp = pasqua(d.getFullYear()) + 1; // Pasquetta
if (pp % 100 > 31)
pp = 401;
feste[0] = pp;
for (var i = 0; i < feste.length; i++)
if (Math.floor(feste* / 100) == d.getMonth() + 1) {
var gg = feste* % 100;
if (gg == d.getDate())
return true;
}
return false;
}

function dataframe(x) {
var s = '<table width="' + xwidth + '" border="1" cellspacing="0" cellpadding="0" bgcolor="' + backtable + '">';
s += '<tr>\n<td class="mese" valign="middle">';
s += x; // calendar(currday, mese, anno);

s += '</td></tr><tr><td>';
s += '<form class="butt"><table width="100%" border="0" cellspacing="0" cellpadding="2">';
s += '<tr>';
s += '<td></td>';
s += '<td align="right"><input type="button" name="prev" value=" - " class="butt" onclick="altro_mese(-1)">';
s += '<input type="button" name="current" value="Default" class="butt" onclick="altro_mese(9)">';
s += '<input type="button" name="next" value=" + " class="butt" onclick="altro_mese(1)"></td>';
s += '</tr></form></table>';
s += '</td>\n</tr>\n</table>';
return s;
}

function moveLayer(xPos, yPos) {
switch (browser) {
case 0:
this.left = xPos+50;
this.top = yPos;
break;
case 1:
this.style.pixelLeft = xPos+50;
this.style.pixelTop = yPos;
break;
default:
this.style.left = xPos+50;
this.style.top = yPos;
}
}

function createlayer() {
var s;
if (document.layers)
s = '<layer id="calframe" visibility="hide" z-index=1>';
else
s = '<div id="calframe" style="position:absolute; visibility: hidden">';
if (document.layers)
s += '</layer>';
else
s += '</div>';
document.writeln(s);
}

function showIt(on) {
isOn = on;
if (browser)
this.style.visibility = (on) ? "visible" : "hidden";
else
this.visibility = (on) ? "show" : "hide"
}

function showCalendar(d, xpos, ypos) {
if (!isOn) {

if (d) {
anno = d.getFullYear();
mese = d.getMonth();
currday = d.getDate();
} else {
anno = today.getFullYear();
mese = today.getMonth();
currday = today.getDate();
}
if (arguments.length > 2) {
var id = getId();
id.moveLayer(xpos, ypos);
}
else
getId().moveLayer(100, 100);
xmese = 0;
writeLayer(dataframe(calendar(currday, mese, anno)));

}
getId().showIt(!isOn);
}

createlayer(1);
onload = init;
[/PHP]
Tutto funziona benissimo ma volevo sapere se qualcuno mi sa indicare come modificare questo codice affinchè il calendario venga visualizzato affienco al bottone premuto.

P.S. Io devo utilizzare IExplorer

Grazie

privacy.impresa

Devi cercare dove viene impostata la posizione del layer...

Nello statico vedo un class="td_form_sx". Puoi iniziare controllando la classe td_form_sx che fa... se dovesse posizonarlo sei a cavallo perchè ti basta creare una classe tipo .td_form_dx e metterlo altrove...

Altrimenti c'è una caterva di codice html creato nella comunicazione asincrona con ajax

Questa porzione è molto indiziata:
function moveLayer(xPos, yPos) {
switch (browser) {
case 0:
this.left = xPos+50;
this.top = yPos;
break;
case 1:
this.style.pixelLeft = xPos+50;
this.style.pixelTop = yPos;
break;
default:
this.style.left = xPos+50;
this.style.top = yPos;
}
}

pizzet

grazie per la risposta veloce ma td_form_sx l'ho creata io per formattare il campo ma non condiziona il calendario mentre anch'io ho trovato quel codice e l'ho modificato con quei +50 che me mi distanziano più a destra il calendario.
Quello che non capisco è perchè xpos e ypos non prendono la posizione del bottone cliccato oppure non capisco perchè posiziona il calendario sempre in alto

privacy.impresa

Li definisce qui:

xPos = (document.layers) ? e.pageX : ((document.all) ? event.x : e.clientX);
yPos = (document.layers) ? e.pageY : ((document.all) ? event.y : e.clientY);

e.pageX / event.x / e.clientX sono le posizioni dove avviene un evento... in pratica lui parte dal punto in cui avviene l'evento... la chiave sta lì...

keiske

pizzet

ci sono ho capito anch'io che è questa la parte di codice di interesse infatti il calendario si sposta sulla pagina ma se clikko su l'ultimo campo della data il calendario compare in cima e questo secondo le coordinate è un assurdo.

Chi mi sa aiutare?:?:?:?

privacy.impresa

Prova temporaneamente a mettere

xPos = 200;
yPos = 200;

E vedi come si comporta...

keiske

pizzet

seguendo il tuo consiglio il calendario viene sempre mostrato nella stessa posizione cioè alle coordinate x=200 e y=200

privacy.impresa

Almeno abbiamo capito che è lì la chiave di tutto... adesso bisogna capire perchè (document.layers) ? e.pageX : ((document.all) ? event.x : e.clientX); non ti cattura la coordinata dove avviene l'evento del mouse... controlla in rete le sintassi di "e.pageX, event.x e e.clientX

Suppongo che dipenda dai browser... non è che c'è modo di accedere con DOM?

Prova così:

xPos = event.clientX;
yPos = event.clientY;

pizzet

come mi dici tu scende un po' ma il risultato non è ancora accettabile però leggevo qua e la che:

document.layers indicava il vecchio DOM di Netscape Navigator fino alla versione 4.
document.all indicava il vecchio DOM di Internet Explorer fino alla versione 4 (ma il vecchio DOM è ancora supportato anche all'interno della versione 6)
document.getElementById indica il DOM secondo gli standard del W3C e contraddistingue tutti i browser moderni, compresi Netscape 6 o superiori, Internet Explorer 5 o superiori e molti altri browser (FireFox, Opera, Safari, eccetera)
In pratica document.layers e document.all appartengono al passato.
Oggi devi usare sempre document.getElementById o sintassi secondo gli standard W3C.

Io lavoro su internet explorer 7 e dove invece dovrò implementare il codice ha internet explorer 6

privacy.impresa

scusa, mi fai uno screenshot del mouse sul bottone che ha appena cliccato ed è comparso il layer?

Nel tuo caso non usi getElementById, o meglio... vuoi svincolarti dall'evento del mouse?

onclick="document.getElementById('id_del_layer').style.cssText = 'visibility:visible;top:XXpx;left:XXpx'"

A quell'id applichi una classe staticamente che definisce "position:absolute;visibility:hidden" e le cose fisse

In questo modo al click del mouse il layer diventa visibile e si "piazza" dove dici tu e per ogni bottone puoi individuare dove lo vuoi... (ci sono modi più belli esteticamente a livello di codice, ma non conosco bene la tua pagina)

keiske

pizzet

allora i cerchi rossi indicano i vari campi che richiamano il calendario e nel caso dei bottoni in alto il calendario compare in una posizione accettabile mentre nel caso dei bottoni in basso il calendario non scende di molto e cmq rimane visualizzato sempre troppo in alto e mi tocca scrollare la pagina.

privacy.impresa

ma il calendario che appare è sempre lui? O cambia a seconda del bottone che premi? Lo facevi un po' più piccolo lo screenshot e mi serviva un microscopio elettronico

keiske

pizzet

scusami ma non sono stato io a farlo piccolo ma le restrizioni degli allegati del forum ma cmq si è sempre lo stesso calendario

pizzet

ho messo questo codice
[PHP]alert(xPos+","+yPos);[/PHP]
nella funzione che richiama il calendario dopo le famosissime variabili xPos e yPos ed ho cliccato su tutti i bottoni partendo dall'alto in giù ed ho avuto i seguenti risultati:
685,199
685,230
685,93
685,151
685,208
questo mi dimostra che essendo i primi due bottoni in una tabella ed i restanti bottoni in un'altra tabella il calendario elabora le posizioni relative e non quelle assolute della pagina.
Mo' che faccio?

privacy.impresa

Allora perchè scusa non usi il sistema che ho detto prima, magari perfezionandolo?

imposta il div del calendario tutto per benino... poi dagli "position:relative;left:10px;top:10px;visibility:hidden"

Poi assegna ai bottoni sull'evento onclick di dare visibilità al layer che teoricamente dovrebbe apparire 10 pixel a sinistra e 10 sopra rispetto all'elemento bottone (il div è "relativo")... almeno io ho gli aiuti in linea e li faccio così... appaiono un po' spostati con "relazione" al link... però io di fianco ad ogni "link" di aiuto metto il codice che richiama il layer (ma lo stile è nel css per tutti i layer)

keiske

edit: controlla se il "div" è impostato relativo o assoluto, oppure prova a usare il float

pizzet

forse ho trovato questo codice che mi ha chiarito un po' le idee
[PHP]
<script>
function test()
{
if (document.layers) getMouseLoc; //NS
else if (document.all) getMouseLoc(); //IE
alert(mouseLocation.x+","+mouseLocation.y);
}

<a href="#" onClick="test()">ooooooooooooooooooooooooo</a>
[/PHP]
infatti adattandolo un po' cioè scrivendo
[PHP]
xPos = event.x + document.body.scrollLeft;
yPos = event.y + document.body.scrollTop;
[/PHP]
il tutto quasi torna dico quasi perchè viene spostato un pochino più in basso il calendario per i bottoni in alto invece è perfetto per quelli in basso

pizzet

ti ringrazio per l'attenzione.
Alla fine ho risolto così un po' brutale ma funzionante
[PHP]
if(val=='datacompleta1' || val=='datacompleta2'){
xPos = event.x;
yPos = event.y;
}else{
xPos = event.x + document.body.scrollLeft;
yPos = event.y + document.body.scrollTop;
}
[/PHP]
cioè per i bottoni di sopra funziona come sempre ha funzionato per il resto segui le coordinate della pagina.