<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JQuery &#8211; Blog Maria Tech</title>
	<atom:link href="https://www.mariatech.com.mx/blog/categoria/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mariatech.com.mx/blog</link>
	<description>Desarrollo web, tecnologías de la información y marketing digital</description>
	<lastBuildDate>Wed, 13 May 2026 17:43:38 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.4</generator>

<image>
	<url>https://www.mariatech.com.mx/blog/wp-content/uploads/2024/05/cropped-icon_wordpress-32x32.png</url>
	<title>JQuery &#8211; Blog Maria Tech</title>
	<link>https://www.mariatech.com.mx/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Fallo en Bootstrap Collapse desplaza hacia abajo</title>
		<link>https://www.mariatech.com.mx/blog/jquery/fallo-en-bootstrap-collapse-desplaza-hacia-abajo/</link>
					<comments>https://www.mariatech.com.mx/blog/jquery/fallo-en-bootstrap-collapse-desplaza-hacia-abajo/#respond</comments>
		
		<dc:creator><![CDATA[Victor Santillan]]></dc:creator>
		<pubDate>Wed, 05 Jun 2024 21:40:17 +0000</pubDate>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Bootstrap]]></category>
		<category><![CDATA[bootstrap]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[collapse]]></category>
		<guid isPermaLink="false">https://www.mariatech.com.mx/blog/?p=182</guid>

					<description><![CDATA[Cómo resolver el problema cuando al dar clic en un componente de collapse nos envía hasta el final de la pantalla, impidiendo que el usuario vea la información...]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Este es un problema poco común que se nos presentó en la versión de <em>Bootstrap 4</em>, al momento de hacer clic en un componente para desplegar el contenido, enseguida nos envía al final de la pantalla.<br>Nosotros nos dimos cuenta que el error se presenta cuando cualquiera de los componentes tiene una altura muy amplia y eso provoca que se tenga que hacer scroll hacia abajo para poder ver los otros componentes.</p>



<figure class="wp-block-image size-full is-resized"><img fetchpriority="high" decoding="async" width="838" height="573" src="https://www.mariatech.com.mx/blog/wp-content/uploads/2024/06/collapse-2.webp" alt="collapse
" class="wp-image-185" style="width:543px;height:auto" srcset="https://www.mariatech.com.mx/blog/wp-content/uploads/2024/06/collapse-2.webp 838w, https://www.mariatech.com.mx/blog/wp-content/uploads/2024/06/collapse-2-300x205.webp 300w, https://www.mariatech.com.mx/blog/wp-content/uploads/2024/06/collapse-2-768x525.webp 768w" sizes="(max-width: 838px) 100vw, 838px" /></figure>


<p>Existe varias alternativas para darle solución a esto, aquí te dejamos la que encontramos nosotros y nos pareció la mejor.</p>


<pre class="wp-block-code"><code>$(document).on('shown.bs.collapse', function(event) {
  var item_height = event.target.clientHeight,
      window_height = window.innerHeight,
      offset_top = event.target.offsetTop,
      scroll_y = window.scrollY;
  
  if (scroll_y &gt; (window_height - item_height)) {
    $('html, body').animate({
       scrollTop: ((window_height - item_height) / 2) + offset_top
    }, 1000);
  }
}</code></pre>


<h5>Paso a paso</h5>
<ol>
<li>Detectamos cada vez que ocurre el evento de collapse</li>
<li>Definimos las variables con las que vamos hacer nuestros cálculos<br /><strong>item_height</strong>: Altura de nuestro componente<br /><strong>window_height: </strong>Altura de la venta<br /><strong>offset_top: </strong>Distancia de la parte de arriba entre componentes<br /><strong>scroll_y: </strong>Valor del scroll en el eje Y</li>
<li>Si el valor del scroll en eje Y es mayor a la altura de nuestra venta menos el valor del componente quiere decir que el scroll ya fue recorrido hacia abajo y si es el caso entonces se presentará el fallo;</li>
<li>Hacemos que nos retorno hacia arriba procurando que la información del complemento desplazado quede centrada y visible en la ventana para el usuario</li>
</ol>

<p>Referencias:</p>


<p class="wp-block-paragraph"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" target="_blank" rel="noreferrer noopener">https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior</a></p>



<p class="wp-block-paragraph"><a href="https://getbootstrap.com/docs/4.0/components/collapse/" target="_blank" rel="noreferrer noopener">https://getbootstrap.com/docs/4.0/components/collapse/</a></p>



<p class="wp-block-paragraph"><a href="https://stackoverflow.com/questions/31100690/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t" target="_blank" rel="noreferrer noopener">https://stackoverflow.com/questions/31100690/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t</a></p>


<h6>Esperamos que te pueda servir esta solución, si fue así déjanos tu comentario, bye</h6>]]></content:encoded>
					
					<wfw:commentRss>https://www.mariatech.com.mx/blog/jquery/fallo-en-bootstrap-collapse-desplaza-hacia-abajo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Detectar el cambio de un radio button con Jquery</title>
		<link>https://www.mariatech.com.mx/blog/jquery/detectar-cambio-radio-button-jquery/</link>
					<comments>https://www.mariatech.com.mx/blog/jquery/detectar-cambio-radio-button-jquery/#respond</comments>
		
		<dc:creator><![CDATA[Victor Santillan]]></dc:creator>
		<pubDate>Sat, 04 May 2024 03:50:11 +0000</pubDate>
				<category><![CDATA[JQuery]]></category>
		<guid isPermaLink="false">http://localhost.mariatech.com/blog/?p=20</guid>

					<description><![CDATA[Una forma fácil y rápido de detectar el cambio en un radio button con JQuery]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Lo primero que vamos a hacer es identificar el nombre de nuestro input</p>



<pre class="wp-block-code"><code>&lt;input type="radio" id="habilitar-1" <mark style="background-color:#ffff00" class="has-inline-color">name="habilita"</mark> value="1" />
&lt;input type="radio" id="habilitar-0" <mark style="background-color:#ffff00" class="has-inline-color">name="habilita"</mark> value="0" /></code></pre>


<p>Ahora que sabemos el nombre, en JS detectaremos el cambio</p>


<pre class="wp-block-code"><code>$('input&#91;name="habilita"]').change(function(){
//Aquí iría tu código que quieres aplicar
});</code></pre>


<p>Recuerda que para poder hacer uso de Jquery debemos tener integrados los archivos a nuestro proyecto</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.mariatech.com.mx/blog/jquery/detectar-cambio-radio-button-jquery/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
