We Keep Coding

Controlling the direction of JavaScript .show() / .toggle()?

I'm using JavaScript's .toggle() to have this appear/ disappear:
{
display: none;
position: fixed;
top: 100px;
right: 0;
left: 0;
background: rgba(0,0,0,0.75);
padding: 15px;
}
However, over the duration of the animation it starts from the top-left corner and expands out to the bottom-right corner of the div.
Ideally, I'd like to start it from the both top corners and expand downwards to both bottom corners evenly.
I thought the CSS transition-origin property might have an effect, but it doesn't seem to be the case.
Any ideas? Thanks in advance. :)

I would start a height of 0 and the animate the height property.
function toggle() {
var el = document.getElementsByTagName('div')[0];
if (el.className) {
el.className = '';
} else {
el.className = 'grow';
}
}
div {
background-color: black;
width:200px;
height: 0;
}
.grow {
height: 200px;
transition: height 2s;
}
<button onclick="toggle()">Toggle</button>
<div></div>

I don't know much about jQuery's toggle method, so I looked in the docs, and sure enough it gives some helpful info. (This is a gentle hint that before coming to StackOverflow you should try solving the problem on your own, including looking at any relevant documentation online).
The .toggle() method animates the width, height, and opacity of the
matched elements simultaneously.
The documentation doesn't give any info about customizing how toggle does its animation, so it looks like you're stuck. If I'm understanding you correctly, it seems like you want the element to animate only the height and not the width, so it stays the same width as it toggles and just animates the height. I don't see any way of doing that with jQuery's toggle.
BUT WAIT! It looks like jQuery has another method called slideToggle which does exactly what you want. It's just like toggle except it only animates the height and keeps the width the same. Hooray!
http://api.jquery.com/slidetoggle/
Moral of the story: if you're using a third party Javascript library like jQuery, you really need to get comfortable finding the information you need in the online documentation my friend. :)

How to transition a div between two parents?

I have two containers:
<div class="left">
<div id="myDiv">A Div</div>
<div id="myDiv2">A Div</div>
</div>
<div class="right">
<div id="myDiv3">A Div</div>
</div>
The first contains div elements, which are moved with the following jQuery:
$(".left > div").click(function(){
$(this).appendTo('.right');
});
The above, however, provides no animation. I would like to use a CSS transition to animate each div between the two parent elements (From .left to .right).
By the way, this is my CSS:
.left, .right{
position: absolute;
display: block;
box-sizing: border-box;
width: 50%;
height: 100%;
}
.left{background:red;}
.right{background:green; left: 50%;}
.left > div, .right > div{
display: block;
height: 100px;
width: 100px;
margin: 10px;
float: left;
background: #fff;
color: #000;
}
And a Fiddle: http://jsfiddle.net/x270Lndz/
I figure I need to get coordinates and transition between them, outside both .left and .right.

This has already been answered: https://stackoverflow.com/a/974765/2725684
The problem is 2 parts, moving elements in the DOM, and animating that movement, but the suggested is:
Store the position of the div, in its resting state, in the first column.
Append the div to the second column, store that position.
Turn off the visibility of the div.
Create a clone of the div, positioned where the resting state one was at.
Animate this clone across to the position of the appended div.
Turn off the visibility of this clone.
Turn back on the original div that was appended.
The javascript/jquery will execute this so fast you won't see the turning off/on of the divs and it will just appear as if the div they are seeing is the only one that ever existed.

Try adding transition: 0.5s ease-in to the .left div

Ultimately, this is going to be a lot of work, and I don't think I have the time to write every step out in full. But, if you're committed, here goes:
Call getBoundingClientRect() or similar on the first element to get its absolute document position relative to the document / viewport.
Use the same function, and getComputedStyle()s padding to determine the exact pixel at which content would begin in the second div.
Determine the difference between the two coordinates, in order to fake the transition while the elements are still inside their first parent. (Or, move them first, and fake the transition after)
Apply the correct transform: translate style to the elements, so that they'll appear to move into the other container. (This is assuming you have the transition properties set up correctly in CSS)
On the transitionend event, turn off transitions, remove the transform property, and do the actual child move.
Pat yourself on the back and go home early.
So there you have it. There's likely going to be a lot of math involved and small additions/subtractions I'm not able to predict. Hopefully, that outline helps you get started at least. You might also be lucky enough to find an animation library that does all of this for you. (Also note that I assumed the presence of several functions not supported on all browsers, so check to make sure they're okay by your book)

I wrote a jQuery plugin:
$.fn.transitionTo = function(target){
this.each(function(){
$this = $(this);
marginLeft = parseInt($this.css('marginLeft').replace("px", ""));
marginTop = parseInt($this.css('marginTop').replace("px", ""));
offset = $this.offset();
$new = $this.clone().appendTo(target);
offsetNew = $new.css('opacity',0).offset();
$this.css({
position: 'absolute',
left: offset.left - marginLeft,
top: offset.top - marginTop
}).appendTo("body");
setTimeout(function(a,b){
a.css({
left: offsetNew.left - marginLeft,
top: offsetNew.top - marginTop
});
setTimeout(function(a,b){
b.replaceWith(a.removeAttr('style'));
},2000,a,b); //Anim time
},10,$this,$new);
});
};
It is called similarly to .appendTo:
$(".left > div").click(function(){
$(this).transitionTo('.right');
});
...and only requires transition: top 2s ease, left 2s ease; on the div.
Fiddle: http://jsfiddle.net/d9yxrmvo/1/
The only known issue with this plugin is the lack of support for animating the original element's siblings.

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?

You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.

It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.

Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}

I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.

See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}

You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.

If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

Using image for webkit scrollbar - minimum height for -webkit-scrollbar-track-piece?

