I've got a couple of nested resizable div's that need to resize to accommodation the child size.
Everything works fine until i try to resize one of the outer div's (vertically) then it gets stuck.
Here's a fiddle.
$(function () {
$('.block').resizable();
$('.block').resize(resize_handler);
});
function checkChildren(object) {
$(object).children(".block").each(function (index, item) {
var itemH = $(item).position().top + $(item).height();
var itemW = $(item).position().left + $(item).width();
if ($(object).width() < itemW) {
$(item).width($(object).width());
checkChildren($(item));
}
if ($(object).height() < itemH) {
$(item).height($(object).height());
checkChildren($(item));
}
});
}
function checkParent(e) {
var object = $(e);
var par = object.parent();
var totalW = object.width() + object.position().left;
var totalH = object.height() + object.position().top;
if (totalH > par.height()) {
par.height(totalH);
checkParent(par);
}
if (totalW > par.width()) {
par.width(totalW);
checkParent(par);
}
}
function resize_handler(e, ui) {
e.stopPropagation();
var object = $(this);
var par = object.parent();
if (par.hasClass("block")) {
checkParent(object);
}
if (object.children('.block').length > 0) {
checkChildren(object);
}
}
Sure you've already thought of this but could you try limiting the resizeability of the parent div if its height is too close to the height of its child. Meaning when it is about to come in contact with the edge of a child then don't allow it to come any closer. Maybe maintain a buffer around the children of a few pixels which would force the user to adjust the child first before they could adjust the parent any smaller.
Just a thought.
Related
Added this code to my sticky element using position:sticky
var $sticky = $('.grid-container .sticky'),
$stickyTo = $('.grid-container .stickyTo'),
stickyToTop = $stickyTo.offset().top,
stickyToBottom = stickyToTop + $stickyTo.outerHeight();
$(window).on('scroll', function() {
var scroll = $(window).scrollTop(),
stickyTop = $sticky.offset().top,
stickyBottom = $sticky.offset().top + $sticky.outerHeight();
if (stickyBottom >= stickyToBottom) {
if (scroll < stickyTop) {
//$sticky.addClass('fixed').removeClass('abs');
} else {
//$sticky.addClass('abs');
}
} else if (scroll > stickyToTop) {
$sticky.addClass('stuck');
} else if (scroll < stickyToTop) {
$sticky.removeClass('stuck');
}
});
and I have two sticky elements see image attached but when I scroll to the first section it adds a class "stuck" on the second section, how can I make that only on that section jquery is triggered and not affect the second/other section unless scrolled on
Here is My FIDDLE
Because $sticky in your case is a jQuery collection with two elements in it you have to use .each() loop to check each element separately. Then you probably don't need $stickyTo, because you have to check for each 'sticky' element's own .parent(). Something like this:
var $sticky = $('.grid-container .sticky'),
$(window).on('scroll', function() {
var scroll = $(window).scrollTop()
$sticky.each(function(){
const $this = $(this)
const stickyTop = $this.offset().top,
const stickyBottom = stickyTop + $sticky.outerHeight();
const $stickyTo = $this.parent()
const stickyToTop = $stickyTo.offset().top,
const stickyToBottom = stickyToTop + $stickyTo.outerHeight();
if (stickyBottom >= stickyToBottom) {
if (scroll < stickyTop) {
//$sticky.addClass('fixed').removeClass('abs');
} else {
//$sticky.addClass('abs');
}
} else if (scroll > stickyToTop) {
$sticky.addClass('stuck');
} else if (scroll < stickyToTop) {
$sticky.removeClass('stuck');
}
})
});
Please note though, this function is not really optimized. It would be better to use native javascript during the scroll. Or even better check native CSS position: sticky.
I am dynamically resizing some boxes, and this functionality is placed inside my Images module. It works well, but since these boxes are present only on one part of the website, it throws me an error that it can't read the height property of undefined, which is obvious because the bundled file fires the window.resize but does not find the boxes, which blocks my other functionalities/modules.
So my question would be - is there a way to fire this resize event only if there are elements on the page that meet the certain class/id's (for example .box-image)... with some kind of conditional statement?
Many thanks for all possible hints.
EDIT: It throws error two times, first time because of the height property in the constructor, since this sets the initial height just after the reload.
class Images {
constructor() {
//make boxes same size as images initally and on resize
var images = $('.box-image');
var imageHeight = images[0].height;
var boxes = $('.content-box');
$(boxes).css({'height': imageHeight + 'px'});
this.events();
}
events() {
$(window).resize(function() {
var images = $('.box-image');
var imageHeight = images[0].height;
var boxes = $('.content-box');
if(images.length > 0) {
$(boxes).each(function (i, element) {
$(element).css({'height': imageHeight + 'px'});
});
}
});
}
}
An easy check before using the variable:
if (images && images.length > 0) { .. }
class Images {
constructor() {
//make boxes same size as images initally and on resize
var images = $('.box-image');
if (images && images.length > 0) {
var imageHeight = images[0].height;
var boxes = $('.content-box');
$(boxes).css({
'height': imageHeight + 'px'
});
this.events();
}
}
events() {
$(window).resize(function() {
var images = $('.box-image');
if (images && images.length > 0) {
var imageHeight = images[0].height;
var boxes = $('.content-box');
$(boxes).each(function(i, element) {
$(element).css({
'height': imageHeight + 'px'
});
});
}
});
}
}
Bring your var imageHeight = images[0].height; into your if statement like this
class Images {
constructor() {
//make boxes same size as images initally and on resize
var images = $('.box-image');
var imageHeight = images[0].height;
var boxes = $('.content-box');
$(boxes).css({'height': imageHeight + 'px'});
this.events();
}
events() {
$(window).resize(function() {
var images = $('.box-image');
var boxes = $('.content-box');
if(boxes && images.length > 0) {
var imageHeight = images[0].height;
$(boxes).each(function (i, element) {
$(element).css({'height': imageHeight + 'px'});
});
}
});
}
}
I guess this only is your each loop not working...
I assume that you want to change the height of elements which has content-box class only if there is an element having box-image class inside it.
First, no need for $() around element in that loop...
element is a variable which holds a content-box element while the loop cycles throught the collection held by the boxes variable.
class Images {
constructor() {
// Make boxes same size as images initally and on resize
var images = $('.box-image');
var imageHeight = images.height();
var boxes = $('.content-box');
boxes.css({'height': imageHeight + 'px'});
this.events();
}
events() {
$(window).resize(function() {
var images = $('.box-image');
var boxes = $('.content-box');
// If there is at least one image in the page
if(images.length > 0) {
// Loop all content-box
boxes.each(function (i, element) {
// Check if it has a box-image child
var childImage = element.find("'.box-image'");
if( childImage.length > 0 ){
var imageHeight = childImage.height();
element.css({'height': imageHeight + 'px'});
}
});
}
});
}
}
And no need for $() around boxes too, since this is already a valid jQuery collection.
(You also did it in constructor()).
i'm trying to change position of a child element(with varying height based on text) using range input,i would like to stop applying top position once the child div touches the bottom of the parent having fixed height.
$('#change_position').on('input', function () {
var val = +$(this).val(),
ScrSize = parseInt($('.screen').css('height')),
Stop = $('.screentip').offset().top,
h = parseInt($('.screentip').css('height')),
tofsset = Stop - h;
if (tofsset < ScrSize) {
$('.screentip').css('top', val + "%");
}
});
The height you are expecting jQuery to return is actually a string with the ending "px". You can use the function .height(). This will return you the height of the element as integer. I have tried a slightly modiefied version of your code:
$('#input').on('input', function () {
var val = parseInt($(this).val()),
ScrSize = parseInt($('#container').height()),
TxtSize = parseInt($("#text").height()),
Stop = ScrSize - TxtSize,
valInPixel = ScrSize * val / 100;
if (valInPixel < Stop) {
$('#text').css('top', val + "%");
}
else
{
$("#text").css("top", Stop + "px");
}
});
The else part will position your element to the bottom, if the number exceeds the frame. You may also have to be aware of padding and margin. This could also lead to mispositioning.
Hope this helps.
I'm trying to resize 3 panes inside a container , when resized, they shouldn't exceed the width of container (do not get out of it)..
But in this snippet http://jsfiddle.net/KXsrd/ , when I resize the second one, it successfully decreases the next element or increases depending on the direction. but sometimes it causes the next sibling to drop below the container and although the next sibling decreases its size when I expand one , it keeps 'shaking' ..
Here is the main function:
$(function () {
$('.col').each(function (e, u) {
$(u).data({ow: $(u).width()});
})
$(".col").resizable(
{
handles: 'e',
start: function (e) {
},
resize: function (e, ui) {
var el = ui.element;
var parent = el.parent();
var next = el.next();
var siblings = el.siblings();
var siblingsWidth = (function () {
var totalWidth = 0;
_.each(siblings, function (el) {
totalWidth += $(el).width();
});
return totalWidth;
})();
var currentSize = ui.size;
if (currentSize.width > $(el).data('ow')) {
next.css({width: '-=' + (currentSize.width - $(el).data('ow'))});
} else {
next.css({width: '+=' + ( $(el).data('ow') - currentSize.width )});
}
if (currentSize.width + siblingsWidth >= $(parent).width()) {
$(el).width($(parent).width() - siblingsWidth)
}
$(el).data({ow: currentSize.width});
},
stop: function (e, ui) {
}
});
});
Any help would be much appreciated ..
(PS. I tried many plugins for resizable panes. but they all work on 2 panes only)
I have a single level navigation list. What I want to do is, on window resize, add a dropdown at the end to display elements that do not fit the window width.
Below an image representation:
var base = this,
container = $(base.selector),
items = container.find('>li:not(.smallmenu):visible'),
count = container.find('>li:not(.smallmenu):visible').length,
listWidth = [],
added;
items.each(function() {
listWidth.push($(this).width());
});
function getWidth() {
var width = 0;
container.find('>li:not(.smallmenu):visible').each(function() {
width += $(this).outerWidth();
});
return width + 100;
}
function hideLast() {
var i = container.find('>li:not(.smallmenu):visible').last().index()
if( $(window).width() < (getWidth()) ) {
items.eq(i).hide();
if(!added) {
$('<li class="smallmenu"><i class="fa fa-plus"></i></li>').appendTo(container);
added = true;
}
}
}
function showLast() {
var i = container.find('>li:not(.smallmenu):visible').last().index();
if( (getWidth() + listWidth[i+1]) < $(window).width() ) {
container.find('>li:not(.smallmenu)').eq(i+1).show();
if((i+2) === count) {
container.find('.smallmenu').remove();
added = false;
}
}
}
$(window).resize(function() {
showLast();
hideLast();
});
However this is not working as expected and half-done. I feel like I am heading in the wrong direction.
EDIT: Here is an updated jsFiddle: http://jsfiddle.net/anteksiler/zyv8f/1/ Resize your browser to get the effect.