如何设置元素的宽度等于窗口宽度的一半

Question

I am trying to automatically generate rounded values with the floor function but it stays static. Can you please help me how to improve my code ? Thank you very much.

jQuery:

$(document).ready(function() {

    width_split = $(document).width();
    width_split = Math.floor(width_split / 2);

    $(document).resize(function() {
        width_split = $(document).width();
        width_split = Math.floor(width_split / 2);  
    });

});

HTML:

<p style="position:absolute; right:"+width_split+"px;">
   .content
</p>

Answer 1

You have to set right value inside your JS not in the HTML DOM

Try:

HTML:

<p id="mypar" style="position:absolute;">
   .content
</p>

JS:

$(document).ready(function(){

  width_split = $(document).width();
  width_split = Math.floor(width_split / 2);
$(document).resize(function(){
  width_split = $(document).width();
  width_split = Math.floor(width_split / 2);  
  $('#mypar').css("right", width_split+'px');//ADD THIS
});

$('#mypar').css("right", width_split+'px');//ADD THIS
});

DEMO

Answer 2

Apply the width_split for <p> tag by jquery, the way you are appying width_split at inline p tag is wrong. Something like should be

Html

   <p id="para" style="position:absolute"; >
       .content
    </p>

js

$("#para").css("right", width_split + "px");

instead of

<p style="position:absolute; right:"+width_split+"px;">
///--------------------------this is wrong---^

Answer 3

You should also update HTML tag

$('pID').css('right', width_split.toString()+'px');

Inside the document.resize function.

Answer 4

The simpler solution

Select each element you wish to adjust and apply the style directly

$('.your-selector').css({theProperty: halfWidth});

But this way you have to modify the js for every new element that you add to the html.

An generic approach would be

Put a marker (MRK) class on "reactive" objects, and include in the marker also the css property you want to set to be width/2 (eg. MRK-left, or MRK-margin-left)

Then on window resize, search for the elements that contain the marker, extract the css property, and set it on them.

DEMO fiddle

$(window).on('resize', function () {
    var halfWidth = $(window).width() / 2;
    $('*[class*=MRK-]').each(function(){  // selects all elements having a class  
       var cls = $(this).attr('class')   // property that contains MRK
       var cssPropName = /MRK-([\w-]+)/.exec(cls)[1]; // extracts the info MRK
       var css = {};
       css[cssPropName] = halfWidth;  // creates the styleobject with the info
       $(this).css(css);
    });
});

In html you would write:

<div class="MRK-left"></div>

or

<p class="MRK-margin-left"></p>

The result at 800px width would be:

<div class="MRK-left" style="left: 400px"></div>

or

<p class="MRK-margin-left" style="margin-left: 400px"></div>

And you can change like this any property without changing the js logic