[Risolto] [RISOLTO] link con esclusione div

[kelev]

tempestaluna impara a postare con i tag code

[tempestaluna]

Ho provato a fare come mi avevi detto ma non funziona  allego i file che stò facendo sperando che possa esserti di aiuto; mi scuso se non ho postato bene il codice è solo che non sono molto brava in materia.

[Zoff]

Ho provato a fare come mi avevi detto ma non funziona  allego i file che stò facendo sperando che possa esserti di aiuto; mi scuso se non ho postato bene il codice è solo che non sono molto brava in materia.

Il motivo è perché inserisci il codice nell'head del documento e quindi viene eseguito prima di caricare i div...

Per quello che devi fare ti consiglio molto piu' PHP o un altro linguaggio lato server (se ne hai la possibilità) piuttosto che javascript, perché fatto così è assai poco efficiente e dipende dal browser che utilizzi (ad esmepio in Internet Explorer non funzionerebbe)...

[tempestaluna]

in effetti hai ragione il codice che utilizzo per aprire e nascondere i div del calendario e quindi gli eventi del mio calendario non funziona eppure in  un'altra pagina dove ho i moduli di un form non mi da errore e mi fa aprire e nascondere i div che voglio io.

perchè questo codice

Codice: Seleziona tutto

   function isTimeToShow(06,01,2009,10){
      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';
}


in explore e altri non funziona:

e questo invece

Codice: Seleziona tutto

   /* Mostra Dati*/
   function showFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='block';
     oDiv = document.getElementById('tformDati');
     oDiv.style.display='block';
     return false;
   }//-->
   
   /* Nascondi Dati*/
   function hideFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='none';
     return false;
   }//-->


funziona anche su explorer?

che differenza c'è?

[Zoff]

in effetti hai ragione il codice che utilizzo per aprire e nascondere i div del calendario e quindi gli eventi del mio calendario non funziona eppure in  un'altra pagina dove ho i moduli di un form non mi da errore e mi fa aprire e nascondere i div che voglio io.

perchè questo codice

Codice: Seleziona tutto

   function isTimeToShow(06,01,2009,10){
      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';
}


in explore e altri non funziona:

e questo invece

Codice: Seleziona tutto

   /* Mostra Dati*/
   function showFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='block';
     oDiv = document.getElementById('tformDati');
     oDiv.style.display='block';
     return false;
   }//-->
   
   /* Nascondi Dati*/
   function hideFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='none';
     return false;
   }//-->


funziona anche su explorer?

che differenza c'è?

La differenza sta probabilmente nel fatto che quello del form l'hai collegato ad un link o all'evento onlick di qualche elemento...
Per cui viene richiamato dopo aver caricato i form, nel caso del calendario essendo nell'header viene eseguito quando ancora il body è vuoto...
In ogni caso anche il codice dei form su explorer non funzionerà perché explorer non ha il metodo document.getElementById('idElemento') ma devi usare document.all['idElemento']

Una funzione cross-browser può essere:

Codice: Seleziona tutto

function getElemById(id){
   if(document.getElementById){//Firefox, Opera, Safari, ...
      return document.getElementById(id);
   }else{//Internet Explorer
      return document.all[id];
   }
}

[tempestaluna]

ok aggiungere anche quello che mi hai detto tu adesso non è un problema, ho provato a togliere tutto questo codice:

Codice: Seleziona tutto

   function isTimeToShow(06,01,2009,10){
      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';
}
//-->


dalla pagina funziona tutto anche su explorer (nella pagina in html ho altri script in java e a quanto pare non danno problemi con nessun bowser) solo che necessito di un codice che mi faccia aprire i miei eventi ad una data precisa  poi li chiuda dopo un tot di giorni, forse ho scritto qualcosa che non va nel codice qui sopra o c'è qualcosa che non fa funzioare bene tutta la pagina html perchè senza questo codice funziona tutto.

Certo mettere un calendario eventi in php potrebbe essere più semplice o in un'altro linguaggio di programmazione ma io non sono brava in questo e l'unica cosa che sono riuscita a trovare è uno script che mostra e nasconde i livelli, certo non sarà il massmo della programmazione ma almeno con questo riesco ad ottenere quello che voglio io.

[tempestaluna]

La differenza sta probabilmente nel fatto che quello del form l'hai collegato ad un link o all'evento onlick di qualche elemento...

ho collegato anche quest'ultimo script ad un link associandolo all'evento onclick e non funziona.

In ogni caso anche il codice dei form su explorer non funzionerà perché explorer non ha il metodo document.getElementById('idElemento') ma devi usare document.all['idElemento']

ho provato il form sul web in pratica ho caricato il file contenente il form e il file contenente questo codice:

Codice: Seleziona tutto

   /* Mostra Dati*/
   function showFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='block';
     oDiv = document.getElementById('tformDati');
     oDiv.style.display='block';
     return false;
   }//-->
   
   /* Nascondi Dati*/
   function hideFormDati() {
     oDiv = document.getElementById('dati');
     oDiv.style.display='none';
     return false;
   }//-->



e funziona tutto, form incluso, non mi da alcun tipo di errore mi invia normalmente il messaggio o la richiesta informazione in più cliccando su un link mi nasconde e mostra il div che mi interessa, perchè dici che non funzionerà?

[Zoff]

Dovresti fare così:

Codice: Seleziona tutto

<html>
<head>
<title>Test isTimeToShow()</title>
<script type="text/javascript"><!--
   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] ){
         alert('lol???');
         endDay -= giorniPerMese[endMonth -1];
         endMonth++;
         if(endMonth > 12){
            endMonth = 1;
            endYear++;
         }
      }
      var start = Date.parse(mm+'/'+gg+'/'+aaaa);
      var end = Date.parse(endMonth +'/'+ endDay +'/'+ endYear);
      var now = new Date().getTime();
      return (start < now && now < end);
   }
   function getElemById(id){
      if(document.getElementById){//Firefox, Opera, Safari, ...
         return document.getElementById(id);
      }else{//Internet Explorer
         return document.all[id];
      }
   }
   function controllaDiv(){
      for( i = 1; i<=10; i++){
         now = new Date();
         if( isTimeToShow(i, now.getMonth()+1,now.getFullYear(),10) ){
            getElemById('evento'+i).style.display = "none";
         }
         
      }
   }
--></script>
</head>
<body onload="controllaDiv()">
   <div id="evento1">1</div>
   <div id="evento2">2</div>
   <div id="evento3">3</div>
   <div id="evento4">4</div>
   <div id="evento5">5</div>
   <div id="evento6">6</div>
   <div id="evento7">7</div>
   <div id="evento8">8</div>
   <div id="evento9">9</div>
   <div id="evento10">10</div>
</body>
</html>

[tempestaluna]

ho messo come hai detto tu; e l'ho richiamato così:

Codice: Seleziona tutto

<a href="#" onClick="isTimeToShow('25')" class="screenshot" rel="../img/m_rilassante.png" title="relax in agriturismo">LAST MINUTE DIQUESTO MESE</a>

ma non funziona... non mi fa vedere nulla

[Zoff]

ho messo come hai detto tu; e l'ho richiamato così:

Codice: Seleziona tutto

<a href="#" onClick="isTimeToShow('25')" class="screenshot" rel="../img/m_rilassante.png" title="relax in agriturismo">LAST MINUTE DIQUESTO MESE</a>

ma non funziona... non mi fa vedere nulla

Guarda bene il codice... Non è così che va usato ma così:

Codice: Seleziona tutto

isTimeToShow('25', new Date().getMonth()+1,new Date().getFullYear(),10)

PS: Ho anche fatto una piccola modifica al codice

[tempestaluna]

ok ma non devo mettere un link per richiamarlo? o mi apre alla data prestabilita il div in automatico non ho capito

[Zoff]

ok ma non devo mettere un link per richiamarlo? o mi apre alla data prestabilita il div in automatico non ho capito

