Sliders are outpacing buttons upon resizing the window

Every time I adjust the size of my window, the slider buttons (next/previous) vanish and fail to stay aligned with the slider. Any suggestions for resolving this issue? JSFIDDLE:https://jsfiddle.net/b31kvqwr/

Button CSS:

#nav img {
    position: absolute;
    top: -10px;
    cursor:pointer;
    color:grey;
    width:40px;
    height:30px;

}
#prev {
    margin-left: 530px;
    font-size: 10px;
}
#next {
    right: -30px;
    margin-top: 13px;
}

PS: if the result in the jsfiddle doesn't show up, expand the result tab.

This is how the slider appears when at full screen (correctly positioned);

This demonstrates what happens when I resize the browser horizontally:

The buttons do not move along with the slider. Any assistance would be greatly appreciated?

javascriptjqueryhtmlcss

Answer №1

The current issue lies in the fact that you have set margin-left: 530px;, which means the arrows will always remain 530px from the left edge of the screen regardless of screen size. It appears that the wrapping element has a fixed width and does not adjust accordingly. Although your code was a bit messy, I managed to identify a few solutions to improve the situation.

You can view the suggested improvements at this link: https://jsfiddle.net/b31kvqwr/2/

I have made adjustments to keep the elements correctly positioned for most cases, but for perfect alignment, consider implementing 1-2 @media queries to fine-tune the layout at different screen sizes.

To address this issue, I changed the margin-left property to position:absolute and utilized the left positioning for the previous and next buttons:

#prev {
    left: 50%;
    font-size: 10px;
    position:absolute;  
}
#next {
    margin-top: 13px;
    left:58%;
    position:absolute;
}

Additionally, I suggest organizing your code as @TingGaint mentioned since it is quite cluttered. When seeking help on platforms like Stack Overflow, try to include only relevant code snippets to facilitate a quicker resolution.

EDIT

Upon further investigation, I discovered the root cause of the problem. While following the earlier instructions is still recommended, now move the arrows div outside and below the <div id="wrapper">. Adjust their placement accordingly to ensure they remain fixed when resizing the window.

For reference, see the modified example here: https://jsfiddle.net/b31kvqwr/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing input responses in PHP for future reference

None of the methods like $_POST, $_GET, or $_REQUEST seem to be working for saving answers from the inputs. What alternative should I use? <!DOCTYPE html> <html> <head> <title>Sign Up</title> </head> <body ...

phphtmlpostgetrequest

Interpolating UV is not allowed: 'flat': Using a reserved word in an illegal manner

As a beginner, I recently learned that UV coordinates are not interpolated in WebGL, allowing for exact pixel values to be retrieved. However, when attempting to use the 'flat' keyword, I encountered an error. By adding 'flat' before t ...

javascriptthree.jsglslwebglwebgl2

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

Creating a border shadow can add depth and dimension to your design, giving it a soft and

Is there a way to add a shadow effect to only one border while keeping the others sharp using CSS? Are there alternative techniques I am not aware of? #panel { -moz-box-shadow:0 1px 10px #00c6ff; -webkit-box-shadow: 0 1px 10px #00c6ff; box-sha ...

css

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

"Using jQuery to store items in local storage that persist even after refreshing the

Here is the code snippet I have: <input type="text" id="player"/> <button>join</button> <div id="tournament"></div> Here is the jQuery function: $(document).ready(function(){ $('button').click(function(){ ...

jquerylocal-storage

Stop the window from scrolling up smoothly when opening a custom modal to avoid any flickering

I encountered a problem with a custom modal window that would open on click and move to the top of the viewport. The issue was that when scrolling up, the page beneath would be visible, so I needed to restrict scrolling once the modal was open. Below is th ...

javascriptjqueryhtml

What could be causing my state not to change in Nextjs even though I followed the quick start guide for Easy Peasy?

I recently encountered an issue while trying to implement easy peasy for global state management in my nextjs app. The problem I faced was that the state would only update when I changed pages, which seemed odd. To better understand what was going on, I de ...

javascriptreactjsnext.jseasy-peasy

What is the best method to retrieve information from a nested JSON array?

Whenever a user submits data, I receive it in a nested JSON array format and I must extract that information. For example, the data could range from question_1 to question_5 in one submission, and then from question_1 to question_9 in another submission. ...

javascriptarraysnode.jsjsonmultidimensional-array

Ways to deactivate a button in Vuejs when no data is present

<input :type="passwordFieldType" v-model="user.password" id="password" name="password" class="input-section-three-register" ...

javascriptvue.js

How can JQuery and CSS brighten up buttons?

Is there a way for me to create an "enlightening" effect similar to the one seen in the "Tags" section on this website? I am not just looking to change the color of the background from gray to white, but instead, I want to progressively make the button li ...

jquerycss

Issue with .click() function in JQuery not functioning

My View has a map with markers that display pop-ups when clicked, which is functioning correctly. Below is the code for the map functionality: export function all_hotels_map_results(): void { Helpers.set_currency_settings(); const json = gon.hot ...

javascripttypescript

What is the best way to include a variable in an anchor tag?

In my Vue application, I have a header that displays different links based on the environment. The root of the link changes depending on the environment, so I've stored an environment variable with this root value. I'm importing this variable in ...

htmlvue.jsenvironment-variableshref

Websocket item deletion protocol

I am currently in the process of setting up a WebSocket client to showcase a synchronized list of items that mirror the server's state. My backend is powered by Spring, while my front-end utilizes AngularJS. I have scoured through numerous examples, a ...

javascriptangularjswebsocketstompspring-websocket

AngularJS Array Indexing

$scope.ptArray={m1 : $scope.somevalue1, m2 : $scope.somevalue2, m3 : $scope.somevalue3}; $scope.errMsg={m1 : 'msg1', m2 : 'msg2', m3 : 'msg3'}; if($scope.ptA ...

javascriptangularjsarrays

Initiate an Elementor popup upon form submission (After submit event) using Contact Form 7 in WordPress

I have incorporated Elementor popups and contact form 7 into my WordPress website. Currently, my goal is to activate the Elementor popup after the contact form 7 form has been submitted. Below is what I have tried so far, and there have been no console er ...

javascripthtmljquerywordpress

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

javascriptphpjqueryhtmlajax

Concentrate on the Input Dysfunction

I've been struggling to make .focus() work smoothly with a slide-in div. No matter what I try, the cursor doesn't automatically go to the selected input field when the div appears. Take a look at this demo for reference: http://jsfiddle.net/Mobi ...

jqueryfocus

Data from previous ajax calls is stored and retained when a custom event triggers the call

Good day everyone, I am currently encountering an issue with a tracking mechanism built in jquery. The concept revolves around having a handler attached to multiple clickable elements. When a user clicks on an element, the handler captures a code related t ...

javascriptjqueryajaxeventstriggers

The issue with binding arises when attempting to bind in nested elements within an ng-repeat loop

Here is the code snippet I am working with: <div class="list-group"> <a href="#" class="list-group-item" ng-repeat="user in users"> <h4 class="list-group-item-heading">{{user.FirstName}} {{user.LastName}}</h4> <p class=" ...

javascripthtmlangularjsmodel-view-controllerangularjs-ng-repeat