Hi there! I'm working on a 'box' div that moves when you click arrows. How can I make sure the box stays within the window and doesn't go past the borders?
Here's the fiddle:
var elementStyle = document.getElementById("divId").style;
Hi there! I'm working on a 'box' div that moves when you click arrows. How can I make sure the box stays within the window and doesn't go past the borders?
Here's the fiddle:
var elementStyle = document.getElementById("divId").style;
I have made enhancements to your fiddle by incorporating checks to ensure that if the check fails, the new position is set to 0.
if (newPosition < 0) {
elementStyle.top = 0;
} else {
elementStyle.top = newPosition + px;
}
You can access the updated fiddle here: https://jsfiddle.net/8t9cqyqd/7/
If you don't want the window to continue scrolling for bottom and right positions, you will need to calculate the window size and apply a similar check. This involves setting the right and bottom positions at the container size minus the moving box's size. I am happy to make these adjustments in the fiddle upon request.
I have also updated the fiddle to address the "right" direction:
Here's an example similar to this:
let y = $("#element").position();
if(y.top > $(window).height())
//prevent downward scrolling
Repeat the process for all positions by replacing height() with width() for the X position
I am trying to create a collapsible navbar menu: <div class="collapse navbar-collapse" id="navbarCollapsible"> .. menu items .. </div> My goal is to hide the menu whenever a user clicks outside of it (not just when click ...
: I am attempting to incorporate a 3D model into the scene upon mouse click, where the mesh should align with the point clicked by the mouse. This involves utilizing raycasting and projection techniques. The code for the mouseClick event is as follows: ...
I've been attempting to carry out a simple task like uploading a file to Dropbox. The file uploads successfully, but I'm in need of the response that contains details such as the file name, size, and path. I understand that I'm getting lost ...
When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...
Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...
I am trying to implement a feature where the data inputted into a text field is sent to posttothis.php and then the result is displayed in a content div. However, I am encountering difficulties in making it work. testscript.html <html> <head> ...
Looking to enhance user experience on iPad while using a video js player, I want to make an image pop up upon completion of the video. Currently, I have it set up to work without full screen mode, but iPad users prefer watching videos in full screen. Is th ...
I am currently facing confusion on how to pass or assign a value of my data-percent pie chart through my ajax data retrieved from the database. While I have successfully passed other fields using an id, I am stuck on how to incorporate the value for data p ...
In my Angular application, I am attempting to create a button dynamically that calls the deleteRow() function and passes a username parameter upon click. Despite successfully passing the username to the controller, the generated button ends up passing unde ...
Hey there, I need some help with a specific part of my code snippet: <div class="tags-column" id="tags"> <h2>Tags</h2> <ul> <% @presenter.tag_counters.each do |tag_counter| %> <li class=" ...
Check out my progress bar design https://i.sstatic.net/u9SRM.png How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different scre ...
I've noticed certain apps displaying a grid view or form on an alert box with vertical sliding, but I'm clueless about how to make it happen. As far as I know, this can be achieved using jQuery.. Any assistance would be greatly appreciated. Th ...
Hey there! I am encountering an error in the title related to my factory. Any suggestions on how I can resolve this issue? (function (angular,namespace) { var marketplace = namespace.require('private.marketplace'); angular.factory(&apo ...
I am currently working on creating centered and cropped thumbnails for images retrieved from a database. I came across some helpful information on how to achieve this: The resource I found is written for JavaScript, but I am using Angular 7. I am facing d ...
Imagine I have this image: Is there a way for me to determine the x/y or left/top properties of my canvas if it is centered using the following CSS: #canvas-container { width: 100px; height:100px; margin: 0px auto; } Note ...
I'm currently in the process of setting up a Next.js page in the following manner const Index: NextPage<PageProps> = (props) => { // additional code... Prior to this, I had defined my PageProps as follows: type PageProps = { pictures: pi ...
An AngularJS application has been developed to dynamically display specific values in an HTML table. The table consists of six columns, where three (Work Name, Team Name, Place Name) are fixed statically, and the remaining three columns (Service One, Servi ...
Is there a way to dynamically change the number within the nth-child brackets when clicking on a button? For instance, can I click a button and have the next slide in a slideshow appear? .slideshow:nth-child(n){} I specifically need to modify n using only ...
Seeking assistance in displaying a paragraph with text and a textbox when a specific option is selected from the dropdown menu on my form. Previously used code for radio buttons, but encountering issues with this scenario. Any guidance would be greatly app ...
Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...