Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/sqrtyhjzaqx471/public_html/wp-includes/functions.php on line 6121

Warning: Cannot modify header information - headers already sent by (output started at /home/sqrtyhjzaqx471/public_html/wp-includes/functions.php:6121) in /home/sqrtyhjzaqx471/public_html/wp-content/plugins/bbpress/includes/replies/functions.php on line 2160

Warning: Cannot modify header information - headers already sent by (output started at /home/sqrtyhjzaqx471/public_html/wp-includes/functions.php:6121) in /home/sqrtyhjzaqx471/public_html/wp-content/plugins/bbpress/includes/replies/functions.php on line 2161
» All Posts https://softechquery.com/categories/html/feed Fri, 09 May 2025 06:03:01 +0000 https://bbpress.org/?v=2.6.11 en-US https://softechquery.com/discussion/how-to-make-horizontal-scrollable-div-in-a-mobile-view/#post-107 <![CDATA[Reply To: How to make horizontal scrollable div in a mobile view]]> https://softechquery.com/discussion/how-to-make-horizontal-scrollable-div-in-a-mobile-view/#post-107 Mon, 30 Sep 2024 11:45:18 +0000 avi Just try to apply flex none to the div to keep their size and a specify media query where you want desktop to start.

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}
]]> https://softechquery.com/discussion/how-to-make-horizontal-scrollable-div-in-a-mobile-view/#post-106 <![CDATA[How to make horizontal scrollable div in a mobile view]]> https://softechquery.com/discussion/how-to-make-horizontal-scrollable-div-in-a-mobile-view/#post-106 Mon, 30 Sep 2024 11:44:20 +0000 avi I want to make the content of a div horizonatally scrollable in mobile view.
I want to make like this :
gif

]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-105 <![CDATA[Reply To: How to set 100vw width for the animation of an axis in GSAP animation]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-105 Mon, 30 Sep 2024 11:37:00 +0000 avi @Vanshika thanks for the solution

]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-104 <![CDATA[Reply To: How to set 100vw width for the animation of an axis in GSAP animation]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-104 Mon, 30 Sep 2024 11:36:35 +0000 vanshika You can animate an HTML element with a class of “box” by adding a single change in gsap code in your JS Code:
gsap.to(".box", { xPercent: -200 });

]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-103 <![CDATA[How to set 100vw width for the animation of an axis in GSAP animation]]> https://softechquery.com/discussion/how-to-set-100vw-width-for-the-animation-of-an-axis-in-gsap-animation/#post-103 Mon, 30 Sep 2024 11:33:40 +0000 avi I want to make a animation of a div which is 200px width and i wanna animate it for 100vw
My code is given Below and it’s works but the animation will be stopped after the 200px of 100vw width :

HTML Code :

<div class="boxes2">
      <div class="box2"></div>
       <div class="nav">
        <button id="play">play</button>
       <button id="pause">pause</button>
       <button id="resume">resume</button>
       <button id="reverse">reverse</button>
       <button id="restart">restart</button>
      </div>
</div>

JS Code :

var tween = gsap.to(".box2", {
  duration: 4,
  x: '100vw', 
  rotation: 360, 
  ease: "none",
  paused: true
});

// click handlers for controlling the tween instance...
document.querySelector("#play").onclick = () => tween.play();
document.querySelector("#pause").onclick = () => tween.pause();
document.querySelector("#resume").onclick = () => tween.resume();
document.querySelector("#reverse").onclick = () => tween.reverse();
document.querySelector("#restart").onclick = () => tween.restart();

Here is my Preview :

See the Pen GSAP Annimation

]]>