Con éxito

Notas

Error

Session expiration Your session is going to expireClick here to extend

Presupuesto

Proyecto pequeño <800

Publicado el

10/04/13 9:03

Cliente

ben***

Este proyecto ha expirado

Publica un proyecto similar y recibe ofertas sin compromiso alguno.

¡Publica un proyecto similar ahora!

Descripción

Hola,

Es la primera vez que pruebo esta web, ya que no he encontrado solución alguna a mi problema. He conseguido crear lo que tenía en mente (un calendario a medida), pero ahora necesito cambiar algún "detalle". Un detalle es mantener los meses fijos en el scroll vertical, pero que en el horizontal continúe como debe ser. Lo que querría que se mantenga lo marrón (th), como aquí, he probado a poner la posición absoluta o fixed, pero me superpone todos los meses en uno... la cosa es que los meses tienen que ir dentro pero fuera... ¿se os ocurre algo? he usado como "guia" este ejemplo: http://www.cssplay.co.uk/menu/tablescroll el método 1, lo que lo diferencia de mi tabla es que el tamaño de los th de thead no es el mismo que los td del tbody. (La imagen de abajo es lo que tengo y cuando bajo el scroll desaparecen los marrones, en vez de quedarse). http://i47.tinypic.com/35lgi9k.jpg"/>

Entonces el código que tengo es el siguiente en css:

.calendario {position:relative} .outer {position:relative;padding:4em 0 3em 0;height:550px;width:900px;} .innera {overflow:scroll;width:900px;height:550px;}

.outer thead tr {height:1.5em;left:0;}

.outer th {width:78px;text-align:center;display: table-cell;vertical-align: inherit;} .outer th {background:#724a10;color:#fff;}

.outer .dk {background:#fff;}

En la jsp:

                      <div class="calendario">                                              <div class="outer">                                 <div class="innera">                                     <table id="tablaResultadoCalendario">                                     </table>                                 </div>                             </div>                         </div>  

En javaScript:

function cargarCalendario(){     var idProfesional = document.formulario.idProfesional.value;     var contador = 0;     var mes = 0;     var ano = 2013;     var arrayEventos = new Array(new Objeto4());     var idGrupoFuncional = 0;     var arrayIdProfesionales = new Array();     var diasSemana = new Array("D","L","M","X","J","V","S");     var contenidoNom = null;          diasEnMes();     $.ajax({             url: contextPath + "/cargarEventos.action?",             dataType: 'json',             async: false,             data: {                 idGrupoFuncional: idGrupoFuncional              },              success:                 function(data){               $.each(data, function(i, registroEventos){                   arrayEventos[i] = new Objeto4();                   arrayEventos[i].title = registroEventos.descripcion;                   arrayEventos[i].start = registroEventos.desde;                   arrayEventos[i].end = registroEventos.hasta;                   arrayEventos[i].tipo = registroEventos.tbTipoEventoIdEvento;                   arrayEventos[i].tip = registroEventos.comentario;                   arrayEventos[i].profesional = registroEventos.idProfesional;                 });                  }     });

    var contenido0 = "<thead><tr><td></td>";     for(var k = 0; k<listaMeses.length; k++) {         contenido0 += "<th scope='col' colspan='"+listaDias[k]+"'>"+listaMeses[k]+"</th>";     }     contenido0 += "</thead>";     $("#tablaResultadoCalendario").append(contenido0);          $.getJSON(contextPath + "/profesionalesReferente.action?",                {                 referente: idProfesional                  },                   function(data){                                      $.each(data, function(i, profesional){                             mes = 0;                                                         contenidoNom = "<tr><td></td>";                             for(var k = 0; k<listaMeses.length; k++) {                                 for(var a = 0; a<listaDias[k]; a++){                                     var diaReal = a+1;                                     var fecha = new Date(ano, k, diaReal);                                      contenidoNom += "<td bgcolor='#CBEAEB'>"+diasSemana[fecha.getDay()]+"</td>";                                 }                             }                                                          contenidoNom += "</tr>";                             $("#tablaResultadoCalendario").append(contenidoNom);

                            var contenido1 = "<tr><td>"+profesional.apellido1+" "+profesional.apellido2+", "+profesional.nombre+"</td>";                             contador = 0;                             for(var j = 0; j<totalDias; j++) {                                 if(contador == listaDias[mes]){                                     contador = 0;                                     mes++;                                 }                                 var mesReal = mes + 1;                                 var dia = contador + 1;                                 var idEvento = profesional.idProfesional+"-"+ano+"-"+mesReal+"-"+dia;                                 contenido1 += "<td id='"+idEvento+"' onClick='javascript:nuevoEvento(this.id)'>"+dia+"</td>";                                 contador++;                             }                             contenido1 += "<tr/>";                             $("#tablaResultadoCalendario").append(contenido1);                             arrayIdProfesionales[i] = profesional.idProfesional;                                                    });                                      cargarDatosCalendario(arrayIdProfesionales, arrayEventos, ano, listaDias);             }     ); }