¿Cómo ocultar un div y llamarlo solo mediante URL?

  • Autor Autor csnotcs
  • Fecha de inicio Fecha de inicio
C

csnotcs

Iota
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas, pues queria saber si se puede hacer lo siguiente:

Tengo dos divs, uno es "X" y el otro es "Y" ahora;

Quiero tener ambos divs en una pagina, es decir, "X" e "Y" juntos, pero que el div "Y" solo se muestre al llamarlo en la URL, o sea que no se vea, a no ser que uno entre en example.org/pagina.html#Y

¿Hay forma de hacerlo?
 
Solo es posible usando JavaScript. Detectas si está el #Y en la URL y, en ese caso, añades la clase a ese div que lo hace visible.
 
Mediante get puedes hacerlo que se muestre cuando llames a la url ?=x
 
astillazo dijo:
Solo es posible usando JavaScript. Detectas si está el #Y en la URL y, en ese caso, añades la clase a ese div que lo hace visible.
Hacer clic para expandir...

pfff... yo de java un pepino xD

¿Como se le llama a esa función que mencionas? para buscar un tuto en google :fatigue:
 
Con javascript puedes hacerlo fácilmente amigo, una manera puede ser la siguiente.

Tener por defecto la caja div Y, con el atributo en CSS:

Insertar CODE, HTML o PHP: 
display: none

Con el método getElementById('IDDeLaCaja'), obtienes la caja Y y la guardas en una variable.

Luego simplemente tendrías que crear un pequeño condicional que básicamente haga lo siguiente, obtener la url de la ventana actual, y compararlo con la dirección en donde quieres que se visualice tu caja Y, en caso de que sean iguales, a la variable que contiene a la caja (La que hemos definido anteriormente), le podrías cambiar ahora su propiedad display: none, por display: block (por ejemplo), la url de la ventana actual del navegador la obtienes con:

Insertar CODE, HTML o PHP: 
window.location.href

Y el estilo lo podrías cambiar con:

Insertar CODE, HTML o PHP: 
nombreDeTuVariable.style.display = 'block'

Espero que esto te oriente un poco y logres conseguir el resultado que buscas. Un saludo
 
csnotcs dijo:
pfff... yo de java un pepino xD

¿Como se le llama a esa función que mencionas? para buscar un tuto en google :fatigue:
Hacer clic para expandir...

El código javascript (lo he hecho sin probarlo) sería el siguiente:
Insertar CODE, HTML o PHP: 
jQuery(function() {
    if (window.location.hash === '#Y') {
        jQuery('.CLASE_DEL_DIV').addClass('NOMBRE_DE_CLASE_QUE_HACE_VISIBLE_EL_DIV');
    }
});

Deberías ponerlo en un archivo javascript que se ejecute al cargar esa página.
 
astillazo dijo:
El código javascript (lo he hecho sin probarlo) sería el siguiente:
Insertar CODE, HTML o PHP: 
jQuery(function() {
    if (window.location.hash === '#Y') {
        jQuery('.CLASE_DEL_DIV').addClass('NOMBRE_DE_CLASE_QUE_HACE_VISIBLE_EL_DIV');
    }
});

Deberías ponerlo en un archivo javascript que se ejecute al cargar esa página.
Hacer clic para expandir...

A ver si entendí...

Entonces, deberia añadir dos div, uno con el div que quiero mostrar, y otro que active ese div ¿no?

E igualmente puse un solo div, y nada, se ve siempre sin llamar al #Y
Porque hice eso, pero el div sigue apareciendo visible desde un principio sin el #Y en la URL :sorrow:
 
[MENTION=173661]csnotcs[/MENTION]

Solo debes crear un div ejemplo:

HTML: 
<div style="display:none;">Soy de forobeta</div>

añades css:


HTML: 
  .mostrar {    display:block !important;  }
Y jquery:

HTML: 
jQuery(function() {  if (window.location.hash === '#Forobeta') {$( "div" ).addClass( "mostrar" );   }});

Ejemplo http://www.cubicfactory.com/jseditor/welcome/90428/#Forobeta
 
SnakeNet dijo:
csnotcs

Solo debes crear un div ejemplo:

HTML: 
<div style="display:none;">Soy de forobeta</div>

añades css:


HTML: 
  .mostrar {    display:block !important;  }
Y jquery:

HTML: 
jQuery(function() {  if (window.location.hash === '#Forobeta') {$( "div" ).addClass( "mostrar" );   }});

Ejemplo http://www.cubicfactory.com/jseditor/welcome/90428/#Forobeta
Hacer clic para expandir...

Algo estoy haciendo mal.

Tengo esto:

mi head:

Insertar CODE, HTML o PHP: 
<head>        <title>EXAMPLE</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link href="https://fonts.googleapis.com/css?family=Nova+Square" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="example.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
        <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
        <script>
            jQuery(function() {  if (window.location.hash === '#Forobeta') {$( ".ex" ).addClass( ".mostrar" );   }});
        </script>
    </head>

