It is imperative that the HTML div element remains within the boundaries of the page

Question

It is imperative that the HTML div element remains within the boundaries of the page

Let me begin by providing some context. I am currently developing a responsive page that uses percentages to position my divs, allowing users to drag and drop items wherever they please. However, a problem arises when the user positions an object too close to the edge of the page. When the browser is resized, the images start to extend off the page and get cropped.

    #div1 
    {
    overflow: hidden; 
    right: <?php variable>;
    bottom: <?php variable>;
    }

    #div2 
    {
    overflow: hidden; 
    left: <?php variable>;
    top: <?php variable>;
    }

My goal is to allow percentages to control the placement until the edge of the page, then set specific variables like 10px so it never extends off the page.

I considered using JavaScript (if statements), but wondered if there was a simpler solution using CSS properties. Any guidance or suggestions would be greatly welcomed.

Thank you,

Rob

javascript html css

Answer 1

Answer №1

To implement JavaScript, it is essential to create a separate function that triggers on browser resize:

window.onresize = function(event) {
    //your code here
}

Alternatively, if you prefer using jQuery:

$(window).resize(function(){
    //your code here
});

The functionality remains the same.

If opting for a CSS solution, utilize a @media query:

@media(max-width:767px) { /*define the css properties to apply when the browser size meets your requirements */
    .myImage {left:10px;top:10px;}
}

For more information on @media queries, refer to http://www.w3.org/TR/css3-mediaqueries/

In my opinion, employing JavaScript would result in a more robust solution. If you are already utilizing JavaScript for dragging elements around, consider including resizing and repositioning logic as well.

Answer 2

To implement JavaScript, it is essential to create a separate function that triggers on browser resize:

window.onresize = function(event) {
    //your code here
}

Alternatively, if you prefer using jQuery:

$(window).resize(function(){
    //your code here
});

The functionality remains the same.

If opting for a CSS solution, utilize a @media query:

@media(max-width:767px) { /*define the css properties to apply when the browser size meets your requirements */
    .myImage {left:10px;top:10px;}
}

For more information on @media queries, refer to http://www.w3.org/TR/css3-mediaqueries/

In my opinion, employing JavaScript would result in a more robust solution. If you are already utilizing JavaScript for dragging elements around, consider including resizing and repositioning logic as well.

It is imperative that the HTML div element remains within the boundaries of the page

Answer №1

Similar questions

Changing an object into an array for saving and transforming it back to an array for usage in JavaScript

Storing user input as an object key in typescript: A comprehensive guide

How can I utilize JSON data to retrieve information using D3 library?

Utilizing jQuery AJAX to enable a functional back button feature upon modifying HTML

Utilize Javascript to access Django Rest Framework API and obtain a Token

Is it achievable to use PHP to automatically scroll to the bottom of a container?

Show the loading icon once to indicate that the page is waiting for an AJAX call

If you're not utilizing v-model.lazy, Vue3 Cleave js may encounter functionality issues

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

Steps for retrieving multiple documents from Firestore within a cloud function

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Setting the maximum height for a div element

Utilizing JavascriptExecutor in Powershell

Implementing hover effect triggered by keyboard input

What could be the issue with my interactive dropdown menu?

Pass user input values to PHP via AJAX and display the outcome on a designated div

Utilizing CSS for styling a specific class in a Joomla Module

Obtain the precise X and Y coordinates of a <li> element regardless of where the mouse is clicked using Typescript

Updating the Hero Image

Sidenav Content with all elements having opacity applied