Ok, so I'm trying to get an element to be the full height of a page. My html element is matching the pages size even when I resize or open up the inspect element box and close it, but my body and other elements won't, so instead I am using javascript to make my element the size of the html box, which works, but when you resize the browser window or close/open the developer tools, the html element resizes but the other element doesn't.
Is there some way to add a listener on my html element to run a function when it changes height?
Here is some code I've tried using what someone suggested but doesn't work:
$('#program-cell').height($('html').height());
$('html').resize(function () {
$('#program-cell').height($('html').height());
});
After adding the .resize() plugin one of the answers suggested I was able to get it almost working. When opening and closing the developer tools it works, but resizing the window didn't change anything. I guess because I am matching the size of the html element, the html element will grow though to match the size of the object I'm resizing, which means it will only get bigger and never smaller.
I had to clear out the height of the object I'm resizing by setting it's height to auto, then match the height of the html. I finally got it working, and here is the code that works:
$('#program-cell').height(($('html').height()-84)+'px');
$('html').resize(function () {
$('#program-cell').height('auto');
$('#program-cell').height(($('html').height()-84)+'px');
});
I have the -84 to subtract the height of my header.
You don't need JavaScript at all.
html, body { height:100%; }
div { height:100%; }
<html> <!-- 100% of window height -->
<body> <!-- 100% of html height -->
<div></div> <!-- 100% of body height -->
</body>
</html>
JSFiddle example.
If your divider's parent has a value which isn't 100% height your divider will not have 100% height relative to the page body.
<html> <!-- 100% of window height -->
<body> <!-- 100% of html height -->
<div style="height:30px"> <!-- 30px high parent -->
<div></div> <!-- 100% of parent height = 30px -->
</div>
</body>
</html>
There's a plugin to add listeners for element resizing that you can use to do just that. Check it out here.
Alternately, .resize() works on window.
Related
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
I have a parent div with id contentPlaceHolder. It has a width of 640px. I then have content loading into this div with ajax as follows:
function loadContent(page){
$("#contentPlaceHolder").html('<br><br><div style="width:664px; text-align:center; font-size:12px; color:#666;"><img src="/images/loader.gif" border="0"><br>loading</div>');
$("#contentPlaceHolder").load("/ajax/content?page=" + page);
}
<div onclick="loadContent('profile')">Profile</div>
<div id="contentPlaceHolder" style="width:640px; height:auto; text-align:left;"></div>
problem is, my parent div contentPlaceHolder does not automatically grow with the ajax content. I tried make the div height:auto and that did not help. Only way it seems to work is if I fix a height but problem with that is I cannot fix a height as the content length varies.
Any advice as to how I can achieve this?
Thanks
Content loaded with .load() should automatically adjust the height of the container unless the height is specifically set on the content that was loaded, the container, or one of its parent elements.
Use your browser's built in developer tools (chrome, firefox) to inspect the container element, its contents after the ajax load, and it's parent elements. I would bet that somewhere you will find a height property set to a specific value and possibly even an overflow property set to hidden.
Here is a fiddle that demonstrates the height auto adjusting even with a min-height and overflow:hidden set (tested in chrome and firefox).
I`m using tinymce plugin, and I have a little problem.
In the TOOLS tab there is source button (here is a link http://www.tinymce.com/). When I click on it, new pop-up window appear.
So, the problem is that for some monitors, this window is too big, because width and height set in px.
Is there some way to change this properties from size in px to percent? For example from width:640px and height:630px (as in example) to width:52% and height:75%
Try keeping the textarea for TinyMCE in a div and style it to your requirement
For Example:
<style>
#div
{
width : 50% !important;
}
</style>
<div id="div">
<textarea>text</textarea>
</div>
Hope this helps you.
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;
I have a problem positioning a Flash element inside a div tag. The problem is, that the flash element is changing it's size based on the user input. I need a way how I can dynamically get the actual size of the flash element, and to change the behavior of the div element the flash is integrated in. actually I want to place it in the middle of the div.
right now I gave the flash element width and height of 100% but that way I can not center the element inside the div...
Any solution? I might need javascript right? Im a newby in javascript!
Maechi
If there's no interaction needed with surroundings of flash, you could include transparent 100% wide and 100% height flash and resize and position moviechild in it through flashvars
if you have:
<div id="container">
<object id="#flash">...</object>
</div>
you can try this css:
#container {
width: <larger or equeals than max flash width>px;
}
#flash {
margin: 0 auto;
}