Develop Reference

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%;.

scroll and position: fixed inside overflow: scroll div

I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/

Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18

Darken Background - Without affecting elements itself. (Overlay?)

I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks

Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz

See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/

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;

Get rid of useless scroll bars on fancybox iframe

I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.

If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}

Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.