Develop Reference

Set width of scrollbar in JS to 8px

I need to amend the following code that is detecting the scrollbar width. It is opening a fullscreen menu by applying "overflow-y:hidden" to "html" when the menu is opened. This code should add a fake scrollbar to stop the content jumping to the right. Im also using a custom scrollbar that is 8px wide, so I think I just need to amend the code below to make the fake scrollbar 8px.
menuButton.addEventListener('click', () => {
// get width before hiding scrollbar
let oldWidth = document.documentElement.clientWidth;
// toggle CSS class that sets overflow to hidden
document.querySelector("html").classList.toggle("no-scroll");
// get new width after hiding scrollbar
let newWidth = document.documentElement.clientWidth;
// set margin-right value equal to width of the scrollbar
let scrollbarWidth = Math.max(0, newWidth - oldWidth);
document.body.style.marginRight = `${scrollbarWidth}px`;
});

How Do I Get Browser Viewport Width & Height In Javascript And Apply To CSS ID's?

Is there a way to get the realtime width and height values using Javascript and apply them to a number of div id's? I want to build a site that has 5 sections that are always width: 100vw and height: 100vh. Only one section can be seen at a time as each section has a # anchor and vertical scrolling is disabled.
The problem I'm having is when I resize the browser window, the CSS doesn't keep up and must be refreshed for new values for the section width and height. I'm wondering if there is a way for Javascript to constantly monitor the browser width and height and apply those values to a set of id's.
Example
The browser window is 1000px by 500px so the id #one, #two now have a width: 1000px and height: 500px and when the browser is resized to 1200px by 600px the values for #one , #two would be set as width: 1200px and height: 600px in the CSS.
Here is my codepen.

As #gary-storey already said, use the resize event:
$(window).resize(function() {
var curWinWidth = $(window).width();
var curWinHeight = $(window).height();
// do stuff here
});

i've done this for my own page, that way:
$(window).resize(function() {
<!-- get viewport size//set content size -->
var currentViewPortHeight = $( window ).height();
var currentViewPortWidth = $( window ).width();
$("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
$("#mainFrame").resize();
};
you may set a timeout interval though - since this event fires very often during a windo resize - especially if the user uses drag&drop. according to my stackoverflow studies, the best would be a 300ms timeout, to get a smooth resize transition, and not firing it to often...

Div with constant proportions and always 100% of screen height

I want to create div which would behave in a following way:
it would always resize his height to 100% of browser window height.
it will adjust his width to maintain constant proportions (so that his width would be allays equal to 3/5 of his height for an instance)
There are some examples here which do opposite thing - maintain width at some fixed % value of browser window size, and adjust height accordingly but its not what i need.

Try the below jQuery:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
Demo:
$(window).resize(function(){
$('#resizable').width($('#resizable').height()*3/5);
});
$(window).trigger('resize');
html,body,#resizable{
height:100%;
}
#resizable{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="resizable"></div>

I use jquery here:
window.onresize = function() {
var el_height = $(element).height(window.innerHeight);
$(element).width((el_height*3)/5);
}

What you could do is get the height of the browser window with jQuery and set the width of the div accordingly.
function changeDivSize(){
var wHeight = $(window).height();
var newDivWidth = height * 0.6;
$("#divId").height(wHeight);
$("#divId").width(newDivWidth);
};
$(document).ready(changeDivSize);
$(window).resize(changeDivSize);

i was going to support Nocky Tellekamp's answer but it misses couple of things :
first, in order to get window Hieght in cross browser you need to use $(window).innerHeight();
Proper code view :
$(document).ready(function() {
var WindowHeight = $(window).innerHeight(); //$(window).height() not working in I.E and part of other wierd browsers not based on mozila engine
$("#divId").css { //proper and more orgenized code view of css changing
hieght : WindowHeight,
width : WindowHieght * 0.6
};
});
you dont have to call method on window.resize (causes very bad performance issue if bigger algorithem involved), if it does bother's you, i would suggest to use different css properties such as clear:both when setting the div so actually it will spread on the entire window height and width.

How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?

At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/
However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.
The usual approach of getting the window height first ($(window).height()) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.
How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?

You can try to get the element's #id or .class at runtime and then make the width/Height according to the window width and height:
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
checkout in fiddle

Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
After the dialogue has been opened, and assuming that you have captured its id, use the following:
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div> containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
Happy coding!

You can use jquery plugin :
$("#demo").dialog({
width: 500,
height: 300,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
//initiate the plugin
$(document).dialogfullmode();

how to center a relative div horizontally using jquery on window resize?

i am initially centering div horizontally using jquery but when the window is resized it looks bad so what i want to do is keep it centered using jquery after the window is resized
is there a way to help?
EDIT
guys i have successfully made other elements centered but i am having another issue now :(
please check this
http://hrmanagementbradford.com/gallery/
and resize the window, you will see that the content doesn't get positioned correctly, i am trying to fix this for hours but can't find the solution please help with that
EDIT
solved! it was complex and my code is very specific so posting it here won't help :)
and
although i used jquery to center it but if we use the css thing then FutureKode's answer is best suited for me :)

Why are you using jquery to center horizontally when css can do it one line and it will stay in the center when the browser is resized:
div {
margin:0 auto;
width:800px
}

You can make it dead-centered like this:
$('#elementID').css({
position:'absolute',
top:'50%',
left:'50%',
width:'600px', // adjust width
height:'300px', // adjust height
zIndex:1000,
marginTop:'-150px' // half of height
marginLeft:'-300px' // half of width
});
Note that element will appear at the center but with scrolling it won't move. If you want to make it appear at center, you need to set position to fixed instead. However, this won't work in IE6. So decision is yours :)
You can also create quick simple jQuery plugin:
(function($){
$.fn.centerIt = function(settings){
var opts = $.extend({}, $.fn.centerIt.defaults, settings);
return this.each(function(settings){
var options = $.extend({}, opts, $(this).data());
var $this = $(this);
$this.css({
position:options.position,
top:'50%',
left:'50%',
width:options.width, // adjust width
height:options.height, // adjust height
zIndex:1000,
marginTop:parseInt((options.height / 2), 10) + 'px' // half of height
marginLeft:parseInt((options.width / 2), 10) + 'px' // half of height
});
});
}
// plugin defaults - added as a property on our plugin function
$.fn.centerIt.defaults = {
width: '600px',
height: '600px',
position:'absolute'
}
})(jQuery);
And later use it like:
$('#elementId').centerIt({width:'400px', height:'200px'});
To center it when window is resized, you would use resize event just in case it does not center like this:
$(window).resize(function(){
$('#elementId').centerIt({width:'400px', height:'200px'});
});

You can use
margin: 0 auto;
to centre a block element horizontally in CSS.
Like so:
div
{
width: 400px;
margin: 0 auto;
}

do this:
$(window).resize(function(){
// reposition div again here
})