[Risolto] [RISOLTO] link con esclusione div

[tempestaluna]

Buon giorno,
stò facendo un calendario in dhtml utilizzando java e mi si è presentato questo tipo di problema:

nella pagina java ho la seguente stringa per nascondere e mostrare i div della pagina in html:

function showDivgennaio(){
Div = document.getElementById('befana');
Div.style.display='block';
Div = document.getElementById('corpocal');
Div.style.display='none';
return false;
}

mentre nella pagina in html richiamo il codice con:

6

e fin qui tutto bene; cliccando sul link befana mi nasconde il livello #corpocal e mi mostra il livello #befana; se però inserisco più di 16 div tra quelli da mostrare e nascondere non funziona e non mi fa vedere nulla.
Premetto che il livello befana all'apertura della pagina è nascosto grazie ai css.

Come posso fare per far vedere il div che decido io cliccando sul mese o sul giorno del calendario e nascondere quei div che non mi interessano senza impazzire?

grazie mille

[daemon_nio]

Più precisamente si tratta di javascript e non di java.

Il problema non l'ho capito.
La funzione showDivgennaio per come parli funziona.

E a quanto sembra hai provato ad inserire anche nuovi eventi e i primi funzionano tutti.

se però inserisco più di 16 div tra quelli da mostrare e nascondere non funziona e non mi fa vedere nulla.

Questo è molto strano, perché 15 sì e 16 no?

Sei sicuro che il problema sia il sedicesimo in quanto sedicesimo e non in quanto scritto male?
La prima cosa che mi vien da dirti e' controllare l'id dell'elemento div. Deve essere unico e non deve avere spazi.
    'vigilia di natale' non va bene ma devi sostituire lo spazio con un altro carattere ad esempio 'vigilia_di_natale'.

Come posso fare per far vedere il div che decido io cliccando sul mese o sul giorno del calendario e nascondere quei div che non mi interessano senza impazzire?

Questo è un po' più complicato. L'impazzire non dipende tanto dal fatto che il codice è difficile ma dal fatto che è progettato male.

Creare tutte le funzioni showDivgennaio, showDivfebbraio, ... potrebbe essere una follia.

Sarebbe molto più comodo avere una funzione showEvento(data) che effettua una chiamata asincrona (vedi ajax) ad una pagina dinamica (non so quale linguaggio di programmazione hai alle spalle: php, asp, jsp, ruby ...) che leggendo la data costruisce il contenuto dinamico del div e lo riempe all'interno della pagina iniziale.

Non so... vedi tu che ti serve fare.

[garak]

A parte sottoscrivere quanto detto da daemon_nio, posso aggiungere un suggerimento: installa Firebug e verifica da solo che succede nel DOM e nei tuoi script. Lo trovi tra le estensioni di Firefox.

[Zoff]