mi body:

Insertar CODE, HTML o PHP: 
<body>
        <div class="ex">Soy de forobeta</div>

</body>

mi css:

Insertar CODE, HTML o PHP: 
.ex {
  display:none;
}


 .mostrar {
     display:block !important;  
}

Sin embargo, creí que habia hecho algo mal, y copie y pegue el codigo de la web de ejemplo. Y sigue sin funcionar 😛8:

¿Alguna idea de que hago mal?
 
csnotcs dijo:
Algo estoy haciendo mal.

Tengo esto:

mi head:

Insertar CODE, HTML o PHP: 
<head>        <title>EXAMPLE</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link href="https://fonts.googleapis.com/css?family=Nova+Square" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="example.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
        <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
        <script>
            jQuery(function() {  if (window.location.hash === '#Forobeta') {$( ".ex" ).addClass( ".mostrar" );   }});
        </script>
    </head>

mi body:

Insertar CODE, HTML o PHP: 
<body>
        <div class="ex">Soy de forobeta</div>

</body>

mi css:

Insertar CODE, HTML o PHP: 
.ex {
  display:none;
}


 .mostrar {
     display:block !important;  
}

Sin embargo, creí que habia hecho algo mal, y copie y pegue el codigo de la web de ejemplo. Y sigue sin funcionar 😛8:

¿Alguna idea de que hago mal?
Hacer clic para expandir...

Solo falla addClass( ".mostrar" ); es sin el punto. addClass( "mostrar" );
 
No seria mas facil hacer un simple codigo en Php. Con una sencilla sentencia Get en la url podras mostrar el Div que mencionas
 
SnakeNet dijo:
Ese es el unico error ahora revisa que estés poniendo #Forobeta respetando la mayúscula, he revisado tu código y ese era el unico error.
Hacer clic para expandir...

mmm... Lo puse así, e incluso probé otro nombre, e igual, no me aparece nada.
 
Mira que es mas facil asi:
En el html coloca dos divs
div id="x"
div id="y" --- a este le agregas un display none;
Entonces en tu url una variable cualquiera
miweb.com?x=mostrar

y haces un get con php y luego un if para mostrar un div u otro
$x = $_GET['x']; -- aqui recibes la variable
if ($x != ""):
//mostrar div x
endif;

Con eso se resuelve el problema 😉
 
raul777 dijo:
Mira que es mas facil asi:
En el html coloca dos divs
div id="x"
div id="y" --- a este le agregas un display none;
Entonces en tu url una variable cualquiera
miweb.com?x=mostrar

y haces un get con php y luego un if para mostrar un div u otro
$x = $_GET['x']; -- aqui recibes la variable
if ($x != ""):
//mostrar div x
endif;

Con eso se resuelve el problema 😉
Hacer clic para expandir...

Puse esto:

Insertar CODE, HTML o PHP: 
<html>    <head> <title>f</title>
        <link rel="stylesheet" type="text/css" href="f.css">
    </head>
<body>
    <div id="x">
    </div>
    <div id="y">
        FFF
    </div>
    
   <?php
$x = $_GET['x'];
if ($x != ""):
endif;
?>
    
</body>
</html>

Pero al entrar en la URL pura, sin ?x

me sale el div Y igual.
 
Última edición:
PHP: 
<html>    <head> <title>f</title>
    </head>
    <link rel="stylesheet" type="text/css" href="f.css">
</html>
<body>
    <div id="x">
Hello
    </div>
    
    
   <?php
$x = $_GET['x'];
if ($x != ""):
<div id="y">
Soy el Div Y :)
</div>
endif;
?>

</body>

Colocalo asi 🙂
 
raul777 dijo:
PHP: 
<html>    <head> <title>f</title>
    </head>
    <link rel="stylesheet" type="text/css" href="https://forobeta.com/f.css">
</html>
<body>
    <div id="x">
Hello
    </div>
    
    
   <?php
$x = $_GET['x'];
if ($x != ""):
<div id="y">
Soy el Div Y :)
</div>
endif;
?>

</body>

Colocalo asi 🙂
Hacer clic para expandir...

Insertar CODE, HTML o PHP: 
Parse error: syntax error, unexpected '<' in /ssss.meta.n2.jp/l/index.html on line 14

Como que no entiende el div Y 🙁
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

WallpapersAnimeSV
Tutorial: Cómo ocultar mis comentarios en el gadget últimos comentarios en Blogger
Respuestas
1
Visitas
904
Castuera
C
A
¿Cómo ocultar la barra de scroll horizontal?
Respuestas
4
Visitas
535
astudiodigital
A
G
¿Cómo ocultar la URL de un banner de afiliado?
Respuestas
9
Visitas
12K
8bio
8bio
Mcalderon
¿Cómo ocultar una página para invitados en mi sitio web?
Respuestas
0
Visitas
610
Mcalderon
Mcalderon
Atrás
Arriba