resize bootstrap div on window resize - javascript

This is a continuation from my previous question here.
I'm using bootstrap and it doesn't arrange the div such that they have the same height.
I have solved the problem of resizing the div to same height for the children div.
But it doesn't resize in realtime i.e. when I'm resizing the window, "maxHeight" still remains the same though the function still runs when the window's resized.
Below is the function and code.
function resized(){
var maxHeight = -1;
if (size == "xs"){
$('.col-xs-12').each(function(){
$(this).height("auto");
maxHeight = 0;
});
}
if (size == "sm"){
$('.col-sm-6').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.col-sm-6').each(function() {
$(this).height(maxHeight);
});
}
if (size == "md"){
$('.col-md-4').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.col-md-4').each(function() {
$(this).height(maxHeight);
});
}
console.log("maxHeight : " + maxHeight);
};
$().ready(function(){
$(document).ready(resized)
$(window).resize(resized);
})
Thanks in advance!

Related

Function inside resize function is not working

i have this piece of code.
First i'm setting some heights - the code works on load and on resize.
However, setting heights based on the highest item it doesn't work on resize, but only on load. Can you give me an advice?
$(window).resize(function () {
// speakers - height equal to width
var imgwidth = $('.speakers-section-items-item-image').width();
$('.speakers-section-items-item-image').css({'height': imgwidth + 'px'});
var height = $('.executive-section-items-item-img').height();
$('.executive-section-items-item-list').css({'line-height': height + 'px'});
var heightTeam = $('.team-section-items-item-img').height();
$('.team-section-items-item-meta-last').css({'line-height': heightTeam + 'px'});
// set heights based on the highest item
var maxHeightTeam = -1;
$('.team-section-items-item').each(function () {
maxHeightTeam = maxHeightTeam > $(this).height() ? maxHeightTeam : $(this).height();
});
$('.team-section-items-item').each(function () {
$(this).height(maxHeightTeam);
});
var maxHeightExecutive = -1;
$('.executive-section-items-item').each(function () {
maxHeightExecutive = maxHeightExecutive > $(this).height() ? maxHeightExecutive : $(this).height();
});
$('.executive-section-items-item').each(function () {
$(this).height(maxHeightExecutive);
});
var maxHeightSpeakers = -1;
$('.speakers-section-items-item').each(function () {
maxHeightSpeakers = maxHeightSpeakers > $(this).height() ? maxHeightSpeakers : $(this).height();
});
$('.speakers-section-items-item').each(function () {
$(this).height(maxHeightSpeakers);
});
}).resize();

trying to stop textarea from growing after 300px and then destroying autogrow textarea

I am Trying to stop a textarea with autogrow.js from growing after 300px height and then destroying autogrow textarea so that it has scrollbars, although the code I have used to do this is working fine I can stop the textarea from growing after 300px but when that happens the textarea becomes smaller than 300px suddenly.
I need it to stop growing at 300px but still remain 300px in height, is this possible?
I am recreating the facebook messages box - the text area can grow but after a certain height it stops growing and the textarea has scrollbars and once you delete text from the textarea the scrollbars go away and the textarea can then grow again.
I have a working jsfiddle example with my problem inside it.
http://jsfiddle.net/jphillips/k2a2pwc8/2/
here is the code also
function scrollar() {
elem = document.getElementById('box_area');
if (elem.clientHeight < elem.scrollHeight) {
alert('has scrollbars');
var inpbh = $("#inner_postbox").height();
var inpbh_val = $("#box_area_height").val(inpbh);
$("#box_area").height(inpbh_val);
//$("#box_area").autosize();
if ($("#box_area").hasClass("detract")) {
var inpbh = $("#inner_postbox").height();
var inpbh_val = $("#box_area_height").val(inpbh);
$("#box_area").height(inpbh_val);
}
} else {
$("#box_area").autosize();
$("#box_area").attr('class', 'expand');
}
}
$("#box_area").autosize();
$("#box_area").keyup(function() {
if ($("#box_area").height() > 300) {
if ($("#box_area").hasClass("expand")) {
$("#box_area").trigger('autosize.destroy');
$("#box_area").attr('class', 'detract');
}
} else {
$("#box_area").autogrow();
$("#box_area").attr('class', 'expand');
}
});
$("#box_area").addClass('expanded');
just add this piece of code to the keyup function
$("#box_area").keyup(function() {
if ($("#box_area").height() > 300) {
if ($("#box_area").hasClass("expand")) {
$("#box_area").trigger('autosize.destroy');
$("#box_area").attr('class', 'detract');
$("#box_area").addClass('expanded');
}
} else {
$("#box_area").autogrow();
$("#box_area").attr('class', 'expand');
}
});
<style>
.expanded{height:300px; overflow-x:auto}
</style>
var minHeight = 50;
var maxHeight = 200;
$('textarea').on('input' , function(){
var clone = $(this).clone();
clone.attr('rows' , 1);
clone.css('height' , 'none');
clone.css('position' , 'absolute');
clone.css('visibility' , 'visible');
clone.val($(this).val());
$(this).after(clone);
var rowsCount = (clone[0].scrollHeight-2*parseFloat(clone.css('padding')))/clone.height();
var textHeight = rowsCount*parseFloat($(this).css('font-size'));
textHeight = textHeight > minHeight && textHeight < maxHeight ? textHeight : textHeight >= maxHeight ? maxHeight : minHeight;
$(this).attr('rows', Math.round(textHeight / parseFloat($(this).css('font-size'))))
$(this).css('height' , 'none');
clone.remove();
})
$('textarea').attr('rows', Math.round(minHeight / parseFloat($('textarea').css('font-size'))))
http://jsfiddle.net/yann86/5zrw3zrb/5/

