Issue with carousel functionality being disrupted by resizing of the window

Question

Issue with carousel functionality being disrupted by resizing of the window

I have lined up a series of 3 divs floating to the left in a straight line, each spanning the width of the page. Here is an example of the HTML structure:

<div class="Horizontal-Wrapper">
      <div class="Horizontal-Section">
        <div class="Project-Wrapper">
          <div class="Project-Box" id="PJB1"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>
          <div class="Project-Box" id="PJB2"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>
        </div>
       </div>
       <div class="Horizontal-Section">
        <div class="Project-Wrapper">
          <div class="Project-Box" id="PJB3"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>
          <div class="Project-Box" id="PJB4"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>
        </div>
       </div>
       <div class="Horizontal-Section">
        <div class="Project-Wrapper">
          <div class="Project-Box" id="PJB5"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>
          <div class="Project-Box" id="PJB6"><div class="Project-Box-Overlay"><h2>Splash</h2><p>Industries define the ideal selection for both wholesale and retail quantities of high quality</p></div></div>          
        </div>
       </div>        
     </div>

When a button is clicked, it should move to the next div. I achieved this using the following script;

   var inner_width = $('body').innerWidth();
   $('#next').on('click', function () {
      $('.Horizontal-Section').animate({'left': 'inner_width' +'px'});
   });

The issue I am encountering is that the scrolling behavior gets disoriented when resizing the browser, as I cannot obtain the correct page width.

javascript jquery html css

Answer 1

Answer №1

To ensure proper resizing and positioning of elements, you must adjust the inner_width value accordingly.

Assuming that .Horizontal-Section has a CSS width of 100%.

var inner_width = $('body').innerWidth();

$('#next').on('click', function () {
    $('.Horizontal-Section').animate({'left': inner_width +'px'});
});

$(window).resize(function () {
    inner_width = $('body').innerWidth();
    $('.Horizontal-Section').css({'left': inner_width +'px'});
});

Answer 2

To ensure proper resizing and positioning of elements, you must adjust the inner_width value accordingly.

Assuming that .Horizontal-Section has a CSS width of 100%.

var inner_width = $('body').innerWidth();

$('#next').on('click', function () {
    $('.Horizontal-Section').animate({'left': inner_width +'px'});
});

$(window).resize(function () {
    inner_width = $('body').innerWidth();
    $('.Horizontal-Section').css({'left': inner_width +'px'});
});

Answer 3

Answer №2

The issue is caused by failing to continuously check the browser width after the initial load. The script only checks once and assigns the value to a variable.

To solve this problem, you can use the following code snippet:

var innerWidth = $('body').innerWidth();
$(window).resize(function() {
  innerWidth = $('body').innerWidth();
});

Answer 4

The issue is caused by failing to continuously check the browser width after the initial load. The script only checks once and assigns the value to a variable.

To solve this problem, you can use the following code snippet:

var innerWidth = $('body').innerWidth();
$(window).resize(function() {
  innerWidth = $('body').innerWidth();
});

Answer 5

Answer №3

If you want to ensure your code runs when the document is ready or when the window is resized, you can encapsulate it in a function and then call that function using (document).ready(); and (window).resize();

Here's an example of how you can achieve this:

JavaScript

<script>
 $(document).ready(func_name);
 $(window).resize(func_name);

 function func_name(){
  var inner_width = $('body').innerWidth();
   $('#next').on('click', function () {
      $('.Horizontal-Section').animate({'left': 'inner_width' +'px'});
   });
 }
</script>

Answer 6

If you want to ensure your code runs when the document is ready or when the window is resized, you can encapsulate it in a function and then call that function using (document).ready(); and (window).resize();

Here's an example of how you can achieve this:

JavaScript

<script>
 $(document).ready(func_name);
 $(window).resize(func_name);

 function func_name(){
  var inner_width = $('body').innerWidth();
   $('#next').on('click', function () {
      $('.Horizontal-Section').animate({'left': 'inner_width' +'px'});
   });
 }
</script>

Issue with carousel functionality being disrupted by resizing of the window

Answer №1

Answer №2

Answer №3

Similar questions

The DiscordAPIError occurred due to the incorrect placement of required options in the form body. In order to resolve this issue, ensure that required

Installation of a cloned Parse server

Is there an issue with retrieving data from asp.cs through ajax?

javascript onload select the text in the textarea

Pictures do not adhere to the maximum width set on their parent elements

camera equipped with a three.js skybox

Why is it unnecessary to include a callback when using a setState function from useState as an argument in useEffect?

What is the correct way to display or hide a button based on my specific situation?

Updating the information within a Div element through an Ajax call

Building a visual bubble representation with Reactjs and D3

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

jQuery functions are malfunctioning on Firefox, yet they are functioning properly on Chrome

Creating HTML Textarea to Show Text with Newline and Spacing

How about connecting functions in JavaScript?

Resolving CSS Objects

Tips on resizing images within a container to maintain aspect ratio

When resizing the window, the width change in JQuery always resets to 0

Error: The variable "email" is not defined

Encountering a TypeError indicating that the asterisk is not functioning as a proper function

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown