Foros del Web » Programando para Internet » Jquery »

No aparece el contenido de mi div a intentar usar algo para poder hacer que aparezca

 Estas en el tema de No aparece el contenido de mi div a intentar usar algo para poder hacer que aparezca en el foro de Jquery en Foros del Web. Estoy usando una función para ocultar y mostrar un elemento en HTML lo que pasa es que cuando inicio la web todo correcto la mi ...
  #1 (permalink)  
Antiguo 23/11/2015, 20:56
 
Fecha de Ingreso: junio-2015
Ubicación: Puebla
Mensajes: 3
Antigüedad: 9 años, 5 meses
Puntos: 0
No aparece el contenido de mi div a intentar usar algo para poder hacer que aparezca
Estoy usando una función para ocultar y mostrar un elemento en HTML lo que pasa es que cuando inicio la web todo correcto la mi div aparece oculto. Pero cuando le doy a un botón para que aparezca la linea del tiempo no aparece, solo aparece el titulo que le puse a ese div

Estoy usando una linea del tiempo y es lo que quiero que aparezca pero no aparece no se si es por usar el display: 'none'; en css o porque, no se si haya algún otro atributo para sustituirlo o que puedo hacer
  #2 (permalink)  
Antiguo 24/11/2015, 05:29
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
código???????
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 24/11/2015, 14:55
 
Fecha de Ingreso: junio-2015
Ubicación: Puebla
Mensajes: 3
Antigüedad: 9 años, 5 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. }
  #4 (permalink)  
Antiguo 24/11/2015, 16:43
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
podrias probar asi:

Código Javascript: 
Ver original
  1. function mostrarLineaTiempo(){
  2. document.getElementById('lineaDelTiempo').style.display = 'Block';
  3. }
  4.  
  5. function ocultarLineaTiempo(){
  6. document.getElementById('lineaDelTiempo').style.display = 'none';
  7. }

obviamente el divi debe tener el estado inicial cargado, por ejemplo:

Código HTML: 
Ver original
  1. <div id="lineaDelTiempo" style="display: none"></div>
__________________
[email protected]
HITCEL
  #5 (permalink)  
Antiguo 24/11/2015, 20:42
 
Fecha de Ingreso: junio-2015
Ubicación: Puebla
Mensajes: 3
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
Ya utilize el codigo que me diste pero me sigue dando el mismo error



https://gyazo.com/9853cb5996cd9b21b9d0efde5b2945b7
  #6 (permalink)  
Antiguo 26/11/2015, 20:50
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 2 meses
Puntos: 39
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
¿ y que se supone que hay en #LineaTiempo? en el código esta vacío...
__________________
velarde23.com - Soluciones Web
  #7 (permalink)  
Antiguo 03/12/2015, 15:04
 
Fecha de Ingreso: noviembre-2015
Mensajes: 59
Antigüedad: 9 años
Puntos: 0
Respuesta: No aparece el contenido de mi div a intentar usar algo para poder hacer qu
Bueno primero si usas bootstrap podrias solo asignar o eliminar las clases que tiene el boostrap para ocultar elementos.

busque pero no encuentro por ningun lado el div lineaDelTiempo

si existe lineaDelTiempoDiv y LineaTiempo.

tambien puede utilizar el las funciones jquery , fadeIn y fadeOut , o SlideDown, slideUp

y tiene que tener en cuenta que no es lo mismo ocultar un elemento que modificar la propiedad display cuando haces esto la posicion del elemento se elimina del DOM de la pagina y muchas veces cuando lo activas pierde algunas propiedades css. por eso te aconsejo que uses lo metodos del jquery o las clases del bootstrap, ya que incluyen los problemas con todos los navegadores(o casi todos)

Etiquetas: aparezca, contenido, html, javascript, poder, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:57.