Get the visible height of a div with jQuery

I need to retrieve the visible height of a div within a scrollable area. I consider myself pretty decent with jQuery, but this is completely throwing me off.
Let's say I've got a red div within a black wrapper:
In the graphic above, the jQuery function would return 248, the visible portion of the div.
Once the user scrolls past the top of the div, as in the above graphic, it would report 296.
Now, once the user has scrolled past the div, it would again report 248.
Obviously my numbers aren't going to be as consistent and clear as they are in this demo, or I'd just hard code for those numbers.
I have a bit of a theory:
Get the height of the window
Get the height of the div
Get the initial offset of the div from the top of the window
Get the offset as the user scrolls.
If the offset is positive, it means the top of the div is still visible.
if it's negative, the top of the div has been eclipsed by the window. At this point, the div could either be taking up the whole height of the window, or the bottom of the div could be showing
If the bottom of the div is showing, figure out the gap between it and the bottom of the window.
It seems pretty simple, but I just can't wrap my head around it. I'll take another crack tomorrow morning; I just figured some of you geniuses might be able to help.
Thanks!
UPDATE: I figured this out on my own, but looks like one of the answers below is more elegant, so I'll be using that instead. For the curious, here's what I came up with:
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});
Calculate the amount of px an element (height) is in viewport
Fiddle demo
This tiny function will return the amount of px an element is visible in the (vertical) Viewport:
function inViewport($el) {
var elH = $el.outerHeight(),
H = $(window).height(),
r = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}
Use like:
$(window).on("scroll resize", function(){
console.log( inViewport($('#elementID')) ); // n px in viewport
});
that's it.
jQuery .inViewport() Plugin
jsFiddle demo
from the above you can extract the logic and create a plugin like this one:
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el) {
function visPx(){
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
Use like:
$("selector").inViewport(function(px) {
console.log( px ); // `px` represents the amount of visible height
if(px > 0) {
// do this if element enters the viewport // px > 0
}else{
// do that if element exits the viewport // px = 0
}
}); // Here you can chain other jQuery methods to your selector
your selectors will dynamically listen to window scroll and resize but also return the initial value on DOM ready trough the first callback function argument px.
Here is a quick and dirty concept. It basically compares the offset().top of the element to the top of the window, and the offset().top + height() to the bottom of the window:
function getVisible() {
var $el = $('#foo'),
scrollTop = $(this).scrollTop(),
scrollBot = scrollTop + $(this).height(),
elTop = $el.offset().top,
elBottom = elTop + $el.outerHeight(),
visibleTop = elTop < scrollTop ? scrollTop : elTop,
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
$('#notification').text(`Visible height of div: ${visibleBottom - visibleTop}px`);
}
$(window).on('scroll resize', getVisible).trigger('scroll');
html,
body {
margin: 100px 0;
}
#foo {
height: 1000px;
background-color: #C00;
width: 200px;
margin: 0 auto;
}
#notification {
position: fixed;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>
The logic can be made more succinct if necessary, I've just declared separate variables for this example to make the calculation as clear as I can.
Here is a version of Rory's approach above, except written to function as a jQuery plugin. It may have more general applicability in that format. Great answer, Rory - thanks!
$.fn.visibleHeight = function() {
var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
scrollTop = $(window).scrollTop();
scrollBot = scrollTop + $(window).height();
elTop = this.offset().top;
elBottom = elTop + this.outerHeight();
visibleTop = elTop < scrollTop ? scrollTop : elTop;
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
return visibleBottom - visibleTop
}
Can be called with the following:
$("#myDiv").visibleHeight();
jsFiddle
Here is the improved code for jquery function visibleHeight: $("#myDiv").visibleHeight();
$.fn.visibleHeight = function() {
var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop, height;
scrollTop = $(window).scrollTop();
scrollBot = scrollTop + $(window).height();
elTop = this.offset().top;
elBottom = elTop + this.outerHeight();
visibleTop = elTop < scrollTop ? scrollTop : elTop;
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
height = visibleBottom - visibleTop;
return height > 0 ? height : 0;
}

Need equal height columns to resize with dynamic content

I have a script for equal height columns. I just ran into a problem where the table-filter/sort/paginate plugin can change the height of my inner window beyond the initial document load. Im not really sure how to use resize() correctly someone up for walking me through this?
/*******************************/
/* EQUAL HEIGHT COLUMNS
/*******************************/
$(window).load(function() {
var maxHeight = -1;
$('.equal').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.equal').each(function() {
$(this).height(maxHeight);
});
});
EDIT:
I tried to bind the resize and load like this, but did not work...
/*******************************/
/* EQUAL HEIGHT COLUMNS
/*******************************/
$(window).on("resize", function() {
var maxHeight = -1;
$('.equal').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.equal').each(function() {
$(this).height(maxHeight);
});
});.resize();
Try to change your code to:
$('window .equal').on('resize', function() {
var maxHeight = -1;
$('.equal').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
$(this).height(maxHeight);
});
});
EDIT: I lied, you need the jquery resize plugin for this to work!
<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.js"></script>
Window is not resizing, it is the .equal columns that resize. attatch to their resize event.
$('.equal').on("resize", function(){
var maxHeight = -1;
$('.equal').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.equal').each(function() {
$(this).height(maxHeight);
});
});
CSS
#wrapper{overflow:hidden;}
#div1{width:200px;background: red;float: left;padding-bottom:10000px;margin-bottom:-10000px;}
#div2{width:300px;background: blue;float: left;padding-bottom:10000px;margin-bottom:-10000px;}
HTML
<div id="wrapper">
<div id="div1">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div id="div2">
a<br>a<br>a<br>a<br>
</div>
</div>
You don't need any javascript, if you think your page could have more than 10000px hieght than just increase the padding-bottom and margin-bottom in negative and maintain in same amount.

