Develop Reference

How to constrain rendered HTML code inside a div

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.

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!

Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}

Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.

Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

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;

overflow:hidden but let the content auto-scroll

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.
Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.

If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:
<div class="container">
<div class="wrap">
<p>bah</p>
</div>
</div>
and css:
.container {
y-overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
.wrap {position:absolute; bottom: 0; left:0;right:0;
}
http://jsfiddle.net/sXGd9/

append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.
As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.
Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars).
Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.

If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:
var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);
Is this helpfull?
Other solutions can be found in earlier post:
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Prevent scrollbar with MarginLeft style change?

I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?

The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}