[Javascript] Parametrizzare <td width con variabili Javascript [Archivio]

View Full Version : [Javascript] Parametrizzare <td width con variabili Javascript

cos1950

22-08-2013, 06:28

<table><td width=1024>..... eccetera

invece di mettere un valore numerico per width, vorrei mettere una variabile da settare in base alla risoluzione
per esempio

definire la variabile dimX
<script type="javascript">

var dimX = screen.width >= 1152? (90*screen.width)/100 : (85*screen.width)/100;
</script>

per poi inserirla nel tag html

<table><tr><td width=dimX>..... eccetera

il punto critico è proprio questo... con quale sintassi si inserisce nel tag html?

ho trovato %dimX;& ma non funziona...

3vi

22-08-2013, 08:10

dovresti usare un approccio del genere:

http://jsfiddle.net/F3f3u/

o, sempre nello stesso modo, usando jquery

OoZic

22-08-2013, 09:13

http://jsfiddle.net/JmD8h/1/

Nell'html ti basta inserire delle classi o degli id per poter facilmente scegliere quegli elementi con jQuery.

HTML:
<table id="tab1">
<tr>
<td class="colonna">
...
</td>
<td>
...
</td>
</tr>
</table>

JS:
var dimX = screen.width >= 1152? (90*screen.width)/100 : (85*screen.width)/100;
$("#tab1").width(dimX);
$(".colonna").width(250);

cos1950

23-08-2013, 08:59

chiedo scusa... ho usato i suggerimenti datimi e solo in parte hanno funzionato... dal momento che sono veramente alle prime armi con javascript e jQuery e quindi...

il frammento di codice usato è

------------------------------------------------------------------

<style type=text/css>

<script type=text/javascript>

var dimX = screen.width >= 1024? (90*(screen.width))/100 : 1100;

$("#tab1").width(dimX);
$("#tab2").width(dimX);

</script>
</style>

</head>

<body background="img/sfondo.gif" bgcolor=green>

<table id="tab1" align="center" bgcolor="green" border="1">

<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000" border=0><b><font size="5" color=yellow> Le Reazioni Inorganiche: Formazione di Sali Ternari da un metallo e un non-Metallo

</font></td>
<td width="23"></td>
</tr>
<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000"><font color=white size=6> Formazione del sale ternario <font color=yellow>Clorito di Bario (<font color=white>Ba(ClO<sub>2</sub>)<sub>2</sub></font>)</font></font>.

</font></td>
<td width="23"></td>
</tr>
</table>

<table id="tab2" cellspacing=0 cellpadding=0 frame="box" align="center" border="3">
........................... eccetera

---------------------------------------------------------------------

la prima tabella, con id=tab1 non viene ridimensionata dal codice, ma si vede che le width sono unicamente determinati dal testo scritto dentro...
la seconda invece si...

perchè?

OoZic

23-08-2013, 09:55

1- non mettere <style ...> e all'interno <script>, sono due cose diverse.
nell'head metti lo style
<head>
...
<style>
...
</style>
</head>
<body>
...
<script>
...
</script>
</body>

2- a me sembra funzioni correttamente, ho solo impostato dim a 250 perchè la finestrella è piccola e altrimenti non si sarebbe visto ma comunque non cambia il senso: http://jsfiddle.net/jh2cB/
magari posta anche l'html della seconda tabella o se hai altri script, css o quant'altro.
con il solo codice che hai postato funziona.

3- per favore metti il codice nel suo bbcode [ code] cosi si legge più facilmente

cos1950

23-08-2013, 10:24

<body background="img/sfondo.gif" bgcolor=green>

<script type=text/javascript>

var dimX = screen.width >= 1024? (90*(screen.width))/100 : 1100;

$("#tab1").width(dimX);
$("#tab2").width(dimX);
</script>

<table id="tab1" align="center" bgcolor="green" border="1">

<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000" border=0><b><font size="5" color=yellow> Le Reazioni Inorganiche: Formazione di Sali Ternari da un metallo e un non-Metallo

</font></td>
<td width="23"></td>
</tr>
<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000"><font color=white size=6> Formazione del sale ternario <font color=yellow>Clorito di Bario (<font color=white>Ba(ClO<sub>2</sub>)<sub>2</sub></font>)</font></font>.

</font></td>
<td width="23"></td>
</tr>
</table>

questo il frammento di codice modificato...

la seconda tabella, qui non ho riportato il codice, va bene... è la id=tab1 che continua a non essere influenzata dallo script...

Ho innestato lo script e il foglio di stile perchè c'era una parte del css che doveva essere controllato con un if a seconda del tipo di browser, cioè così...

................................................
<style type=text/css>

<script type=text/javascript>

