We Keep Coding

Subtract percentage of scrollTop from div's width on scroll with jquery

I'm attempting to adjust a div's width on scroll with jQuery, the idea is to have a div's width be reduced by a fraction of the scrolltop value, every time you scroll.
For example say I have a div with a width of 100px, if I scrolled down 20px from the top of the page, and the function declared to subtract 1/2 of the current scrolltop value, the div's width would become 90px.

Hi here is the code which reduces the width by 10% of height scrolled https://jsfiddle.net/x3o439kt/
code :
$('#myDiv').on('scroll',function(e){
var w= $('#myDiv').scrollTop()*10/100;
$('#myDiv').width($('#myDiv').width()-w);
});
You can replace 10 by any percentage you want.
if you want the scrolling to be done for the entire document, just replace #mydiv with document like so https://jsfiddle.net/x3o439kt/3/

var x = 0.5; //define whatever rate you want.
$(document).scroll(function() { //whenever a scroll is happening -
$('#divId').width($('#divId').width()-$(document).scrollTop()*x);
//capture your div's width and set it to a new width that equals
//to the subtraction between it's original width and the current
//scrolltop (multiplied by half, as you defined). so in your case
//if div's width is 100px and scrolltop is 20px, divId's new width
//will be 100px - (20px * 0.5) = 90px
});

Div Animate Auto Height

I am working in JavaScript and am unable to use any libraries such as J Query or CSS animations.
I have a Div with an undefined height that auto resizes based on the content that it contains.
The content is changed dynamically through setting the innerHTML value. This works well but the Div size change is jumpy and unappealing. I would like to animate the change in height.
I have seen much code covering this topic but all of the solutions were based on libraries or CSS animations.
Here are my thoughts on how to accomplish the animated dynamic change in height
//get the current height of the div holder
var heightStart = document.getElementById("divHolder").clientHeight;
//the new height, currently I don't know to obtain this
var heightEnd = 1000;
//start a timer to animate the height change
var timer = setInterval( function() {
//clear timer if old height reached new height
if ( heightStart >= heightEnd ){
clearInterval(timer);
}
//set new height
element.style.height= heightStart ;
//incrementing height gradually
heightStart = heightStart + ( heightStart * 0.1 );
} , 50);
So the problem I am having is how to know what the new height would be as it will always be different depending on screen size and the content.
I was thinking I could set the height of the div to a fixed height equal to the heightStart. Then set overflow to none. Then set the new innerHTML content. So the Div wont auto change to fit the new content. I would then use the animate function above to gradually increase the height until the content is fully viewable.
The problem would be is that I don't know how to figure out when the auto height, or when all the content has been displayed height, has been reached.
Thoughts?
Thanks.

First, your heightStart should be assigned before apply new content. and after the new content come in. You can get it's size to heightEnd.
var heightStart = document.getElementById("divHolder").clientHeight;
// APPLY NEW CONTENT HERE
document.getElementById("divHolder").innerHTML = NEW_CONTENT
document.getElementById("divHolder").style.height = 'auto';
var heightEnd = document.getElementById("divHolder").clientHeight;
document.getElementById("divHolder").style.height = heightStart;
document.getElementById("divHolder").style.overflow = 'hidden';

Set height of div in pixels based off width of browser window in % (jQuery or JS?)

I am trying to set up a black border around a webpage. For the left and right side, just making "width: 5%;" in the CSS is fine. But then I want JS/jQuery to work out how many pixels that is, and make that the height of the top and bottom div.
Is this possible?
Thanks.

This should work for you
var val = $(".leftAndRight").width();
$(".topAndBottom").height(val);
Or with one line:
$(".topAndBottom").height($(".leftAndRight").width());

You can determine the value for the border width programmatically, assign it to all four borders, and also refresh it any time you resize:
var width,
drawBorder = function () {
var body = $('body'),
width = body.width() * 0.05;
body.css('border-width', width + 'px');
};
drawBorder();
$(window).resize(function () {
drawBorder();
});
Demo
If you set the left and right width in your stylesheet and then use JS to give the same border width to the top and bottom, unless you use a resize function your left and right borders will change every time you resize but your top and bottom borders will remain fixed.

