Modify the width measurement from pixels to percentage using JavaScript

Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width.

I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two percentages seem to be controlled by a JavaScript snippet:

    <script type="text/javascript">

        $(document).ready(function() {
            $.noConflict();

            jQuery('#services-example-1').services(
                {
                    width:1144,
                    height:300,
                    slideAmount:6,
                    slideSpacing:30,
                    touchenabled:"on",
                    mouseWheel:"on",
                    hoverAlpha:"off",
                    slideshow:6000,
                    hovereffect:"on",
                    callBack:function() { }

                });


    });
    </script>

Any suggestions on how I can convert the "width: 1144" into a percentage value?

Or do you have any other ideas on how to make this slider responsive? All input is appreciated! Thanks!

javascriptjqueryhtmlcssresponsive-design

Answer №1

It's not as simple as just adjusting one element to make this slider responsive. Changing the value in your JavaScript will only result in a full-width slider, as the child elements remain their original sizes.

To truly make it responsive, you'll need to override each element in your CSS (such as .imgholder and .thumb) so they adapt to page size. Additionally, adjust the width in your JavaScript based on the page width like this:

var sliderwidth = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width')) - 50); // Remember to account for padding and scroll bar
                    jQuery('#services-example-1').services(
                        {
                            width: sliderwidth,
                            height: 300,
                            slideAmount: 6,
                            slideSpacing: 30,
                            touchenabled: 'on',
                            mouseWheel: 'on',
                            hoverAlpha: 'off',
                            slideshow: 6000,
                            hovereffect: 'off'
                        });

This solution should address your issue. Keep in mind that the height of the slider needs to remain unchanged to accommodate your images.

I also noticed two other things: 1. The jQuery slider plugin may have some bugs, especially after resizing the page which could cause it to disappear momentarily. 2. Your website seems to have a lot of unnecessary CSS and JavaScript files. Consider optimizing to improve site speed.

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

Using CSS3 easing on Mobile Safari can help create smooth transitions

Can anyone advise on how to recreate the easing/friction for touch events in Mobile Safari? I am trying to achieve a similar bounce-back effect when dragging contents past the top or bottom of a scroller. I experimented with the cubic-bezier easing functi ...

iphonehtmlcssmobile-safari

Having trouble resolving '@auth0/nextjs-auth0' during deployment on Vercel? Check out this error message: "Can't resolve '@auth0/nextjs-auth0' in '/vercel/path0/pages'"

I recently deployed a project on Vercel and have been working on enhancing the layout to achieve a minimum viable product (MVP). As part of this process, I decided to switch my authentication method to @auth0/nextjs-auth0 package for Next.js. After running ...

javascriptnode.jsnext.jsnode-modulesauth0

Updating a ReactJS component based on the selected value

My code currently includes a select element that retrieves ID's from an API, followed by a table that displays data. When I define a state like this example: this.state = {value:23}; the table successfully displays data from I'm trying to achie ...

javascriptreactjs

Explore JSON pivot table - effortlessly retrieve all data points

Is there a way to display all facilities from my JSON data while still being able to access hotel information? Currently, it only works if I output the facilities alone. JSON Data { "id": "1", "hotel_title": "Name of Hotel", "hotel_description": "1 ...

jqueryajaxjson

What is the best way to manage numerous asynchronous post requests in AngularJS?

$scope.savekbentry = function (value) { console.log('save clicked'); console.log(value); console.log($scope.kbentry.kbname); $scope.kbentry.mode = value; var kbname = $scope.kbentry.kbname; var kbd ...

javascriptjqueryangularjs

Tips for utilizing a .node file efficiently

While attempting to install node_mouse, I noticed that in my node modules folder there was a .node file extension instead of the usual .js file. How can I execute node_mouse with this file format? After some research, it seems like node_mouse may be an a ...

javascriptnode.jsnpmnode-gyp

React Application Issue 'Error: React is not defined'

I've been working on developing an app using react, but for some reason, it's not functioning properly and I'm struggling to pinpoint the issue. The code compiles without errors using babelify, however, it throws an exception during executio ...

javascriptreactjsnpmgruntjsbrowserify

Expressjs route encountering issue with imported database function failing to return a value

Currently, I am in the process of creating a REST API using Expressjs. Initially, all routes were integrated into one main file. However, I have now separated these routes, database connection, and database methods into their individual files. login-db.js ...

javascriptnode.jsexpress

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

htmlcssweb-hostingfile-management

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe

Show the id value of the event triggered by eventclick

I am currently attempting to retrieve the id of the event so that I can remove it from the database. My approach involves using eventClick, where a dialog pops up when the user clicks an event prompting them to remove it. In order to proceed with this oper ...

javascriptreactjsfullcalendar

Is the 404 page being utilized as a fallback for AJAX requests?

I am looking to create a one-page website that utilizes history.pushstate to modify the URL. My plan involves having only one HTML file for the site, which would be the 404 error page. This setup would redirect users to that page regardless of the URL they ...

javascriptajaxhttphttp-status-code-404

Firefox failing to display input placeholder text properly when wrapped

I've been working on making my placeholder text wrap to the next line in an input field. While I found solutions that work in Chrome, I'm struggling to get it right in Firefox. After researching on Stack Overflow, I came across this question: P ...

htmlcssfirefoxinput

What is the best way to transform a Map<string, boolean> into an array of objects with key-value pairs {key: string, value: boolean

I'm currently working on a React project that incorporates TypeScript, and I've successfully implemented dynamic permission creation on the user creation page by utilizing this particular code snippet. The permissions being used on the page are m ...

javascriptreactjstypescriptdictionaryreact-tsx

The use of jQuery's ajax() function to retrieve JSON data from a URL is resulting in a response that is

I am facing an issue where the data object received in my complete() callback is not a JSON object, but rather an [Object object]. Despite this, I can still see a string of my JSON response in data.responseText. Below is my jQuery .ajax request: $.ajax({ ...

ajaxjsonjquery

Step-by-step guide on creating a blank horizontal line in an HTML table

Can anyone help me figure out how to draw a horizontal line connecting from td 1 to td 4 without relying on content CSS? I'm envisioning a progress bar like the one shown in the following image: https://i.sstatic.net/on8Bi.png <table> < ...

htmlcss

Utilize the JSSOR Slider to dynamically pull images from an online album, such as by integrating with an RSS Feed

My main motivation for exploring this possibility is the negative impact that loading images into the slider has on my website's performance. Is there a method to import images from an externally hosted album, such as Google Picasa albums (or any othe ...

javascriptjqueryrsssliderjssor

send a message to all clients using socket.io

I am having trouble figuring out how to broadcast a message from the client or another NodeJS file to all clients. While I was able to send messages to the server successfully, I am not able to reach every other client. Server code: var io = require(&ap ...

javascriptnode.jssockets

Position the navigation bar links to align with the image using bootstrap 5

I have implemented the basic navbar from the Bootstrap website, along with flex-direction set to "column" to display the image above the menu items. https://getbootstrap.com/docs/5.0/components/navbar/ Currently, I have a logo that I want to place with l ...

htmltwitter-bootstrapbootstrap-5

Delegate All Events to the Document

In my current setup, I have over 350 events that look like: $(document).on('click','.removable-init',function(){}); I've noticed a performance issue where some click events are delayed by a fraction of a second. This is happening ...

javascriptjqueryhtmlperformanceevents