jquery-ui resize child divs also - javascript

I am creating a website I have divs which are resizable using jquery. When I resize them only the width of the child divs get resized. You can see the site and its code here. How can the height of the child divs get resized too?
Edit
Ok I solved it by adding this code:
$(".window").resize(function()
{
$(this).children('.inner').css(
{
height: $(this).height()-2
});
$(this).children().children('.content').css(
{
height: $(this).height()-$(this).children().children('.top').height()*2
});
});

you need to change the child div height to 100%
in your case the div with class = "inner" need to have css property
div.inner
{
height = 100%
}

Related

allow the parent to scroll the whole width/height of child element even when child scale is transformed by matrix

So I've got a div with a child element, and the child element is zoomable. To zoom the child element, I use matrix to transform to the new scale, but I'm noticing an issue: when the scale is greater than 1, the child element is larger than the scroll bar of the parent element, so when you scroll to the end, some of the child element is cut off. How do I fix this?
EDIT
I've tried setting overflow: scroll as opposed to the overflow: auto that I"m currently using, and I've tried expanding the width/height of the parent div, but neither worked. Expanding the width/height of the parent div just makes it larger on the page
EDIT 2
According to this stackoverflow question, what I needed was to add the style transformOrigin: 0 0 when I zoom the chart. that fixes the cropping
Hope this helps someone who finds this answer via Google like I did.
I had an issue like this where the parent wouldn't scroll past the original height of the child, so if I scaled the child up, the parent would stop scrolling before reaching the end of the child element. And if the child was scaled down, the parent would scroll past the end of the child element, letting the child element scroll out of view.
The way I solved this problem was to put the child element inside a wrapper element, with the height of the wrapper element set to the original height of the child element, and the wrapper element set to overflow = hidden. Then, when scaling the child element up or down, I change the height of the wrapper element by the same scale (via javascript).
HTML
<div id="parent">
<div id="wrapper">
<div id="child">
Content goes here
</div>
</div>
</div>
CSS
#parent {
height: 300px;
overflow: auto;
}
#wrapper {
height: 1200px;
overflow: hidden;
}
#child {
height: 1200px;
}
JavaScript/jQuery
function zoomChild(scale) {
var originalHeight = 1200;
$('#child').css('transform', 'scale(' + scale + ')');
$('#wrapper').css('height', (originalHeight * scale) + 'px');
}

A div that dynamically keeps the body's height

I want my div to fit the body's height and always touch the bottom of my body when I scroll, so I made it 100% height.
But I've quickly understood that isn't the right solution. When another div goes away from the window, when I scroll, I see my div scrolling with a margin right down to it between the bottom and it.
So I've just made a small snippet in jQuery:
$(window).resize(function(){
var pageHeight = $(document).height();
$('#menu').css('height', 'px');
$('#menu').css('height', pageHeight + 'px');
});
But it doesn't work well.
So I don't know what to do.
Maybe you mean that (CSS):
div {
height: 100vh; // 100% of view height
}
So, di don't know why but, i set my div's height like that:
min-height:900;
height: 100%;
max-height:200%;
And it works... i really don't know why. Anyway, I don't need help anymore.
Thanks to everybody who helped me!
Try with this code, you can change the menu height with its body height.
$(window).resize(function(){
$('#menu').height($(document).height());
});

The height of the menu is not correct CSS

I'm working in a home page, it's working correctly, but the menu on the left sidebar, it's not making and overflow correctly. I need the scrollbars on the menu, 'cause I don't want it on the page.
I think the issue it's with the height, but I need the 100% of the height not in pixels, somebody can help me?
Here you are de JsBin: http://jsbin.com/ceyij
It is because you have only given 99% height to your html.Just make it 100%
In ceyij.css, you have given height:99% !important in html and body tag
and also give overflow:hidden so
just remove height 99% and give overflow:auto instead of hidden
it not proper look like
In order for an element to have 100% height, the parent element that wraps it must also have either a fixed or percentage height.
So with that in mind you will need 100% heights on both the HTML and BODY tags like this:
html, body
{
height:100%;
width:100%;
}
For the particular list items
#menu_panel {
height:100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
}
I've got the best result with the following thanks to jQuery
$(document).ready(function() {
// Handler for .ready() called.
var alt = $(".wrapper").height();
$(".left-side").height(alt);
$(".sidebar").height(alt - 153);
var altHeader = $("header.header").height();
$(".sidebar-menu").height(alt - 153);
});

DIV Inside jQueryUI Dialog is overflowed after multiple resizes to the dialog

Hello and thank you all for the quality answers that I always found here...
I have a jQueryUI dialog with a DIV inside...
This div is set to fill the dialog space:
div.dialog-contents {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
When I start resizing the dialog (horizontal or vertical) it slowly starts to shrink or enlarge beyond the dialog boundaries!!!... this is weird...
When I inspect the element with debugging tools I notice this:
In the outer div (the div in wich the dialog is created) the size is computed this way:
width: 294.960000038147px;
But in the inner div (the one set to fill space) it is rounded, so it starts to be different pixels as I resize the dialog
width: 248px;
I dont know what I'm doing wrong, should I use some other setting to accomplish this?
I Just want my internal div to be always 100% width and 100% height (and staying inside dialog boundaries)
Here's the fiddle
http://jsfiddle.net/e9QjD/2/
Try to resize several times the dialog to see the behaviour
Thank you very much!
The following is a possible work around.
I did see there was an issue with the height of your window-session-editor the height keeps increasing slightly relative to the modal on each re-size. I could not see an issue with the width changing. I'm not sure why this is happening but a work around would be to re-adjust the height after every re-size.
$(function () {
$("#window-session_editor").dialog({
resizeStop: function( event, ui ) {
$(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
}
});
});
http://jsfiddle.net/e9QjD/3/
Update addressing width
$(function () {
$("#window-session_editor").dialog({
resizeStop: function( event, ui ) {
$(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
$(this).width($(this).prev('.ui-dialog-titlebar').width()+2);
}
});
});
http://jsfiddle.net/e9QjD/4/

Making a div scrollable inside a resizeable container div

I am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(
Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE
Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)
I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}
Add the CSS property
overflow:auto;
Just add this to your CSS
overflow: auto;

Categories

Resources