Tema: No aparece el contenido de mi div a intentar usar algo para poder hacer que aparezca
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/11/2015, 14:55
Emilio17MC
 
Fecha de Ingreso: junio-2015
Ubicación: Puebla
Mensajes: 3
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
Cita:
Iniciado por xfxstudios Ver Mensaje
código???????
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.     <title>Poetas Poblanos</title>
  9.  
  10.     <!-- Bootstrap -->
  11.     <link href="css/bootstrap.min.css" rel="stylesheet">
  12.  
  13.     <!-- Linea del Tiempo -->
  14.     <link rel="stylesheet" href="css/timeline.css">
  15.     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16.     <script src="js/timeline-min.js"></script>
  17.     <script src="js/lineaTiempo.js"></script>
  18.  
  19.     <!-- Juego -->
  20.     <script src="phaser.min.js"></script>
  21.     <script src="juego/main.js"></script>
  22.  
  23.     <style>
  24.         small{
  25.             font-size: 8px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="col-md-2">
  31.         <p></p>
  32.     </div>
  33.  
  34.     <div class="col-md-8">
  35.         <div id="LineaDelTiempoDiv">
  36.             <h3 class="text-center">Linea del Tiempo</h3>
  37.  
  38.             <div id="LineaTiempo"></div>
  39.         </div>
  40.  
  41.         <div class="poema">
  42.             <div class="col-md-12">
  43.                 <h3>Ánalisis de Poema</h3>
  44.                 <!-- Poema -->
  45.                 <div class="col-md-6">
  46.                     <h4>Poema</h4>
  47.                 </div>
  48.  
  49.                 <!-- Tabla de ritmo -->
  50.  
  51.         <h1 class="text-center">Poetas Poblanos</h1>
  52.  
  53.         <hr>
  54.  
  55.         <div id="juegoDiv" class="center-block" style="padding-left: 30px;"></div>
  56.     </div>
  57.  
  58.     <div class="col-md-2">
  59.         <p></p>
  60.     </div>
  61.  
  62.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  63.     <script src="js/bootstrap.min.js"></script>
  64.   </body>
  65. </html>

El CSS de la Línea del tiempo
Código CSS: 
Ver original
  1. div.timeline-frame {
  2.     -moz-box-sizing: border-box;
  3.     border: 1px solid #bebebe;
  4.     box-sizing: border-box;
  5.     overflow: hidden;
  6.     position: relative;
  7. }
  8.  
  9. div.timeline-content {
  10.     overflow: hidden;
  11.     position: relative;
  12. }
  13.  
  14. div.timeline-axis {
  15.     -moz-box-sizing: border-box;
  16.     border-color: #bebebe;
  17.     border-top-style: solid;
  18.     border-width: 1px;
  19.     box-sizing: border-box;
  20. }
  21.  
  22. div.timeline-axis-grid {
  23.     -moz-box-sizing: border-box;
  24.     border-left-style: solid;
  25.     border-width: 1px;
  26.     box-sizing: border-box;
  27. }
  28.  
  29. div.timeline-axis-grid-minor {
  30.     border-color: #e5e5e5;
  31. }
  32.  
  33. div.timeline-axis-grid-major {
  34.     border-color: #bfbfbf;
  35. }
  36.  
  37. div.timeline-axis-text {
  38.     color: #4d4d4d;
  39.     padding: 3px;
  40.     white-space: nowrap;
  41. }
  42.  
  43. div.timeline-axis-text-minor {
  44. }
  45.  
  46. div.timeline-axis-text-major {
  47. }
  48.  
  49. div.timeline-event {
  50.     -moz-box-sizing: border-box;
  51.     background-color: #d5ddf6;
  52.     border-color: #97b0f8;
  53.     box-sizing: border-box;
  54.     color: #1a1a1a;
  55.     display: inline-block;
  56. }
  57.  
  58. div.timeline-event-selected {
  59.     background-color: #fff785;
  60.     border-color: #ffc200;
  61.     z-index: 999;
  62. }
  63.  
  64. /* TODO: use another color or pattern? */
  65. div.timeline-event-cluster {
  66.     background: url('img/cluster_bg.png') #97b0f8;
  67.     color: #ffffff;
  68. }
  69.  
  70. div.timeline-event-cluster div.timeline-event-dot {
  71.     border-color: #d5ddf6;
  72. }
  73.  
  74. div.timeline-event-box {
  75.     -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  76.     border-radius: 5px;
  77.     border-style: solid;
  78.     border-width: 1px;
  79.     text-align: center;
  80. }
  81.  
  82. div.timeline-event-dot {
  83.     -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  84.     border-radius: 5px;
  85.     border-style: solid;
  86.     border-width: 5px;
  87. }
  88.  
  89. div.timeline-event-range {
  90.     -moz-border-radius: 2px; /* For Firefox 3.6 and older */
  91.     border-radius: 2px;
  92.     border-style: solid;
  93.     border-width: 1px;
  94. }
  95.  
  96. div.timeline-event-range-drag-left {
  97.     cursor: w-resize;
  98.     z-index: 1000;
  99. }
  100.  
  101. div.timeline-event-range-drag-right {
  102.     cursor: e-resize;
  103.     z-index: 1000;
  104. }
  105.  
  106. div.timeline-event-line {
  107.     -moz-box-sizing: border-box;
  108.     border-left-style: solid;
  109.     border-left-width: 1px;
  110.     box-sizing: border-box;
  111. }
  112.  
  113. div.timeline-event-content {
  114.     margin: 5px;
  115.     overflow: hidden;
  116.     white-space: nowrap;
  117. }
  118.  
  119. div.timeline-groups-axis {
  120.     -moz-box-sizing: border-box;
  121.     border-color: #bebebe;
  122.     border-width: 1px;
  123.     box-sizing: border-box;
  124. }
  125.  
  126. div.timeline-groups-axis-onleft {
  127.     border-style: none solid none none;
  128. }
  129.  
  130. div.timeline-groups-axis-onright {
  131.     border-style: none none none solid;
  132. }
  133.  
  134. div.timeline-groups-text {
  135.     color: #4d4d4d;
  136.     padding-left: 10px;
  137.     padding-right: 10px;
  138. }
  139.  
  140. div.timeline-currenttime {
  141.     -moz-box-sizing: border-box;
  142.     background-color: #ff7f6e;
  143.     box-sizing: border-box;
  144.     width: 2px;
  145. }
  146.  
  147. div.timeline-customtime {
  148.     -moz-box-sizing: border-box;
  149.     background-color: #6e94ff;
  150.     box-sizing: border-box;
  151.     cursor: move;
  152.     width: 2px;
  153. }
  154.  
  155. div.timeline-navigation {
  156.     -moz-border-radius: 2px; /* For Firefox 3.6 and older */
  157.     -moz-box-sizing: border-box;
  158.     background-color: #f5f5f5;
  159.     border: 1px solid #bebebe;
  160.     border-radius: 2px;
  161.     box-sizing: border-box;
  162.     color: #808080;
  163.     font-family: arial;
  164.     font-size: 20px;
  165.     font-weight: bold;
  166. }
  167.  
  168. div.timeline-navigation-new,
  169. div.timeline-navigation-delete,
  170. div.timeline-navigation-zoom-in,
  171. div.timeline-navigation-zoom-out,
  172. div.timeline-navigation-move-left,
  173. div.timeline-navigation-move-right {
  174.     -moz-box-sizing: border-box;
  175.     box-sizing: border-box;
  176.     cursor: pointer;
  177.     float: left;
  178.     height: 36px;
  179.     padding: 10px;
  180.     text-decoration: none;
  181.     width: 36px;
  182. }
  183.  
  184. div.timeline-navigation-new {
  185.     background: url('img/16/new.png') no-repeat center;
  186. }
  187.  
  188. /* separator between new and navigation buttons */
  189. div.timeline-navigation-new-line {
  190.     border-right: 1px solid #bebebe;
  191. }
  192.  
  193. div.timeline-navigation-delete {
  194.     background: url('img/16/delete.png') no-repeat center;
  195. }
  196.  
  197. div.timeline-navigation-zoom-in {
  198.     background: url('img/16/zoomin.png') no-repeat center;
  199. }
  200.  
  201. div.timeline-navigation-zoom-out {
  202.     background: url('img/16/zoomout.png') no-repeat center;
  203. }
  204.  
  205. div.timeline-navigation-move-left {
  206.     background: url('img/16/moveleft.png') no-repeat center;
  207. }
  208.  
  209. div.timeline-navigation-move-right {
  210.     background: url('img/16/moveright.png') no-repeat center;
  211. }

El JS para ocultar y mostrar esta con JQuery
Código Javascript: 
Ver original
  1. function mostrarLineaTiempo(){
  2.     $("#lineaDelTiempo").css("display", "block");
  3. }
  4.  
  5. function ocultarLineaTiempo(){
  6.     $("#lineaDelTiempo").css("display", "none");    
  7. }