Whats the best way to set height of datatables dynamically on window.resize?

I have multiple tabs in my application with multiple datatables.
I am trying to figure out a way to adjust the height of datatables based on the screen size.
I tried the below function, but it doesnt seem to increase the height of datatable when the window is resized. Any suggestions would be very helpful?
var calcDataTableHeight = function(percentageValue) {
return $(window).height()*(percentageValue)/100;
};
$(window).resize(function() {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
for(var i=0;i<table.length;i++){
$(table[i]).dataTable().css({ height: $(table[i]).dataTable().parent().height() });
$(table[i]).dataTable().fnAdjustColumnSizing();
}
}
}
});
I figured out a way to increase the height using scrollY parameter..sample snippet below...
$(window).resize(function() {
var table = $.fn.dataTable.fnTables(true);
if (table.length > 0) {
for(var i = 0; i < table.length; i++) {
$(table[i]).dataTable().fnSettings().oScroll.sY =
$(window).height() < 650 ? calcDataTableHeight(40) : calcDataTableHeight(54);
$(table[i]).dataTable().fnAdjustColumnSizing();
}
}
});
function calcDataTableHeight(percentageValue) {
return $(window).height()*(percentageValue)/100;
};
i used this and it worked
$(function(){
//set the main frame height on page load and page resize
windowHeight = function windowHeight(){
winHei = $(window).height()//window height without pixels
$('div.clients-content').css('height', winHei - 130 + 'px');//dataTables container//130 is for my page design consider your own
$('div.clients-content div.dataTables_scroll').css('height', winHei - 220 + 'px');//this is dataTable scroll container
$('div.clients-content div.dataTables_scrollBody').css('height', winHei - 250 + 'px');//this is dataTable scroll body
};
windowHeight();
$(window).resize(function(){
windowHeight();
});
});

Categories