Need equal height columns to resize with dynamic content - javascript

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.

Related

resize bootstrap div on window resize

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!

same height of multiple li in javascript

i am new in javascript. its working fine if we refresh the page but its not working when we resize the window.
$(window).load(function(){
equl_height();
});
$(window).resize(function(){
equl_height();
});
function equl_height () {
var highestBox = 0;
$('ul li').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('ul li').height(highestBox);
}
window.addEventListener("resize", equl_heigh);
cheers!
Problem is in how you measure height of an li. use scrollHeight instead of height(). Check this fiddle.
Update your equl_height method with
function equl_height () {
console.log( "resizing" );
var highestBox = 0;
$('ul li').each(function(){
//var height = $(this).outerHeight();
var height = $(this)[0].scrollHeight;
if(height > highestBox){
highestBox = height;
}
});
$('ul li').outerHeight(highestBox);
}
Also, since resize event can be fired at a higher rate so try this throttling trick as well.

Equal Heights JS

Good evening,
I have been using a javascript to generate equal height columns using the following JS:
<script type="text/javascript">
var maxHeight = 0;
$(".level").each(function(){
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);
</script>
However, I wanted to be able to add additional classes and was advised to amend my code to that shown below. One other reason was to prevent the script creating a global variable like the one above.
Now the problem is, the first class works but the additional ones don't seem to be. They are generating a height but not an equal height. Can anyone help me work out the problem?
<script type="text/javascript">
(function() {
function equalHeights(selector) {
var maxHeight = 0;
function calcEqualHeight() {
var el = $(this);
maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
el.height(maxHeight);
}
selector.each(calcEqualHeight);
}
equalHeights($('.level-1'));
equalHeights($('.level-2'));
equalHeights($('.level-3'));
})();
</script>
You need to set the height after you complete the loop:
(function() {
function equalHeights(selector) {
var maxHeight = 0;
function calcEqualHeight() {
var el = $(this);
maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
}
selector.each(calcEqualHeight).height(maxHeight);
}
equalHeights($('.level-1'));
equalHeights($('.level-2'));
equalHeights($('.level-3'));
})();

adjust div margin top using variable - jquery

I have a diva and its height is auto calculated using jquery using
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
})
$(window).resize();
});
I have another div with id content2 and I want to set the value stored in the variable var height as its margin-top. How can I do this??
Thanks in advance...:)
blasteralfred
Use the .css() method.
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
$('#content2').css('marginTop', height); // <-- set here
});
$(window).resize();
});
$('#content2').css('margin-top',height);
//Calculate the height of the offset needed.
var height = $('.navbar-fixed-top').height() + $('.navbar-static-top').height() + 70;
//Then on click on the navbar tab change the offset of the div according, to the top of the window
$('#r_overview').click(function () {
$(window).scrollTop(($('#hackathon_overview').offset().top)-height);
});
$('#r_rules').click(function () {
$(window).scrollTop(($('.rules_row').offset().top)-height);
});
Hope this helps

jquery: $(window).scrollTop() but no $(window).scrollBottom()

I want to place an element to the bottom of the page whenever the user scrolls the page. It's like "fixed position" but I can't use "position: fixed" css as many of my clients' browser can't support that.
I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport?
So I am asking how to know: $(window).scrollBottom()
var scrollBottom = $(window).scrollTop() + $(window).height();
I would say that a scrollBottom as a direct opposite of scrollTop should be:
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
Here is a small ugly test that works for me:
// SCROLLTESTER START //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - $(window).height() - scrollTop;
showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
For the future, I've made scrollBottom into a jquery plugin, usable in the same way that scrollTop is (i.e. you can set a number and it will scroll that amount from the bottom of the page and return the number of pixels from the bottom of the page, or, return the number of pixels from the bottom of the page if no number is provided)
$.fn.scrollBottom = function(scroll){
if(typeof scroll === 'number'){
window.scrollTo(0,$(document).height() - $(window).height() - scroll);
return $(document).height() - $(window).height() - scroll;
} else {
return $(document).height() - $(window).height() - $(window).scrollTop();
}
}
//Basic Usage
$(window).scrollBottom(500);
var scrollBottom =
$(document).height() - $(window).height() - $(window).scrollTop();
I think it is better to get bottom scroll.
This will scroll to the very top:
$(window).animate({scrollTop: 0});
This will scroll to the very bottom:
$(window).animate({scrollTop: $(document).height() + $(window).height()});
.. change window to your desired container id or class if necessary (in quotes).
try:
$(window).scrollTop( $('body').height() );
Here is the best option scroll to bottom for table grid, it will be scroll to the last row of the table grid :
$('.add-row-btn').click(function () {
var tempheight = $('#PtsGrid > table').height();
$('#PtsGrid').animate({
scrollTop: tempheight
//scrollTop: $(".scroll-bottom").offset().top
}, 'slow');
});
// Back to bottom button
$(window).scroll(function () {
var scrollBottom = $(this).scrollTop() + $(this).height();
var scrollTop = $(this).scrollTop();
var pageHeight = $('html, body').height();//Fixed
if ($(this).scrollTop() > pageHeight - 700) {
$('.back-to-bottom').fadeOut('slow');
} else {
if ($(this).scrollTop() < 100) {
$('.back-to-bottom').fadeOut('slow');
}
else {
$('.back-to-bottom').fadeIn('slow');
}
}
});
$('.back-to-bottom').click(function () {
var pageHeight = $('html, body').height();//Fixed
$('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
return false;
});
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
For an item in my page :
document.getElementById(elementId).scroll(0,
document.getElementById(elementId).scrollHeight);
function scrollBottum(elementId){
document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}
<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
<div>1: A First ...</div>
<div>2: B</div>
<div>3: C</div>
<div>4: D</div>
<div>5: E</div>
<div>6: F</div>
<div>7: LAST !!</div>
</div>
</html>
i try that and it work very well
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
i try that code and it work
// scroll top
scroll(){
let x:any= document.getElementById('chat')
x.scrollTop = 9000;
}
// scroll buttom
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
This is a quick hack: just assign the scroll value to a very large number. This will ensure that the page is scrolled to the bottom.
Using plain javascript:
document.body.scrollTop = 100000;

Categories