HTML - Ocultar y mostar div

   
Vista:

Ocultar y mostar div

Publicado por Leo (2 intervenciones) el 20/01/2016 21:43:06
Hola gente que tal? tengo el siguiente problema: tengo un mapa en mi web el cual quisiera que se muestre al presionar el boton "BUSCADOR DE ESTACIONES", pero al momento de cargar la pagina el div (id="map") esta visible arriba del carousel. Lo que quiero hacer es ocultarlo cuando se inicie la pagina y mostrarlo solamente cuando se presione el boton. Funciona pero solo si estoy en el inicio de pag (es decir solo con el carousel cargado) ya que si cargo otro contenido al presionar el boton "BUSCADOR DE ESTACIONES" no carga el mapa. Abajo le dejo el codigo. Muchas gracias

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/ypf.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ypf.js"></script>
 
  <title>YPF GRUPO NORTE</title>
</head>
<body>
<header class="mainmenu">
  <nav class="navbar navbar-default" role="navigation">
    <!-- El logotipo y el icono que despliega el menú se agrupan
         para mostrarlos mejor en los dispositivos móviles -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-ex1-collapse">
        <span class="sr-only">Desplegar navegación</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logotipo</a>
    </div>
 
    <!-- Agrupar los enlaces de navegación, los formularios y cualquier
         otro elemento que se pueda ocultar al minimizar la barra -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a Onclick="window.location.href='index.html'" style="cursor:pointer;">Inicio</a></li>
        <li><a id="quienessomos" style="cursor:pointer;">Nosotros</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Productos y Servicios <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a id="agro" style="cursor:pointer;">Agro</a></li>
            <li><a id="ypfgas" style="cursor:pointer;">YPF Gas</a></li>
            <li class="divider"></li>
            <li><a id="serviclub" style="cursor:pointer;">Tarjeta Servi Club</a></li>
            <li><a id="full" style="cursor:pointer;">Full</a></li>
          </ul>
        </li>
      </ul>
 
      <ul class="nav navbar-nav">
        <li><a id="responsabilidad" style="cursor:pointer;">Responsabilidad Social</a></li>
        <li><a id="buscador" onclick="initialize();" style="cursor:pointer;">Buscador de Estaciones</a></li>
      </ul>
    </div>
  </nav>
</header>
  <div id="contenido" class="contenido">
  <div id="map" style="width:100%; height:800px;"></div>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/ypf2.jpg" class="img2">
    </div>
 
    <div class="item">
      <img src="images/ypf3.png" class="img2">
    </div>
 
    <div class="item">
      <img src="images/ypf4.jpg" class="img2">
    </div>
 
    <div class="item">
      <img src="images/ypf6.jpg" class="img2">
    </div>
  </div>
 
  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<footer class="pie">
<div class="icons">Seguinos en:
  <a href="" target="_blank"><img alt="Siguenos en Facebook" src="https://lh3.googleusercontent.com/-NSLbC_ztNls/T6VX0g6z8AI/AAAAAAAAA0A/_vyIBrmZbuY/s48/facebook48.png" width=32 height=32  /></a>
  <a href="" target="_blank"><img src="https://lh6.googleusercontent.com/--aIk2uBwEKM/T3nN1x09jBI/AAAAAAAAAs8/qzDsbw3kEm8/s32/twitter32.png" width=32 height=32 alt="Síguenos en Twitter" /></a>
  <a href="" target="_blank"><img alt="Siguenos en YouTube" src="https://lh5.googleusercontent.com/-TXzlKCbKzWs/T6mYkDhTXyI/AAAAAAAAA1U/vm95Q2KwrYg/s32/youtube32.png" width=32 height=32
  /></a>
</div>
</footer>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Ocultar y mostar div

Publicado por xve (1178 intervenciones) el 21/01/2016 08:37:00
Hola Leo, sobre tu primera duda, simplemente con poner dislplay:none en el estilo del id="map" seria suficiente para que no se visualizara al iniciar, no?

Sobre el tema del carrousel, no entiendo muy bien a que te refieres... hemos probado el código, pero al no disponer de las imágenes, y algún archivo js, no podemos visualizarlo correctamente... nos puedes adjuntar el resto de archivo, o mostrar las imágenes para ver el problema?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ocultar y mostar div

Publicado por leo (2 intervenciones) el 21/01/2016 14:52:02
Gracias por responder xve, ya lo pude solucionar, lo hacia de esa manera con el display none pero solo funcionaba cuando estaba en el index, pero luego ya no. lo solucione llamando al mapa desde otro boton que no sea desde el menu ya que modifique algunas cosas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Ocultar y mostar div

Publicado por xve (1178 intervenciones) el 21/01/2016 16:13:15
Ok, perfecto!!! gracias por comentarlo!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar