Foros del Web » Programando para Internet » Javascript »

Refrescar web y cambiar parámetros al hacer clic en un enlace

Estas en el tema de Refrescar web y cambiar parámetros al hacer clic en un enlace en el foro de Javascript en Foros del Web. Hola, existe la posibilidad de recargar una pagina web pero modificar algunos parámetros en la nueva vista? Al hacer clic recargar la pagina pero con ...
  #1 (permalink)  
Antiguo 13/02/2020, 19:21
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Refrescar web y cambiar parámetros al hacer clic en un enlace

Hola, existe la posibilidad de recargar una pagina web pero modificar algunos parámetros en la nueva vista?
Al hacer clic recargar la pagina pero con parámetros diferentes. se puede hacer esto con javascript?
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 13/02/2020, 19:57
 
Fecha de Ingreso: abril-2006
Mensajes: 422
Antigüedad: 14 años, 1 mes
Puntos: 94
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

Cita:
Iniciado por alvaro0022 Ver Mensaje
Hola, existe la posibilidad de recargar una pagina web pero modificar algunos parámetros en la nueva vista?
Al hacer clic recargar la pagina pero con parámetros diferentes. se puede hacer esto con javascript?
con cookies, o en lugar de refrescar, abrir una Url con un HASH diferente

Código HTML:
Ver original
  1. <a href="#mostrar_1">Mostrar un valor 1</a>
  2.  
  3. <a href="#mostrar_2">Mostrar un valor </a>
  4. <p id="valor">aca se mostrara el valor </p>

Código Javascript:
Ver original
  1. <script>
  2. window.addEventListener('hashchange', function(e){
  3. var h = window.location.hash;
  4. var p = document.getElementById("valor");
  5.          if(h=='#mostrar_1'){  p.innerText='Se presiono 1';  }
  6.         else{  p.innerText='Se usa ' +h}
  7. });
  8. </script>
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #3 (permalink)  
Antiguo 13/02/2020, 23:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.681
Antigüedad: 12 años, 2 meses
Puntos: 1116
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

@tuadmin me sorprenden esas facultades adivinatorias :D

@alvaro0022 se mas preciso y descriptivo de lo que pretendes conseguir, tu texto actual deja mucho que desear y es difícil comprender que es lo que buscas
  #4 (permalink)  
Antiguo 14/02/2020, 09:05
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

Hola, siento no haber explicado bien!

Tengo un sitio creado con wordpress, es una especie de galeria de imagenes, al hacer clic las miniaturas de la pagina principal se habre un popup con la descripcion de la imagen, el autor, y un boton para descargarla, ademas debajo aparecen una serie de imagenes relacionadas!

Esta es una captura!



Lo que quiero hacer es que cuando un usuario haga clic en alguna imagen relacionada no me direccione a la pagina de la imagen, sino que se recargue en el mismo popup la imagen elegida.

No se si se entiende.

Aqui dejo el codigo para por las dudas.

Código:
<article <?php post_class( 'preview preview-' . get_post_type() . ' do-spot' ); ?> id="post-<?php the_ID(); ?>">
	<div class="preview-wrapper">
<a rel="<?php the_ID(); ?>" rel="bookmark">
		<?php if ( ( has_post_thumbnail() && ! post_password_required() ) || koji_get_fallback_image_url() ) : ?>

			<?php the_post_thumbnail('large');?>
	</a>	

		<?php endif; ?>
</div><!-- .preview-wrapper -->

<div class="modal-container">
  <input id="modal-toggle" type="checkbox">

  <div class="modal-backdrop">
    <div class="modal-content" >
        <div class="contenido-post-superior">
  <div class="autor-single">Alvaro Alexis Marega</div>
<div class="autor-web"><a href="https://picalls.com">https://picalls.com/picalls</a></div>
  </div>
  <div class="menu-deracha-post">
  	<div class="votar"></div>
    <div class="descargar"><div class="boton-descargar-single"><a href="<?php 
