We Keep Coding

Change an element width in px when resizing the window

How can I change an element with a fixed width in px when i resize the window? I need to use an absolute unit, i can not use relative units like % or vw.Every time the window is resized with 1 px i need to decrease the element width by 0.2px.
I tried to use the window resize eventListener but i don't know what calculations needs to be done.

What you want can be achieved by using javascript. I've created a logic to do that :
<script>
function myFunction() {
var initialscreenwidth = window.innerWidth; //Set Initial Screen Width
setInterval(function() { //looping the script
var screenwidth = window.innerWidth;
var difference = initialscreenwidth - screenwidth; //Calculating the change in screen-size
if (difference != 0) { //Checking if there is a change in width
var element = document.getElementById('demo');
var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); //Getting default font-size of the element
var initialfontsize = parseFloat(style);
var fontdifference = -(parseFloat(difference) / 5); //1px change in screen-size = 0.2px change in font-size
var newfontsize = initialfontsize + fontdifference;
var newfontsizepx = newfontsize + "px";
if (newfontsize > 1) {
document.getElementById("demo").style.fontSize = newfontsizepx;
}
}
initialscreenwidth = window.innerWidth;
}, 300); //reloads in every 300ms
}
myFunction();
</script>
Paste this at the end of your body section, somehow using this in the head section is not working.

DataTables vertical page fitting on window resize

Following the Vertical Page fitting blog on DataTables https://datatables.net/blog/2015-04-10, I'm trying to setup my table the same way but using the window resize event. Here's what i'm doing,
<script>
var prevHeight = 0; //for storing the previous height of the window
$(document).ready(function() {
prevHeight = $(window).height(); //get the current height of the window on load
});
$(window).on('resize', function(e){
var currentHeight = $(window).height(); //height of the window after resize
var wrapper = $('.resize_wrapper'); //div containing the table
var resizeStartHeight = wrapper.height(); //height of the wrapper
var height = resizeStartHeight + (currentHeight - prevHeight); //new height for the wrapper
if ( height < 180 ) { //setting a minimum height
height = 180;
}
wrapper.height( height ); //set the new height for the wrapper
prevHeight = $(window).height(); //store the new height of the window
});
</script>
The table container is resizing, my table page length is changing. So far this code works but I can't seem to figure out what i'm missing because there's still a huge blank area under my table. There's nothing else under there, my table/div is the last element on the page.

How to make the slide take 100% versus re-sizing according to browser?

I have a fullscreen slideshow page, but the slides don't take up 100% of the background. Instead, they base size off of the browser. I want the slides to take 100% of the background. I THINK I narrowed it down to one function, but I'm not sure and not good with JavaScript yet. Here's the function:
// calculate image size, top and left position
jQuery.fn.superbgCalcSize = function(imgw, imgh) {
var options = $.extend($.fn.superbgimage.defaults, $.fn.superbgimage.options);
// get browser dimensions
var browserwidth = $(window).width();
var browserheight = $(window).height();
// use container dimensions when inlinemode is on
if (options.inlineMode === 1) {
browserwidth = $('#' + options.id).width();
browserheight = $('#' + options.id).height();
}
// calculate ratio
var ratio = imgh / imgw;
// calculate new size
var newheight = 0; var newwidth = 0;
if ((browserheight / browserwidth) > ratio) {
newheight = browserheight;
newwidth = Math.round(browserheight / ratio);
} else {
newheight = Math.round(browserwidth * ratio);
newwidth = browserwidth;
}
// calculate new left and top position
var newleft = Math.round((browserwidth - newwidth) / 2);
var newtop = Math.round((browserheight - newheight) / 2);
var rcarr = [newwidth, newheight, newleft, newtop];
return rcarr;
};
Let me know if there needs to be more code or even to link to the entire document, as I said I'm not at all experienced with JS and don't know where the problem resides.
*I've tried doing it with CSS, but I get a bug where as it's transitioning to the next image it bleeps the first image's actual size just before displaying the next and it's rather unsleek. Fixing this would also solve my question.

Keep aspect ratio of div when resizing window

I have an issue which is a little hard to explain. I have a div which has a 2:1 aspect ratio. And I want it to have a 100% width or height based on the browsers window size.
If the window height is greater than the divs height the the size should be based on 100% width.
And if window height is less than the divs height the size should be based on 100% height.
With my curren approach it is flashing when I size larger.
Look at this link http://acozmo.com/me/ for a demo.
HTML
<section id="container">
</section>
JQuery
function update() {
var $documentHeight = $(document).height();
var $windowHeight = $(window).height();
var $documentWidth = $(document).width();
var $windowWidth = $(window).width();
var $container = $('#container');
if ( $windowHeight >= $documentHeight ) {
$container.width($windowWidth);
$container.height($windowWidth / 2);
}
if ( $windowHeight < $documentHeight ) {
$container.width($windowHeight * 2);
$container.height($windowHeight);
}
}
$(document).ready(function() {
update()
});
$(window).resize(function() {
update();
})

To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.
To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.
var container = $('#container'),
updateTimeout,
threshold = 100;
function update() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
width = container.width(),
height = container.height(),
scale;
if ( windowWidth > windowHeight ) {
scale = windowWidth / width;
if ( height * scale > windowHeight ) {
scale = windowHeight / height;
}
}
else {
scale = windowHeight / height;
if ( width * scale > windowWidth ) {
scale = windowWidth / width;
}
}
container.width(Math.round(width * scale));
container.height(Math.round(height * scale));
}
$(document).ready(function() {
update();
});
$(window).resize(function() {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(update, threshold);
});

It's probably happening because the fact that you are using a second if, instead of an else . . . it hits the first if, shrinks the height, and then hits the second if and increases it.
Try changing this (the second if):
if ( $windowHeight < $documentHeight ) {
. . . to this:
else {

Resize popup Window to min. height and width then dragging to below size should not possible

i want to fix my popup windows size to minimum height of 400 and width of 650, after that even dragging to below that size should not be possible, i used resizeTo() function, but still dragging is possible, i want to lock my popup window after that mini. size, and more than that height and width , window should be resize. any one have answer using javascript???
Here is what i done::>>
var newHeight = $(window).height();
var newWidth = $(window).width();
/*newWidth < 650 ? window.innerWidth = 650 : $(window).height();
newHeight < 400 ? window.innerHeight = 400 : $(window).width()*/;
if (newWidth < 633)
{
window.resizeTo(650,newHeight+72);
}
else if (newHeight < 327) {
window.resizeTo(newWidth,400);
}

you need to use from JQUERY UI resizeable function. Once check with that it will very easy method for this task. all the best