Is there a way to confine a jquery script within the dimensions of the container div?

Question

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom edges of the div content. While I could set a specific size for the div, my goal is to use this on multiple pages with varying amounts of content. How can I ensure that the button function does not exceed the boundaries of the content inside the div?

 $('.scrolltdup').click(function(event) {
  event.preventDefault();
  $('.wrap').animate({
    marginTop: "+=160px"
  }, "fast");
 });

$('.scrolltddown').click(function(event) {
  event.preventDefault();
  $('.wrap').animate({
    marginTop: "-=160px"
  }, "fast");
});

I have created a jsfiddle showcasing the page content. Any assistance would be highly appreciated. This project marks my first attempt at building a website from scratch using HTML5, CSS3, and jQuery; it's been a learning journey. :)

Thank you in advance.

javascript jquery html css

Answer 1

Answer №1

To improve the functionality, simply include some if statements:

Check out the updated demo here: https://jsfiddle.net/2LcumL6p/4/

$('.scrolltdup').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) < 0) {
        $('.wrap').animate({
            marginTop: "+=160px"
        }, "fast");
    }
});

$('.scrolltddown').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) > -($('.wrap').height() - 160)) {
        $('.wrap').animate({
            marginTop: "-=160px"
        }, "fast");
    }
});

Answer 2

To improve the functionality, simply include some if statements:

Check out the updated demo here: https://jsfiddle.net/2LcumL6p/4/

$('.scrolltdup').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) < 0) {
        $('.wrap').animate({
            marginTop: "+=160px"
        }, "fast");
    }
});

$('.scrolltddown').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) > -($('.wrap').height() - 160)) {
        $('.wrap').animate({
            marginTop: "-=160px"
        }, "fast");
    }
});

Answer 3

Answer №2

The container displays 3 visible boxes in a fixed shape at once, allowing you to determine the number of sets of 3 with the formula

var totalRows = Math.max( $(".box").length / 3 )

.

By calculating the maximum marginTop value before reaching the end of the projects, you can test this value before animating. One way to achieve this is by setting the maxScroll and minScroll values to the highest and lowest marginTop on page load, and then inserting a ternary operator into your animate code.

Replace marginTop: "+=160px"

With

marginTop: "+=" + ( $(".wrap").css( "margin-top" ) > maxScroll ? "0px" : "160px"

;

And apply the same logic for marginTop: "-=160px".

Answer 4

The container displays 3 visible boxes in a fixed shape at once, allowing you to determine the number of sets of 3 with the formula

var totalRows = Math.max( $(".box").length / 3 )

.

By calculating the maximum marginTop value before reaching the end of the projects, you can test this value before animating. One way to achieve this is by setting the maxScroll and minScroll values to the highest and lowest marginTop on page load, and then inserting a ternary operator into your animate code.

Replace marginTop: "+=160px"

With

marginTop: "+=" + ( $(".wrap").css( "margin-top" ) > maxScroll ? "0px" : "160px"

;

And apply the same logic for marginTop: "-=160px".

Answer 5

Answer №3

When considering each row containing two divs with the class 'box', the following code is a functional solution for finding the maximum height between the two divs and animating accordingly:

let presentRow = 1;
function getHeight(elem1, elem2){
  return Math.max($(elem1).outerHeight(), $(elem2).outerHeight()) + 10;
}

$('.scrolltdup').click(function(event) {
      event.preventDefault();

      let height = getHeight($(".wrap .box:nth-child(" + presentRow + ")"), $(".wrap .box:nth-child(" + (presentRow + 1) + ")")); 
      $('.wrap').animate({
        marginTop: "+=" + height + "px"
      }, "fast", function(){
          presentRow = presentRow - 2;
      });

   });
   $('.scrolltddown').click(function(event) {
      event.preventDefault();

      let height = getHeight($(".wrap .box:nth-child(" + presentRow + ")"), $(".wrap .box:nth-child(" + (presentRow + 1) + ")")); 
      $('.wrap').animate({
        marginTop: "-=" + height + "px"
      }, "fast", function(){
          presentRow = presentRow + 2;
      });
   });

To add validation, you can check the value of the presentRow variable.

Answer 6

When considering each row containing two divs with the class 'box', the following code is a functional solution for finding the maximum height between the two divs and animating accordingly:

let presentRow = 1;
function getHeight(elem1, elem2){
  return Math.max($(elem1).outerHeight(), $(elem2).outerHeight()) + 10;
}

$('.scrolltdup').click(function(event) {
      event.preventDefault();

      let height = getHeight($(".wrap .box:nth-child(" + presentRow + ")"), $(".wrap .box:nth-child(" + (presentRow + 1) + ")")); 
      $('.wrap').animate({
        marginTop: "+=" + height + "px"
      }, "fast", function(){
          presentRow = presentRow - 2;
      });

   });
   $('.scrolltddown').click(function(event) {
      event.preventDefault();

      let height = getHeight($(".wrap .box:nth-child(" + presentRow + ")"), $(".wrap .box:nth-child(" + (presentRow + 1) + ")")); 
      $('.wrap').animate({
        marginTop: "-=" + height + "px"
      }, "fast", function(){
          presentRow = presentRow + 2;
      });
   });

To add validation, you can check the value of the presentRow variable.

Is there a way to confine a jquery script within the dimensions of the container div?

Answer №1

Answer №2

Answer №3

Similar questions

What is preventing the input box from shrinking further?

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

When making an Ajax call to an ASP.NET MVC controller, the Access-Control-Allow-Origin error is commonly encountered

The storage capacity of localStorage is insufficient for retaining data

Leverage the power of personalized SCSS styles in combination with Bootstrap-Vue, Webpack, and

In JavaScript, the task involves filtering through multiple arrays of objects to calculate the average value based on the contract number

What is the suitable condition necessary for optimal functionality?

Error: react/js encountered an unexpected token

Validation with Jquery in an ASP.NET C# login form utilizing a webservice

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

Having trouble with my basic jQuery Ajax call not functioning as expected

Eliminate the CSS triggered by a mouse click

Counting the elements on a page using Selenium and Node.js: A step-by-step guide

Exploring how to iterate through multiple arrays simultaneously in JavaScript

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

Preventing HTML form from being resubmitted upon page refresh after submission

Activate event using jQuery in webpack and manage it on the page

Is it possible to enter NaN in Vue3?

Calculate sums in ReactJS without the need for a button

Position the Crossmark to align with text using CSS styling