L'ultimo codice che ho postato mostra il div con id eventoX a partire dal giorno X per 10 giorni, se è quello che volevi fare devi solo fare copia/incolla del javascript e aggiungere nel tag body:

Codice: Seleziona tutto

...
<body onload="controllaDiv()">
...

[tempestaluna]

ho fatto copia incolla del javascript e ho messo nel tag body

Codice: Seleziona tutto

<body onload="controllaDiv()">

ma non mi fa vedere nulla.

L'ultimo codice che ho postato mostra il div con id eventoX a partire dal giorno X per 10 giorni,

scusa la mia ignoranza ma dove posso modificare il giorno X? l'evento l'ho capito ma il giorno no

[Zoff]

ho fatto copia incolla del javascript e ho messo nel tag body

Codice: Seleziona tutto

<body onload="controllaDiv()">

ma non mi fa vedere nulla.

L'ultimo codice che ho postato mostra il div con id eventoX a partire dal giorno X per 10 giorni,

scusa la mia ignoranza ma dove posso modificare il giorno X? l'evento l'ho capito ma il giorno no

Devi modificare la funzione controllaDiv():

Codice: Seleziona tutto

function controllaDiv(){
      for( i = 1; i<=10; i++){
         now = new Date();
         if( isTimeToShow(i, now.getMonth()+1,now.getFullYear(),10) ){
            getElemById('evento'+i).style.display = "none";
         }
         
      }
   }[(code]

Così com'è adesso va da 1 a 10, basta cambiare quei numeri li oppure richimare singolarmente tutte le volte la funzione isTimeToShow() per ogni giorno che ti interessa...

[tempestaluna]

ho messo così ma non funziona ancora:

Codice: Seleziona tutto


<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Calendario eventi 2009 agriturismo Il Punto Verde</title>
<link href="../ilpuntoverde/calendario.css" rel="stylesheet" type="text/css" />
<script language="Javascript" type="text/javascript">
<!--
   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] ){
         alert('lol???');
         endDay -= giorniPerMese[endMonth -1];
         endMonth++;
         if(endMonth > 12){
            endMonth = 1;
            endYear++;
         }
      }
      var start = Date.parse(mm+'/'+gg+'/'+aaaa);
      var end = Date.parse(endMonth +'/'+ endDay +'/'+ endYear);
      var now = new Date().getTime();
      return (start < now && now < end);
   }
   function getElemById(id){
      if(document.getElementById){//Firefox, Opera, Safari, ...
         return document.getElementById(id);
      }else{//Internet Explorer
         return document.all[id];
      }
   }
-->

</script>

<script language="Javascript" src="../ilpuntoverde/jquery.js" type="text/javascript"></script>
<script language="Javascript" src="../ilpuntoverde/main.js" type="text/javascript"></script>

</head>

<body onload="controllaDiv()">