// Ruta de la imagen destacada (tamaño completo)
global $post;
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );
echo $imgDestacada;
?>" download="<?php the_title_attribute ( array( 'post' => get_post_thumbnail_id() ) ); ?>.<?php 
$file = pathinfo( $imgDestacada );
echo $file['extension']; // jpg
?>">
  <div class="boton-descargar"><img class="flecha-boton-down" src="https://picalls.com/wp-content/themes/picalls/imagenes/flecha-descarga.png" alt="flecha descargar">Free Download</div>
  </a></div></div> 
  </div>
    <div class="contiendo-post">
      <?php the_post_thumbnail('large');?>
    </div>	
<div class="tituol-tags">Tags</div>
<div class="tags">
  <?php the_tags(' #','&nbsp&nbsp #'); ?>
</div>

<!-- imagenes relacionadas -->
<div class="imagenes-relacionadas">
<div class="titulo-imagenes-relacionadas">Related images</div>
<div class="contenedor-imagenes-relacionadas">
<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  $args=array(
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>5, // Number of related posts to display.
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="miniatura-imagenes-relacionadas"><a href="<?php the_permalink(); ?>"> <div style="background-image: url(<?php the_post_thumbnail_url('thumbnail')?>); height: 130px; width: 100%; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-position: center;">
</div></a>
</div>
<?php
endwhile;
}
wp_reset_query();
}
?>
</div>
</div>

    </div>
  </div>
</div>

</article>
__________________
Fondos de pantalla
Juegos Gratis
  #5 (permalink)  
Antiguo 14/02/2020, 10:08
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.121
Antigüedad: 16 años
Puntos: 808
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

Puedes usar css sin javascript, para eso, valiéndote del pseudo-selector :target: http://w3.unpocodetodo.info/css3/eje...ria-target.htm
  #6 (permalink)  
Antiguo 14/02/2020, 15:59
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

Gracias por responder, estoy intentando, pero no logro que funcione, creo que el problema esta en el css del modal

Código:
<style>

.modal-container {

}



.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in;
}

.modal-container #modal-toggle {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}



.modal-container #modal-toggle:checked {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  cursor: default;
  opacity: 1;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content {
  background-color: #fff;
  width: 90%;
  height: 100%;
  padding: 10px 30px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 4px;
  z-index: 999;
  pointer-events: auto;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 30px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
  overflow: scroll;
  overflow-x: hidden;
  border-radius: 3px;
}





@media (max-width: 400px) {

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content { left: 0; }
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close {
  color: #666;
  position: absolute;
  right: 2px;
  top: 0;
  padding-top: 7px;
  background: #fff;
  font-size: 16px;
  width: 25px;
  height: 28px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button {
  top: initial;
  bottom: 20px;
  right: 20px;
  background: #4CAF50;
  color: #fff;
  width: 50px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button:hover {
  color: #fff;
  background: #1E824C;
}





.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close:hover { color: #333; }


</style>

instalando otros tipos de modal tampoco funciona, modal con javascript tampoco, no se que puede estar ocurriendo.

Alguna idea?
__________________
Fondos de pantalla
Juegos Gratis
  #7 (permalink)  
Antiguo 14/02/2020, 17:14
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 10 años, 7 meses
Puntos: 7
Respuesta: Refrescar web y cambiar parámetros al hacer clic en un enlace

Hasta el momento logre lo siguiente. Al hacer clic en una imagen de la galería (1), esta se abre en un popup (2), donde figura el nombre del autor, un botón para descargar y las imágenes relacionadas, como se ve en la imagen. El problema es que al hacer clic en las imágenes relacionadas (3), el popup se cierra y abre la pagina en una pantalla completa (4). Lo que quiero lograr es que se refresque el popup con la nueva imagen.



En el punto 4 se puede ver que el popup se cierra y se ve el contenido en la pantalla completa del explorador.
__________________
Fondos de pantalla
Juegos Gratis



La zona horaria es GMT -6. Ahora son las 21:24.