Dunque, io vorrei scegliere la larghezza di una tabella in base alla larghezza della finestra del browser, in modo che sia sempre larga almeno 350 pixel.
Il codice che ho usato finora (senza far riferimento alla larghezza della finestra) e che funziona è:
codice:
<a href='javascript:void()' onclick='menuLayers.show("menupost", event)'>
<img src='http://URL_IMMAGINE/></a>
<div class='posmenu'>
<table border='0' cellpadding='0' cellspacing='0' valign='top' width='100%'>
<tr>
<td valign='top' width='100%'>
<div class='menu' id='menupost'>
<table border='0' cellpadding='0' cellspacing='0' onmousedown='over_effect(event,"inset")' onmouseout='over_effect(event,"solid")' onmouseover='over_effect(event,"outset")' onmouseup='over_effect(event,"outset")' width='100%'>
<tr>
<td class='menutit' width='100%'>Lista completa dei post:</td></tr>
<tr height='2px'>
<td width='100%'/>
</tr>
<tr>
<td width='100%'>
<div class='in-menu-1'>
<table border='0' cellpadding='0' cellspacing='0' valign='top' width='100%'>
<script src='http://URL_1' type='text/javascript'/>
<script type='text/javascript'> var urlcorr ='<data:blog.url/>';</script>
<script src='http://URL_2' type='text/javascript'/>
</table>
</div>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
Ove dall'URL_2 viene preso il json che viene usato nella funzione contenuta nell'URL_1, che è:
codice:
function posttend(json) {
for (var i = json.feed.entry.length-2; i >= 0 ; i--) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if (urlcorr == posturl) document.write('<tr><td class=\\'menulines\\' width=\\'100%\\' align=\\'left\\' color=\\'black\\'>'+posttitle+'</td></tr>');
else document.write('<tr><td onclick=\\'window.open(\"'+posturl+'\",\"_blank\")\\' class=\\'menulines\\' width=\\'100%\\' align=\\'right\\'>'+posttitle+'</td></tr>');
}
}
Per misurare la larghezza della finestra uso la funzione «viewport» che ho definito nell'head e anche quella funge.
Quindi ho pensato, per tener conto della larghezza della finestra, di mettere tutta la tabella nell'URL_1, aggiungendo un if per la larghezza della tabella, cioè nella pagina ho lasciato:
codice:
<a href='javascript:void()' onclick='menuLayers.show("menupost", event)'>
<img src='http://URL_IMMAGINE/></a>
<div class='posmenu'>
<script src='http://URL_1' type='text/javascript'/>
<script type='text/javascript'> var urlcorr='<data:blog.url/>';</script>
<script src='http://URL_2' type='text/javascript'/>
</div>
e nell'URL_1 ho messo:
codice:
function posttend(json) {
viewport.getAll();
var vpwr=viewport.width*0.3;
if (vpwr >= 350) document.write('<table border=\\'0\\' cellpadding=\\'0\\' cellspacing=\\'0\\' valign=\\'top\\' width=\\''+vpwr+'\\'>');
else document.write('<table border=\\'0\\' cellpadding=\\'0\\' cellspacing=\\'0\\' valign=\\'top\\' align=\\'left\\' width=\\'350\\'>');
document.write ('<tr><td valign=\\'top\\' width=\\'100%\\'><div class=\\'menu\\' id=\\'menupost\\'><table border=\\'0\\' cellpadding=\\'0\\' cellspacing=\\'0\\' onmousedown=\\'over_effect(event,\"inset\")\\' onmouseout=\\'over_effect(event,\"solid\")\\' onmouseover=\\'over_effect(event,\"outset\")\\' onmouseup=\\'over_effect(event,\"outset\")\\' width=\\'100%\\'><tr><td class=\\'menutit\\' width=\\'100%\\'>Lista completa dei post:</td></tr><tr height=\\'2\\'><td/></tr><tr><td width=\\'100%\\'><div class=\\'in-menu-1\\'><table border=\\'0\\' cellpadding=\\'0\\' cellspacing=\\'0\\' valign=\\'top\\' width=\\'100%\\'>');
for (var i = json.feed.entry.length-2; i >= 0; i--) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if (urlcorr == posturl) document.write('<tr><td class=\\'menulines\\' width=\\'100%\\' align=\\'left\\' color=\\'black\\'>'+posttitle+'</td></tr>');
else document.write('<tr><td onclick=\\'window.open(\"'+posturl+'\",\"_blank\")\\' class=\\'menulines\\' width=\\'100%\\' align=\\'right\\'>'+posttitle+'</td></tr>');
}
document.write('</table></div></td></tr></table></div></td></tr></table>');
}
Però non funziona. Qualche anima pia sa spiegarmi dove sbaglio?