cargar mensaje en DIV

Niñerola · #1 (**permalink**) 12/04/2010, 14:41

Hola a todos, tengo una consulta que me gustaría resolver....

He buscado en internet y he encontrado un calendario que funciona con javascript. en un archivo XML pones la informacion de cada día, y dicha informacion se muestra en el calendario. Si haces clic, se abre una ventana con la información detallada.

Lo que me gustaría a mi sería que la información, en lugar de abrirse en una ventana, se mostrara en una capa.

La estructura de la zona del calendario es esta

Código HTML:

Ver original<table width="900" border="0" align="center">
  <tr>
    <td width="35">&nbsp;</td>
    <td width="620"><iframe height="300" width="580" name="mesos" src="calendari.html" marginheight="0" frameborder="0" marginwidth="0" scrolling="no">
</iframe> // el archivo CALENDARI.HTML  contiene el CALENDARIO</td>
    <td width="231"><div id="info"></div>  <!-- ESTE DIV DEBE MOSTRAR LA INFORMACION -->
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    <p id="cos">Para ver los detalles<br />
      haz clic encima del día marcado.
    </p></td>
  </tr>
</table>

Este es el código de la página que contiene el CALENDARIO

Código HTML:

Ver original<html>
<head>
<title>calendari</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="calendario.css" rel="stylesheet" type="text/css" media="all" />
<script src="calendario.js" type="text/javascript"></script>
<script type="text/javascript">
MesSeleccionado=0;
</script>
<div id="boxcalendario">
<script type="text/javascript">Calendari(0);</script>
</div></body></html>

El archivo calendario.js contiene este código

Código Javascript:

Ver originalvar getCalendario = null;
var xmlCalendario = null;
var CualMes=0;
 
function Calendari(QueMes){
    if (window.XMLHttpRequest){
        getCalendario=new XMLHttpRequest()
    }else if (window.ActiveXObject){
        getCalendario=new ActiveXObject("Microsoft.XMLHTTP")
    }
    if (getCalendario){
        var url="calendario.xml";
        getCalendario.onreadystatechange=CambioDeEstado;
        getCalendario.open("GET",url,true);
        getCalendario.send(null);
        CualMes=QueMes;
    }else{
        alert ("El teu explorador no suporta XMLHttpRequest");
    }
}
 
function CambioDeEstado(){
    if (getCalendario.readyState == 4){
        xmlCalendario = getCalendario.responseXML;
        xmlCalendario = xmlCalendario.getElementsByTagName('activitat');
        setCal(CualMes);
    } 
} 
 
function bisiesto(Anio) {
    if (Anio % 4 == 0)
    return true
    return false
}
 
function diasPorMes(mes, Anio) {
var meses = new Array(12)
meses[1] = 31; // Enero
meses[2] = (((Anio % 4 == 0) && (Anio % 100 != 0)) || (Anio % 400 == 0)) ? 29 : 28
meses[3] = 31 // Marzo
meses[4] = 30 // Abril
meses[5] = 31 // Mayo
meses[6] = 30 // Junio
meses[7] = 31 // Julio
meses[8] = 31 // Agosto
meses[9] = 30 // Septiembre
meses[10] = 31 // Octubre
meses[11] = 30 // Noviembre
meses[12] = 31 // Diciembre
return meses[mes]
}
 
function getNombreDelMes(mes) {
var meses = new Array(12)
meses[1] = "Gener"
meses[2] = "Febrer"
meses[3] = "Març"
meses[4] = "Abril"
meses[5] = "Maig"
meses[6] = "Juny"
meses[7] = "Juliol"
meses[8] = "Agost"
meses[9] = "Setembre"
meses[10] = "Octubre"
meses[11] = "Novembre"
meses[12] = "Desembre"
return meses[mes]
}
 
function setCal(QueMes) {
    var now = new Date()
    var anio = now.getYear()
    if (anio < 1000) {anio+=1900}
    var mes = now.getMonth()+QueMes
    if (now.getMonth()+QueMes > 11) {mes-=12;anio++}
    if (now.getMonth()+QueMes < 0) {mes+=12;anio--}
    var fecha = now.getDate()
    var primerDia = new Date(anio, mes, 1)
    var primerDia2 = primerDia.getDay()
    primerDia = null
    var dias = diasPorMes(mes+1, anio)
    drawCal(primerDia2 + 1, dias, fecha, mes+1, anio)
}
 
function drawCal(firstDay, lastDate, date, Mes, Anio) {
var now = new Date()
var codigo = ""
codigo += '<table class="tabla">'
codigo += '<tr><td class="encabezado" colspan="7">'
codigo += getNombreDelMes(Mes) + ' ' + Anio 
codigo += '</td></tr>'
 
var diasSemana = new Array(7)
diasSemana[0] = "<acronym title=\"Diumenge\">&nbsp;Diumenge&nbsp;</acronym>"
diasSemana[1] = "<acronym title=\"Dilluns\">&nbsp;&nbsp;&nbsp;Dilluns&nbsp;&nbsp;</acronym>"
diasSemana[2] = "<acronym title=\"Dimarts\">&nbsp;&nbsp;Dimarts&nbsp;&nbsp;</acronym>"
diasSemana[3] = "<acronym title=\"Dimecres\">&nbsp;Dimecres&nbsp;&nbsp;</acronym>"
diasSemana[4] = "<acronym title=\"Dijous\">&nbsp;&nbsp;Dijous&nbsp;&nbsp;&nbsp;</acronym>"
diasSemana[5] = "<acronym title=\"Divendres\">&nbsp;Divendres</acronym>"
diasSemana[6] = "<acronym title=\"Dissabte\">&nbsp;Dissabte&nbsp;</acronym>"
 
codigo += '<tr>'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
codigo += '<td class="celdaDiaSemana">' + diasSemana[dayNum] + '</td>' 
}
codigo += '</tr>'
 
var cDia = 1
var curCell = 1
 
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
codigo += '<tr>'
for (var col = 1; col <= 7; ++col) {
if (cDia > lastDate)
break
if (curCell < firstDay) {
codigo += '<td></td>';
curCell++
} else {
var textoCelda = cDia;
var textoTd = '<td class="celda">'
 
for (i=0;i<xmlCalendario.length;i++){
    var fecha = xmlCalendario[i].getAttribute('data');
    if (fecha == cDia+ "-" + Mes + "-" + Anio){
        var titulo = xmlCalendario[i].getAttribute('event');
        var descripcion = xmlCalendario[i].getAttribute('descripcio');
        textoCelda = '<a href="#" class="diacita" onclick="alert(\''+descripcion+'\');return false" title="'+titulo+'">' + cDia + '</a>'; // esta funcion quiero sustituirla para que se muestre el contenido DESCRIPCIO en la DIV INFO
        textoTd = '<td class="celdacita">'
    }
}
 
if (cDia == date && Mes == now.getMonth()+1) {
textoTd = '<td class="hoy">'
}
 
codigo += textoTd + textoCelda + '</td>'
cDia++
}
}
codigo += '</tr>'
}
 
codigo += '</table>'
document.getElementById("boxcalendario").innerHTML=codigo;
}