Convert pixel to percent using jQuery

Question

I would like to know if there is a way to convert a pixel to percent ... I have a code that I got the full width value successfully, but the only thing that needs to be kept in the center, I will need to use percent.

Here is what I use to get the width value, which I need to convert after percent.

$(document).ready(function(){ var sp = $('.slide'), winWidth = $('#slides').width(); console.log(winWidth); sp.css('width', winWidth); }); 

Thanks for the help.

The link to the violin has been updated here. * note: what I wanted here was to set the .slide container to make the object still in the center. Feel free to modify your violin. Right now I am using my given jQuery code to get the exact width of "#slide" as a percentage of a pixel (".slide"). Then, as far as possible, try resizing your browser to see the result of the slide frame. Im using the Fideslides SlidesJS plugin.

Answer 1

Ok, I realized that “#slides” is not the right element that I need to get the width value, since it was also part of the slide frame, instead I get the size of the event browser screen, where I have to pass the value every time Resize your browser screen.

Please view this link to see the updated script. updated script source

Here is the code that I found useful to fix my problem.

 $(window).resize(function() { var sp = $('#slides .slide'); console.log(document.body.clientWidth); winWidth = document.body.clientWidth; sp.css('width', winWidth); }); 

In this case, I can completely resize my width and automatically adjust the width of an element of my class without having the center object in one place. :)

Answer 2

 percent = ($("#your_element") / $("#some_parent_id").width()) * 100 

Where $("#your_element") is the element you want to count the width in % , where $("#some_parent_id") is the element you want to count the width relative to.

Answer 3

The percentage will be the actual value in pixels (obtained by .width ) divided by the width in pixels of the block (possibly obtained via $("#slides").parent().width() ) times 100.

Answer 4

Try the following:

  $(document).ready(function(){ var sp = $('.slide'), winWidth = $('#slides').width(), wWidth = $(window).width(); sp.width(((winWidth / wWidth) * 100)+'%'); });