<div id="corpo">
  <div id="corpoalto">
    <h2 class="w_link">Al momento non sono presenti OFFERTE    
   LAST MINUTE DIQUESTO MESE</h2>

   <script type="text/javascript">
   function controllaDiv(){
      for( i = 1; i<=10; i++){
         now = new Date();
         isTimeToShow('25', new Date().getMonth()+1,new Date().getFullYear(),10){
            getElemById('evento'+i).style.display = "none";
         }         
      }
   </script>
   
  <div id="evento1"></div>
  <div id="evento2"></div>
  <div id="evento3"></div>
  <div id="evento4"></div>
  <div id="evento5"></div>
  <div id="evento6"></div>
  <div id="evento7"></div>
  <div id="evento8"></div>
  <div id="evento9"></div>
  <div id="evento10"></div>
  <div id="evento11"></div>
  <div id="evento12"></div>
  <div id="evento13"></div>
  <div id="evento14"></div>
  <div id="evento15"></div>
  <div id="evento16"></div>
  <div id="evento17"></div>
  <div id="evento18"></div>
  <div id="evento19"></div>
  <div id="evento20"></div>
  <div id="evento21"></div>
  <div id="evento22"></div>
  <div id="evento23"></div>
  <div id="evento24"></div>
  <div id="evento25"></div>
  <div id="evento26"></div>
 
</div>
 
 
</div>
</body>
</html>



[Zoff]

Messo così non ha alcun senso...
Cerca di spiegare chiaramente quello che vuoi fare...
Senza trascurare alcun particolare.

Ad esempio.
Ho 5 div con id evento1 evento2 evento3 evento4 evento5 e voglio che ognuno sia mostrato solo il giorno del mese che ha numero uguale a quello nell'id e che sia nascosto tutti gli altri giorni.

[tempestaluna]

mi dispiace crearti tanti problemi , vediamo se così sono un po' più chiara:

nella pagina che ti ho mandato ho fatto 26 eventi (evento1, evento2, evento3... e così via fino a evento26) sono tutti div nascosti grazie al css; se possibile vorrei poter mostrare per esempio solo il

alla data 15/01/2009 tenerlo visibile per 10..20..30 giorni e poi nasconderlo, poi mostrare solo il

alla data 01/02/2009 tenerlo visibile per 10..20..30 giorni e poi nasconderlo e così via per tutti i div che ho; in modo da avere:

per esempio per 10 giorni

oggi 14/01/2009 nessun evento disponibile
oggi 15/01/2009 evento5
oggi 16/01/2009 evento5
oggi 17/01/2009 evento5
...
oggi 24/01/2009 evento5
oggi 25/01/2009 evento5
oggi 26/01/2009 nessun evento disponibile
oggi 27/01/2009 nessun evento disponibile
...
oggi 31/01/2009 nessun evento disponibile
oggi 01/02/2009 evento24
oggi 02/02/2009 evento24
ggi 03/02/2009 evento24
...
oggi 09/02/2009 evento24
oggi 10/02/2009 evento24
oggi 11/02/2009 nessun evento disponibile

/*************************/

in un'altra pagina dove ho fatto un calendario in html a tabelle riesco a far vedere il div nascosto che mi interessa con questo script in cui ho inserito anche la parte di explorer che mi avevi detto tu (spero di averla inserita bene) e provandolo su explorer 7.0, firefox 2.0 e safari funziona bene; mostra e nasconde i div cliccando su un link in questo caso i div con id="eventoX" che ho utilizzato sono 32 quindi in questa pagina ci sono 32 eventi:

Codice: Seleziona tutto

   

   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('evento32');
         oDiv.style.display='none';
      }
   function getElemById(id){
      if(document.getElementById){//Firefox, Opera, Safari, ...
         return document.getElementById(id);
      }else{//Internet Explorer
         return document.all[id];
      }
   }




però non posso utilizzarlo nella pagina che ti ho fatto vedere perchè non fa il controllo sulla data ma mi fa vedere solo il div nascosto che decido io cliccando su un link; ecco perchè ti avevo chiesto se dovevo richiamare lo script che mi avevi mandato tu con un link.

Spero di essere stata un po' più chiara adesso.

[Zoff]

Ok, allora quello che ti serve è questo:

Codice: Seleziona tutto