Quoto quanto detto da Garak e daemon_nio, se però trovi troppo difficile buttarti subito su AJAX (cosa che ti consiglio comunque perché piu' efficente e corretta) puoi inserire tutti i div nella pagina e poi modificare la proprietà display del div in modo da nasconderlo (div.display = 'none') oppure mostrarlo (div.display = 'block').

ciauz

[daemon_nio]

modificare la proprietà display del div in modo da nasconderlo (div.display = 'none') oppure mostrarlo (div.display = 'block').

Invece ho trovato più comodo questo:

modificare la proprietà display dell'elemento in modo da nasconderlo (el.display = 'none') oppure mostrarlo (el.display = '').

Il display none funziona per ogni tipo di elemento non solo per i div.
Il display block funziona in maniera diversa su exploere e mozilla. Per i div funziona in ogni caso, ma se poi dovessi cambiare un div con un altro elemento potresti trovare delle difficoltà. Non mettendo nulla nel display ottieni il valore di default, ossia l'elemento viene visualizzato sempre e comunque, sia che si un div, sia un tr, td, etc...

[Zoff]

modificare la proprietà display del div in modo da nasconderlo (div.display = 'none') oppure mostrarlo (div.display = 'block').

Invece ho trovato più comodo questo:

modificare la proprietà display dell'elemento in modo da nasconderlo (el.display = 'none') oppure mostrarlo (el.display = '').

Il display none funziona per ogni tipo di elemento non solo per i div.
Il display block funziona in maniera diversa su exploere e mozilla. Per i div funziona in ogni caso, ma se poi dovessi cambiare un div con un altro elemento potresti trovare delle difficoltà. Non mettendo nulla nel display ottieni il valore di default, ossia l'elemento viene visualizzato sempre e comunque, sia che si un div, sia un tr, td, etc...

L'avevo dato per scontato... Visto che si trattava di div... Quoto quanto detto da daemon_nio...

[tempestaluna]

Grazie mille a tutti voi per avermi risposto, nel seguire le vostre indicazioni e cercando qua e la per la rete sono riuscia bene o male a risolvere il mio problema.
Adesso dopo tanta fatica mi è sorto un dilemma:

" posso fare in modo di mostrare i miei div in base ad una data prestabilita e precisa?"

mi spiego meglio: oggi 01/02/09 mostra evento s.valentino tutti gli altri tienili nascosti

diciamo una cosa del genre l'ho risolta con questo:

        function nascondi(div){
for (i=1;i<32;i++){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento31');
oDiv.style.display='none';
}

richiamo il tutto dall'html con:

        Massaggio

solo che xrò questo mi fa vedere il div che decido io cliccando sopra un link "Massaggio" in questo caso.

Mi domando: non c'è una stringa, uno script in java che mi consenta di far vedere il mio evento "Massaggio" alla data 01/02/2009 tenerlo lì per 10 gg e poi metterlo nascosto??

[Zoff]

Basta che controlli la data con un oggetto Date. Ecco il riferimento w3c: http://www.w3schools.com/jsref/jsref_obj_date.asp

[tempestaluna]

grazie :-) adesso provo e poi ti faccio sapere ... speriamo bene non sono molto ferrata in materia

[tempestaluna]

ho provato a fare così ma non va che devo fare?

function nascondidata(div){
var evento = new Date("February 14, 2009");
document.write(evento.getDate());
for (i=1;i<32;i++){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento31');
oDiv.style.display='none';
}

[Zoff]

Intendevo qualcosa tipo questo:

Codice: Seleziona tutto

function nascondidata(div){
   var evento = new Date(); //In Evento c'è la data attuale
   for (i=1;i<32;i++){
      //evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
      //NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
      // perché non tiene conto del cambio di mese, è solo come esempio
      if(evento.getDate() >= i && evento.getDate() <= i+10){
         id='evento'+i;
         document.getElementById(id).style.display = 'none';
      }
   }
   document.getElementById('evento'+div).style.display = 'block';
   oDiv = document.getElementById('evento31');
   oDiv.style.display='none';
}

[tempestaluna]

mettendolo così potrebbe funzionare?:

function nascondidata(div){
var evento = new Date(); //In Evento c'è la data attuale
document.write(d.getUTCMonth());
for (i=1;i<32;i++){
//evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
//NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
// perché non tiene conto del cambio di mese, è solo come esempio
if(evento.getDate() >= i && evento.getDate() < i+10){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento31');
oDiv.style.display='none';
}

[Zoff]

mettendolo così potrebbe funzionare?:

function nascondidata(div){
var evento = new Date(); //In Evento c'è la data attuale
document.write(d.getUTCMonth());
for (i=1;i<32;i++){
//evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
//NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
// perché non tiene conto del cambio di mese, è solo come esempio
if(evento.getDate() >= i && evento.getDate() < i+10){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento31');
oDiv.style.display='none';
}

Mmm... Non ho capito cosa hai fatto...
Che oggetto è d?

[tempestaluna]

d non è nulla mi ero sbagliata a scrivere ma tanto non funziona neanche così :-(

[tempestaluna]

function nascondidata(div){
var evento = new Date(); //In Evento c'è la data attuale
evento.setUTCFullYear(2009);
evento.setUTCMonth(0);

for (i=1;i<32;i++){
//evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
//NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
// perché non tiene conto del cambio di mese, è solo come esempio


if evento.getDate() >= i && evento.getDate() < i+10){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento32');
oDiv.style.display='none';
}



inserendo: evento.setUTCFullYear(2009); non faccio il controllo sull'anno?
inserendo: evento.setUTCMonth(0); non faccio il controllo sul mese?

[Zoff]

inserendo: evento.setUTCFullYear(2009); non faccio il controllo sull'anno?
inserendo: evento.setUTCMonth(0); non faccio il controllo sul mese?

No... In quel modo modifichi l'oggetto date e basta...

Se ti serve ho scritto questa:

Codice: Seleziona tutto

<script type="text/javascript"><!--

   /* Questa funzione restituisce true se il giorno indicato
   è maggiore uguale all'ora attuale per non piu' del valore di durata

   es. "ipotizzando" che sia il 05/01/2009
   isTimeToShow('10','01','2009','20') --> true
   isTimeToShow('26','01','2009','20') --> false
   isTimeToShow('05','02','2009','40') --> true
   */
   
   function isTimeToShow(gg,mm,aaaa,durata){
      var giorniPerMese = new Array( '31','28','31','30','31','30','31','31','30','31','30','31');
      endDay = parseInt(gg)+parseInt(durata);
      endMonth = parseInt(mm);
      endYear = parseInt(aaaa);
      while( endDay > giorniPerMese[endMonth -1] ){
         endDay -= giorniPerMese[endMonth -1];
         endMonth++;
         if(endMonth > 12){
            endMonth = 1;
            endYear++;
         }
      }
      var end = Date.parse(endDay +'/'+ endMonth +'/'+ endYear);
      var start = Date.parse(gg+'/'+mm+'/'+aaaa);
      var now = new Date().getTime();
      return (start < now && now < end);
   }
--></script>

basta che fai if( isTimeToShow() ) passando la data di inizio e la durata dell'evento e dovrebbe fare quello che vuoi tu...

NB. I mesi vanno passati con valori da 1 a 12

[tempestaluna]

ho messo così ma non funziona:

function isTimeToShow(gg,mm,aaaa,durata){
var giorniPerMese = new Array( '31','28','31','30','31','30','31','31','30','31','30','31');
endDay = parseInt(gg)+parseInt(durata);
endMonth = parseInt(mm);
endYear = parseInt(aaaa);
while( endDay > giorniPerMese[endMonth -1] ){
endDay -= giorniPerMese[endMonth -1];
endMonth++;
if(endMonth > 12){
endMonth = 1;
endYear++;
}
}
var end = Date.parse(endDay +'/'+ endMonth +'/'+ endYear);
var start = Date.parse(gg+'/'+mm+'/'+aaaa);
var now = new Date().getTime();
return (start < now && now < end);
}
if( isTimeToShow(05,1,2009,10) )
for (i=1;i<32;i++){
//evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
//NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
// perché non tiene conto del cambio di mese, è solo come esempio

id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento32');
oDiv.style.display='none';
}

questo è il controllo che fa sui livelli (in questo caso inizialmente nascosti) for (i=1;i<32;i++) ma non capisco che devo fare e dove mettere il codice che mi hai dato tu

[Zoff]

ho messo così ma non funziona:

function isTimeToShow(gg,mm,aaaa,durata){
var giorniPerMese = new Array( '31','28','31','30','31','30','31','31','30','31','30','31');
endDay = parseInt(gg)+parseInt(durata);
endMonth = parseInt(mm);
endYear = parseInt(aaaa);
while( endDay > giorniPerMese[endMonth -1] ){
endDay -= giorniPerMese[endMonth -1];
endMonth++;
if(endMonth > 12){
endMonth = 1;
endYear++;
}
}
var end = Date.parse(endDay +'/'+ endMonth +'/'+ endYear);
var start = Date.parse(gg+'/'+mm+'/'+aaaa);
var now = new Date().getTime();
return (start < now && now < end);
}
if( isTimeToShow(05,1,2009,10) )
for (i=1;i<32;i++){
//evento.getDate() restituisce il numero del giorno del mese come vedi nella documentazione.
//NB. Io ho messo +10 per mostrarlo per 10gg ma è ovvio che non funziona bene
// perché non tiene conto del cambio di mese, è solo come esempio

//L'if va messo quì

id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento32');
oDiv.style.display='none';
}

questo è il controllo che fa sui livelli (in questo caso inizialmente nascosti) for (i=1;i<32;i++) ma non capisco che devo fare e dove mettere il codice che mi hai dato tu

Il codice che ti ho postato va nell'header della pagina, l'if va dove ho scritto il commento "//L'if va messo quì"

E deve essere ad esempio:

Codice: Seleziona tutto

if( isTimeToShow(i,evento.getMonth()+1,evento.getYear(), <durata evento>) ){

[tempestaluna]

così può andare?

function isTimeToShow(gg,mm,aaaa,durata){
var giorniPerMese = new Array( '31','28','31','30','31','30','31','31','30','31','30','31');
endDay = parseInt(gg)+parseInt(durata);
endMonth = parseInt(mm);
endYear = parseInt(aaaa);
while( endDay > giorniPerMese[endMonth -1] ){
endDay -= giorniPerMese[endMonth -1];
endMonth++;
if(endMonth > 12){
endMonth = 1;
endYear++;
}
}
var end = Date.parse(endDay +'/'+ endMonth +'/'+ endYear);
var start = Date.parse(gg+'/'+mm+'/'+aaaa);
var now = new Date().getTime();
return (start < now && now < end);
}

for (i=1;i<32;i++){

if( isTimeToShow(i,evento.getMonth()+1,evento.getYear(), <10>) ){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento32');
oDiv.style.display='none';
}

[Zoff]

così può andare?

function isTimeToShow(gg,mm,aaaa,durata){
var giorniPerMese = new Array( '31','28','31','30','31','30','31','31','30','31','30','31');
endDay = parseInt(gg)+parseInt(durata);
endMonth = parseInt(mm);
endYear = parseInt(aaaa);
while( endDay > giorniPerMese[endMonth -1] ){
endDay -= giorniPerMese[endMonth -1];
endMonth++;
if(endMonth > 12){
endMonth = 1;
endYear++;
}
}
var end = Date.parse(endDay +'/'+ endMonth +'/'+ endYear);
var start = Date.parse(gg+'/'+mm+'/'+aaaa);
var now = new Date().getTime();
return (start < now && now < end);
}

for (i=1;i<32;i++){

if( isTimeToShow(i,evento.getMonth()+1,evento.getYear(), <10>) ){
id='evento'+i;
document.getElementById(id).style.display = 'none';
}
}
document.getElementById('evento'+div).style.display = 'block';
oDiv = document.getElementById('evento32');
oDiv.style.display='none';
}

Togli le <> da 10... era per indicare che quello era da modificare
Poi penso possa andare se è veramente quello che vuoi fare...

PS. Usa i codebox vale a dire il cancelletto che trovi tra i tasti dell'editor quando posti del codice...