body
{
margin: 10px 0px 0px 0px;
}

#FOOTER
{
position: fixed;
bottom: 0px;
width: 100%;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #000000;
}

if (navigator.appName =="Microsoft Internet Explorer")
{
html #FOOTER
{
position: absolute;
top: expression((0-(FOOTER.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
}

</script>
</style>

</head>

può dare effetti indesiderati?

cos1950

23-08-2013, 10:51

questo un esempio completo...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type=text/javascript>

var dimX = screen.width >= 1024? (90*(screen.width))/100 : 1100;

$(".tab").width(dimX);

function VisualizzaFile(nomefile, format)
{

finestra = window.open (nomefile,'pag',format);
finestra.resizeTo(650, 730);
finestra.focus();
}

</script>

</head>

<body background="img/sfondo.gif" bgcolor=green>

<table class="tab" align="center" bgcolor="green" border="1">

<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000" border=0><b><font size="5" color=yellow> Le Reazioni Inorganiche: Formazione di Sali Ternari da un metallo e un non-Metallo

</font></td>
<td width="23"></td>
</tr>
<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000"><font color=white size=6> Formazione del sale ternario <font color=yellow>Clorito di Bario (<font color=white>Ba(ClO<sub>2</sub>)<sub>2</sub></font>)</font></font>.

</font></td>
<td width="23"></td>
</tr>
</table>

<table class="tab" cellspacing=0 cellpadding=0 frame="box" align="center" border="3">
<tbody>

<tr>
<td width="2"></td>

<td colspan=5>
<br>
<p> </font><dir><font color="black" size=5> Si vogliano
scrivere e bilanciare le reazioni necessarie per ottenere un sale
ternario, partendo da un metallo e da un non-metallo.
<br> Ammettiamo che il non-metallo sia <font color="brown"><b>Cloro cloroso (Cl<sup>+3</sup>)</b></font> e il metallo sia <b><font color="brown">Bario (Ba<sup>+2</sup>)</font></b>.</p>
</td><td width=2></td>
</tr>

<tr><td colspan=7><hr color=green size=3></td></tr>

<tr>
<td width="2"></td>
<td>

<dir><font color="black" size=5> <br><p>L'esercizio va svolto facendo riferimento allo
<p align=center><font size=6><a href="javascript:VisualizzaIMG('img/compound.gif', 'left=450, top=475, width=580, height=400')"> schema generale delle reazioni</a></font></p>
che conducono alla formazione del sale ternario, partendo da metallo e non metallo;<br><br>

<ul>
<li>il metallo dà, per reazione con Ossigeno, l'ossido: nel caso in esame
<font color=brown>Ossido di Bario</font>;<br>
<li>l'ossido di Bario ottenuto vien fatto reagire con acqua, ottenendosi l'<font color=brown>Idrossido di Bario</font>;
<li>analogamente il non metallo dà, per reazione con Ossigeno, l'anidride;<br>nel caso in esame
<font color=brown>Anidride Clorosa</font>;
<li>l'Anidride Clorosa ottenuta forma, fatta reagire con acqua, l'<font color=brown>Acido Cloroso</font>;
<li>infine il sale, vale a dire il <font color=brown>Clorito di Bario</font> si sintetizza per reazione diretta tra idrossido e ossiacido.
</ul>

<td width="2"></td>
</tr></table>

</body>
</html>

ho creato una classe (credo :D ) di tabelle "tab" che applico alle 2 tabelle dell'esempio

confermo che la prima tabella non è influenzata dal codice

OoZic

23-08-2013, 12:53

Ti mancava la libreria jQuery.
Inoltre non usare screen.width ma window.width, perchè screen è l'intero schermo, window è invece la finestra del browser.

Gli script di questo tipo che vanno a interagire con il DOM salvo casi particolari si mettono generalmente alla fine prima della chiusura del body.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head>

<body background="img/sfondo.gif" bgcolor=green>

<table class="tab" align="center" bgcolor="green" border="1">

<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000" border=0><b><font size="5" color=yellow> Le Reazioni Inorganiche: Formazione di Sali Ternari da un metallo e un non-Metallo

</font></td>
<td width="23"></td>
</tr>
<tr bgcolor="#990000">
<td width="23"></td>
<td align=center bgcolor="#990000"><font color=white size=6> Formazione del sale ternario <font color=yellow>Clorito di Bario (<font color=white>Ba(ClO<sub>2</sub>)<sub>2</sub></font>)</font></font>.

</font></td>
<td width="23"></td>
</tr>
</table>

<table class="tab" cellspacing=0 cellpadding=0 frame="box" align="center" border="3">
<tbody>

<tr>
<td width="2"></td>

<td colspan=5>
<br>
<p> </font><dir><font color="black" size=5> Si vogliano
scrivere e bilanciare le reazioni necessarie per ottenere un sale
ternario, partendo da un metallo e da un non-metallo.
<br> Ammettiamo che il non-metallo sia <font color="brown"><b>Cloro cloroso (Cl<sup>+3</sup>)</b></font> e il metallo sia <b><font color="brown">Bario (Ba<sup>+2</sup>)</font></b>.</p>
</td><td width=2></td>
</tr>

<tr><td colspan=7><hr color=green size=3></td></tr>

<tr>
<td width="2"></td>
<td>

<dir><font color="black" size=5> <br><p>L'esercizio va svolto facendo riferimento allo
<p align=center><font size=6><a href="javascript:VisualizzaIMG('img/compound.gif', 'left=450, top=475, width=580, height=400')"> schema generale delle reazioni</a></font></p>
che conducono alla formazione del sale ternario, partendo da metallo e non metallo;<br><br>

<ul>
<li>il metallo dà, per reazione con Ossigeno, l'ossido: nel caso in esame
<font color=brown>Ossido di Bario</font>;<br>
<li>l'ossido di Bario ottenuto vien fatto reagire con acqua, ottenendosi l'<font color=brown>Idrossido di Bario</font>;
<li>analogamente il non metallo dà, per reazione con Ossigeno, l'anidride;<br>nel caso in esame
<font color=brown>Anidride Clorosa</font>;
<li>l'Anidride Clorosa ottenuta forma, fatta reagire con acqua, l'<font color=brown>Acido Cloroso</font>;
<li>infine il sale, vale a dire il <font color=brown>Clorito di Bario</font> si sintetizza per reazione diretta tra idrossido e ossiacido.
</ul>

<td width="2"></td>
</tr></table>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type=text/javascript>

var dimX = window.width >= 1024? (90*(window.width))/100 : 1100;

$(".tab").width(dimX);

function VisualizzaFile(nomefile, format)
{

finestra = window.open (nomefile,'pag',format);
finestra.resizeTo(650, 730);
finestra.focus();
}

</script>
</body>
</html>

cos1950

28-08-2013, 10:47

Errore...

cos1950

28-08-2013, 10:49

OoZic

28-08-2013, 11:02

Non capisco cosa sia la funzione load().

Per fare quel che chiedi basta questo, ti ho commentato il codice:

<body>

...contenuto...

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dimX = window.width >= 1024 ? (90 * (window.width)) / 100 : 1100;
$(".tab").width(dimX);

// dichiari la funzione che crea il cookie, a cui passi due valori: il nome del cookie e il valore che gli vuoi assegnare. NB: la stai solo dichiarando non viene eseguita ancora.

function createCookie(name, value) {
document.cookie = name + "=" + value;
}

// idem come prima stai dichiarando la funzione che legge, o meglio verifica se c'è un cookie.
// se non c'è cookie ritorna il valore null, se c'è il cookie ritorna il valore 'value' che avevi passato prima
// in realtà basterebbe una funzione più corta perchè noi non abbiamo impostato altri parametri (data ed expire) però per comodità teniamo questa e ci risparmiamo il tempo.

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

// se il cookie non esiste la funzione readcookie ritorna 'null' quindi fai vedere il popup e imposti il cookie
// se il cookie esiste esce non fa nulla, niente popup e niente creazione del cookie (che esiste già).

if (readCookie(StopPopUp) == null) {
// fai vedere il popup e impostalo
window.open('alert.htm', 'pag', 'left=100, top=120, width=600, height=500, resizable=0, scrollbars=0');
// impostiamo il cookie così la prossima volta non lo fa più vedere.
createCookie(StopPopUp, true);
}
</script>
</body>

</html>

cos1950

28-08-2013, 14:06

Con questo codice:

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dimX = window.width >= 1024 ? (90 * (window.width)) / 100 : 1100;
$(".tab").width(dimX);

// dichiari la funzione che crea il cookie, a cui passi due valori: il nome del cookie e il valore che gli vuoi assegnare. NB: la stai solo dichiarando non viene eseguita ancora.

function createCookie(name, value) {
document.cookie = name + "=" + value;

document.write("<b><font size=10> Valore scritto: " + document.cookie +"</font>");
}

// idem come prima stai dichiarando la funzione che legge, o meglio verifica se c'è un cookie.
// se non c'è cookie ritorna il valore null, se c'è il cookie ritorna il valore 'value' che avevi passato prima
// in realtà basterebbe una funzione più corta perchè noi non abbiamo impostato altri parametri (data ed expire) però per comodità teniamo questa e ci risparmiamo il tempo.

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie;
document.write("<b><font size=10> Valore letto: " + ca +"</font>");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

// se il cookie non esiste la funzione readcookie ritorna 'null' quindi fai vedere il popup e imposti il cookie
// se il cookie esiste esce non fa nulla, niente popup e niente creazione del cookie (che esiste già).

var miocookie = "StopPopUp";
var miovalue = "true";

if (readCookie(miocookie) == null) {
// fai vedere il popup e impostalo
f=window.open('alert.htm', 'pag', 'left=100, top=120, width=800, height=500, resizable=0, scrollbars=0');
// impostiamo il cookie così la prossima volta non lo fa più vedere.
createCookie(miocookie, miovalue);
f.focus();
}
</script>
</body></html>

trova sempre un valore letto null
ma il valore scritto è corretto... cioè "StopPopUp=true"

gli faccio scrivere nel documento i valori per controllare, appunto...
e quindi entra sempre nell'if e visualizza il popUp
Sembrerebbe non trovi il cookie alla lettura... Perchè?

cos1950

28-08-2013, 14:43

Domanda

quand'è che cancella il cookie? Non è che se non c'è una data di expire, lo cancella appena esce dalla pagina?

OoZic

28-08-2013, 17:24

nel trovare il tuo errore ho visto dove ho sbagliato io, perdonami ma sto facendo mille cose in sti giorni e sono parecchio sbadato complice il fatto che non sto mai testando il codice :doh: (non l'ho testato nemmeno stavolta :D )

var miocookie = "StopPopUp";
Va bene perchè il nome del cookie deve essere una string.
var miovalue = "true";
Non va bene perchè "true" è la string, mentre noi vogliamo la condizione booleana true.

var miocookie = "StopPopUp";
var miovalue = true;

if (readCookie(miocookie) == null) {
f=window.open('alert.htm', 'pag', 'left=100, top=120, width=800, height=500, resizable=0, scrollbars=0');
createCookie(miocookie, miovalue);
f.focus();
}

cos1950

28-08-2013, 23:16

Trovata una variante delle funzioni createcookie() >>> setcookie() e readcookie() >>> getcookie()

quello che fanno le funzioni è più comprensibile... ma il popUp esce sempre e non viene disabilitato... pare che alla lettura non ci sia mai un cookie

è evidente dalla riga indicata dalla freccia, nel codice allegato... quel document.write nin viene mai eseguito:

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dimX = window.width >= 1024 ? (90 * (window.width)) / 100 : 1100;
$(".tab").width(dimX);

// dichiari la funzione che crea il cookie, a cui passi due valori: il nome del cookie e il valore che gli vuoi assegnare. NB: la stai solo dichiarando non viene eseguita ancora.

function setCookie(name, value) {

var n = name+"="+escape(value);
document.cookie = n;

document.write("<b><font size=10> Valore scritto: " + n +"</font>");
}

// idem come prima stai dichiarando la funzione che legge, o meglio verifica se c'è un cookie.
// se non c'è cookie ritorna il valore null, se c'è il cookie ritorna il valore 'value' che avevi passato prima
// in realtà basterebbe una funzione più corta perchè noi non abbiamo impostato altri parametri (data ed expire) però per comodità teniamo questa e ci risparmiamo il tempo.

function getCookie(name) {
var arg = name+"=";
var alen = arg.length;
var clen = document.cookie.length;

var i = 0;
while (i < clen)
{
var j = i + alen;
document.write(document.cookie.substring(i, j)+"<br>"); <--=======--<<<< Questa non viene mai stampata...

if (document.cookie.substring(i, j) == arg) return 1;
}
return null;
}

// se il cookie non esiste la funzione readcookie ritorna 'null' quindi fai vedere il popup e imposti il cookie
// se il cookie esiste esce non fa nulla, niente popup e niente creazione del cookie (che esiste già).

var miocookie = "StopPopUp";
var miovalue = true;

if (getCookie(miocookie) == null) {
// fai vedere il popup e impostalo
f=window.open('alert.htm', 'pag', 'left=100, top=120, width=800, height=500, resizable=0, scrollbars=0');
// impostiamo il cookie così la prossima volta non lo fa più vedere.
setCookie(miocookie, miovalue);
f.focus();
}
</script>
</body></html>

OoZic

28-08-2013, 23:49

Domani mattina te lo sistemo per bene con una demo così testo se funziona e la facciamo finita :)

Non continuare a cambiare però.

Ci sarà solo da modificare l if e basta il resto è tutto giusto sono abbastanza certo

cos1950

29-08-2013, 09:24

Adesso funziona... nel while mancava l'incremento i++; del contatore

puoi verificare all'indirizzo in firma

grazie