<html>
<head>
   <title>Esempio calendario</title>
   <script type="text/javascript"><!--
      eventiDaCaricare = new Array(
         //Descrizione
         //Ogni riga  deve essere così formata:
         // ["numero del div", "data di inizio", "data di fine"]
         //NB. Le date sono nella forma MESE / GIORNO / ANNO
         //Es. Mostrare il div evento1 a partire dal 1 gennaio 2009 fino al 21 gennaio 2009
         ["1",   "01/01/2009",    "01/21/2009" ],
         ["2",    "01/10/2009",    "01/21/2009" ],
         ["3",    "01/01/2009",    "01/21/2009" ],
         ["4",    "01/10/2009",    "01/21/2009" ],
         ["5",    "01/01/2009",    "01/21/2009" ],
         ["6",    "01/10/2009",    "01/21/2009" ],
         ["7",    "01/01/2009",    "01/21/2009" ],
         ["8",    "01/10/2009",    "01/21/2009" ],
         ["9",    "01/01/2009",    "01/21/2009" ],
         ["10",    "01/10/2009",    "01/21/2009" ]
      );
      function isTimeToShow(dataInizio, dataFine){
         inizio = Date.parse(dataInizio);
         fine = Date.parse(dataFine);
         adesso = new Date().getTime();
         
         return inizio <= adesso && adesso <= fine;
      }
      function getElemById(id){
         if(document.getElementById){//Firefox, Opera, Safari, ...
            return document.getElementById(id);
         }else{//Internet Explorer
            return document.all[id];
         }
      }
      function caricaEventi(){
         for( i=0; i<eventiDaCaricare.length; i++){
            try{
               if (isTimeToShow(eventiDaCaricare[i][1],eventiDaCaricare[i][2])){
                  getElemById("evento"+(i+1)).style.display = "";
               }else{
                  getElemById("evento"+(i+1)).style.display = "none";
               }
            }catch(eccezione){}
         }
      }
   --></script>
</head>
<body onload="caricaEventi()">
   <div id="evento1">1</div>
   <div id="evento2">2</div>
   <div id="evento3">3</div>
   <div id="evento4">4</div>
   <div id="evento5">5</div>
   <div id="evento6">6</div>
   <div id="evento7">7</div>
   <div id="evento8">8</div>
   <div id="evento9">9</div>
   <div id="evento10">10</div>
</body>

All'inizio vedi questo:

Codice: Seleziona tutto

eventiDaCaricare = new Array(
         //Descrizione
         //Ogni riga  deve essere così formata:
         // ["numero del div", "data di inizio", "data di fine"]
         //NB. Le date sono nella forma MESE / GIORNO / ANNO
         //Es. Mostrare il div evento1 a partire dal 1 gennaio 2009 fino al 21 gennaio 2009
         ["1",   "01/01/2009",    "01/21/2009" ],
         ["2",    "01/10/2009",    "01/21/2009" ],
         ["3",    "01/01/2009",    "01/21/2009" ],
         ["4",    "01/10/2009",    "01/21/2009" ],
         ["5",    "01/01/2009",    "01/21/2009" ],
         ["6",    "01/10/2009",    "01/21/2009" ],
         ["7",    "01/01/2009",    "01/21/2009" ],
         ["8",    "01/10/2009",    "01/21/2009" ],
         ["9",    "01/01/2009",    "01/21/2009" ],
         ["10",    "01/10/2009",    "01/21/2009" ]
      );

Come c'è scritto ogni riga indica il tempo che deve essere mostrato un div e quindi sarai tu a dover cambiare ogni riga secondo le tue esigenze
Il primo numero indica il numero del div,
il secondo campo indica la data del primo giorno in cui mostrare l'evento,
il terzo campo indica la data dell'ultimo giorno in cui mostrare l'evento,
Fai attenzione ad usare la notazione americana per le date!!! MESE / GIORNO / ANNO

Un altra accortezza è che ogni riga apparte l'ultima deve terminare con la virgola!

Spero sia quello che cerchi...

[tempestaluna]

Bravo!!!! ti ringrazio tanto non sai quanto, per di più hai avuto una pazienza infinita con me; adesso non mi rimane che cambiare l'id dei miei div da id="evento1" a id="1" e funziona tutto!!!!

l'ho provato anche su explorer 7.0 e safari nonchè firefox 2.0 e funziona bene 
grazie grazie grazie!!!!!!

[Zoff]

Bravo!!!! ti ringrazio tanto non sai quanto, per di più hai avuto una pazienza infinita con me; adesso non mi rimane che cambiare l'id dei miei div da id="evento1" a id="1" e funziona tutto!!!!

l'ho provato anche su explorer 7.0 e safari nonchè firefox 2.0 e funziona bene 
grazie grazie grazie!!!!!!

Veramente dovresti lasciare evento1, evento2 etc....