You can use .width() to find width without the border and .outerWidth to find the width including the border. I think .outerWidth also gives you the width with the padding you may have to subtract that.

How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?

I'm working on a mobile web app, and in my page I have a div element with its width set to 100%.
I need to set the height of this div so that the height is correct for a set aspect ratio. So for example, if the screen was sized to 300 pixels wide and the ratio was 3:2, my script should grab the width of the div (which at this point should be 300px) and set the height to 200px.
On first load, this works perfectly. However, if I rotate the screen of my phone to landscape, the width of the div obviously changes, so I need to reset its height in order to keep the correct ratio.
My problem is that I can't find an event which fires after the elements are resized. There is an orientationchange event built into jQuery Mobile, which helpfully fires when the screen is rotated from portrait to landscape and vice-versa:
$(window).bind('orientationchange', function (e) {
// Correctly alerts 'landscape' or 'portrait' when orientation is changed
alert(e.orientation);
// Set height of div
var div = $('#div');
var width = div.width();
// Shows the *old* width, i.e the div's width before the rotation
alert(width);
// Set the height of the div (wrongly, because width is incorrect at this stage)
div.css({ height: Math.ceil(width / ratio) });
});
But this event seems to fire before any of the elements in the page have resized to fit the new layout, which means (as mentioned in the comments) I can only get the pre-rotation width of the div, which is not what I need.
Does anyone know how I can get the div's new width, after things have resized themselves?

A few methods for you to try:
(1) Set a timeout inside your orientationchange event handler so the DOM can update itself and the browser can draw all the changes before you poll for the new dimension:
$(window).bind('orientationchange', function (e) {
setTimeout(function () {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
}, 500);
});
It won't make too big of a difference but note that Math.ceil takes a lot longer to complete (relatively) than Math.floor since the latter only has to drop everything after the decimal point. I generally just pass the browser the un-touched float number and let it round where it wants to.
(2) Use the window.resize event instead to see if that updated fast enough for you:
$(window).bind('resize', function (e) {
// Get height of div
var div = $('#div'),
width = div.width();
// Set the height of the div
div.css({ height: Math.ceil(width / ratio) });
});
On a mobile device this will fire when the orientation changes since the size of the browser view-port will also change.
(3) If you are updating the size of this <div> element because it holds an image, just apply some CSS to the image to make it always be full-width and the correct aspect ratio:
.my-image-class {
width : 100%;
height : auto;
}

jQuery calculation doesn't add up as expected when toggling height

I have the following function for calculating the height of .node. It then takes away the height of a possible image, .node-image, from the height of the .node, and sets a column, .node-content-column to have a height that is the difference (i.e. 500 - 50 = 450; column becomes 450 in height).
function initColumnSizer() {
imageHeight = $('.node-image').outerHeight(true);
resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
$('.node-content-column').removeAttr('style');
$('.node-content-column').css('min-height', resizeHeight);
$('.node-content-column').css('height', 'auto !important');
$('.node-content-column').css('height', resizeHeight);
}
This function gets called on page load, and resizes .node-content-column as expected.
It also gets called when a div within .node is toggled using jQuery.toggle(), but this calculation returns a larger number everytime, instead of reverting back to the original once this toggle is reverted.
Can anyone see where I am going wrong with this calculation? Or if I am going about it the wrong way?
Thanks in advance!
Karl

1) Maybe the problem is in outerHeight() function (it takes into account padding and border). Try using just height or clientHeight:
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
2) why do you need to cleanup the whole elements' style?
and then you try to assign height = auto, and after that: height = resizeHeight - what's the purpose for that ? check the logic of your code.

outerHeight(true) will return height + padding + border + margin. Possibly, you might want to use height() ?

Most possible is that "larger number everytime" have always constant difference -- for example 75.
May be you just have some dependecies between .node-content-column and .node?
If your nodes like .node-content-column, .node and .node-image are all singles, then it's better to use IDs for them -- not CSS classes.