Using a background image for -webkit-scrollbar-thumb:vertical. Here's a jsFiddle: http://jsfiddle.net/6ESpj/2/
To simulate problem, increase the height in div.inner from 1500px to 2000px. You should see that the bottom get's cut off (I believe this is the equiv of the scrollbar 'shortening' in height as the page content grows).
Can anyone recommend a solution? Even a javascript one if necessary.
Thanks!

::-webkit-scrollbar-thumb:vertical
{
background:black url('http://i.minus.com/jbcOb9d7Bb1p6Y.png') no-repeat;
background-size:26px 63px;
background-position:;
display: block;
width: 30px;
height: 100px;
}
Try this, change height of this to whatever you want, if you wish you can with JS compute proper height, something like: height_of_::-webkit-scrollbar-thumb:vertical = height_of_div / SOME_CONSTANT... but I think that isn't necessary.

Overflow scroll on y axis with fixed height

I have an apparently easy problem which is:
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>​
I have 3 divs inside a container: A and B have fixed heights. C must have an extendable height, it extends along with the container height. If the content inside C are too big, I'd like C to scroll but to keep A and B in the same place.
Code in: http://jsfiddle.net/V2c9G/
I'm not able to do it.
I tried:
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="xxx" style="overflow-y:scroll">
<div class="c"></div>
</div>
</div>​
without success. The container div it's supposed to resize along the browser.
A complex example would be http://www.sencha.com/examples/#overview (I'm talking about the layout, make the browser smaller and you will see scrolls apperaring hile the headers keeps fixed) but it's not a solution since it uses JS to recalculate the heights.
Any idea?

Edit 3:
This is my recommended solution, which uses CSS from the Edit 2 below as a fallback, but uses JavaScript to resize your divs appropriately onload and when your window size changes. The CSS solution provides a decent starting point if the client has JavaScript disabled, and the JavaScript is such that it really shouldn't affect the performance of the page, so I see no reason not to use JavaScript to perfect what you want to see. A working fiddle can be seen here. Also, here is the appropriate JavaScript code:
var resizeDiv = function(){
document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};
//Framework code
var getWindowHeight = function(){
if (window.innerHeight) {
return window.innerHeight;
}
if (document.body && document.body.offsetHeight) {
return document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetHeight ) {
return document.documentElement.offsetHeight;
}
return 740;//provide a default height as a fallback
};
//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);
I think you need to adjust the absolute height on your third div to take up the rest of the space (either absolutely or with percentages), set overflow to hidden on the parent div, and let the content in the third inner div determine whether to show the scrollbar or not. Here's an updated fiddle using the absolute height method.
Edit:
From your "Imagine the container is the browser" comment (which to me means the scrollbar should be on the container), all you'd really have to do is set the overflow to 'scroll' and height in the third div to 'auto'. Here's an updated fiddle for that.
Edit #2:
According to your comment on this question, it sounds like you need to go with the percentage method. The most straightforward would be to make the height of a, b, and c a percentage (I had to tweak the margins to get it to fit for all zooms). Unfortunately with this method, the top components will not be fixed, and it sounds like you may be displaying static content there that would look funky. Thus, another option is to pick a minimum supported size for your browser window and adjust the percentage of the third element so that it just fits. Here's a fiddle for that. However, the downside there is that you'll have more empty space at the bottom of the page the bigger the height of the window, and you'll have 2 scrollbars below a certain height. To really do this properly with the fixed sized divs at the top, you'll need to add an event listener to the window.resize method and resize your third div when that happens appropriately based on the new size of the window.
Note: It is times like this where I wish the W3C would approve percentages plus pixels for their height, width, and other sizing properties!

I think you might be searching for something like this: http://jsfiddle.net/QsLFt/.
However, I'm not sure how to get rid of the divs hiding the scrollbar, the easiest solution would probably be to set it a fixed width?

You need to apply overflow-y:scroll in .container
See this,
http://jsfiddle.net/v4ZtN/
Edit (after comments):
Css:
.container{
background-color: red;
width: 90%;
margin: 0 auto;
height:220px;
}
.a{
background-color: yellow;
height: 30px;
margin: 2px;
}
.b{
background-color: blue;
height: 30px;
margin: 2px;
}
.c{
background-color: green;
overflow-y: scroll;
height:inherit;
}
Html:
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"><img src="http://www.boingboing.net/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>
Edit:2 (after comments)
Change .c style with this.
.c{
background-color: green;
overflow-y: scroll;
height:100%;
}
Check this fiddle:
http://jsfiddle.net/XM4gH/6/

div only show scroll when you put some data in it, here is the result;
jsfiddle

Based on what's currently up on your jsFiddle, I think you can simply add this to the style declarations for your .container class:
overflow:hidden;
You'll have to actually add content to the .c div to see any scrolling however.

did this anser is match to your request ? enter link description here
.container{
background-color: red;
width: 90%;
margin: 0 auto;
height: 315px;
}
.a{
background-color: yellow;
height: 30px;
margin: 2px;
width: 90%;
}
.b{
background-color: blue;
height: 30px;
margin: 2px;
width: 90%;
}
.c{
background-color: green;
height: 250px;
margin: 2px;
width: 90%;
overflow-y: scroll;
}
​

It's hard to tell exactly what you are trying to do based on the question, but if this is the desired result, these are the problems I discovered in your code:
You needed to hide overflow on the red box, so the green box does not extend beyond the container
In the green box, if there is enough data to extend, you want a scroll bar. This was working, but the height you had set specifically (250px) was enough to extend out of the container. You want a specific height here, the number is whatever is remaining in the container. I got 132px. Then with the overflow scroll applied, anything that extends beyond this height will be scrollable.