Develop Reference

Programmatic scroll on a div with parent with overflow-x hidden

It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this

It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.

Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work

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.

Creating a draggable, resizable div container with inner scrollbars

I have a container, made up of an outer div with a scrolling inner div, like so: (note this is stripped down version of what I'm actually doing)
HTML:
<div class="faq-clone">
<div class="faq-clone-content">
Some text goes here.
</div>
</div>
CSS:
.faq-clone {
overflow: auto;
}
.faq-clone-content {
overflow: auto;
width: 375px;
max-height: 400px;
}
The idea is to have .faq-clone draggable and resizable, but for resulting scrollbars to still only appear on the inner div, faq-clone-content. I'm working with an existing project, so I started just by added .draggable() in jQuery, as shown in the following fiddle:
http://jsfiddle.net/jessikwa/5LrL3/2/
Simple enough, it still functions as it should. To get the resizing I understand the CSS will need to change. I added .resizable() to .faq-clone and tweaked the CSS so that the outer container has the width/height set and overflow set to hidden, as seen in this fiddle:
http://jsfiddle.net/jessikwa/5LrL3/4/
The container resizes fine, but the inner scrollbars are lost. Changing overflow:hidden on .faq-clone doesn't seem to be the answer, but without it I gain scrollbars on the outer div, which is undesirable. Any ideas on how the CSS should be set to accomplish this?

Using jQuery to set faq-clone-content to the size of it's parent faq-clone seemed to do the trick.
$(".faq-clone-content").css('height', faqClone.height() + 'px');
See fiddle: http://jsfiddle.net/jessikwa/5LrL3/9/

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

Thumbnails from JS Gallery Placed in Footer

I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).

If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
remove position:relative from #container
remove position:relative from .galleria-container
add position:absolute to .galleria-stage and remove left and right
positioning. Also, add top:90px (or something close to that) and
give it a width: width:920px.
change .galleria-thumbnails-container to use absolute positioning and
use the bottom:___ property to set it where you belong.
Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.