Preventing divs from clearing inside an animated container - javascript

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.
Here's what I mean: jsfiddle
How do I prevent them from clearing?

use max-width instead of width:
#container { max-width:500px; height:500px;border:2px dotted maroon; }
.red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}
here is the jsfiddle link
UPDATE:
to avoid clear try jsfiddle

Related

How to make grid of divs ignore eachother

So I have a grid of divs that I am removing with jquery's remove function. When one div is removed, the rest move. Is there a way to keep the grid's shape, and have the divs stay in place upon removal? Thanks.
LINK - https://jsfiddle.net/n4y6sfg6/7/
.boards{
height:630px;
width:630px;
background-color:orange;
border-radius:5px;
left:50%;
margin-left:-315px;
position:relative;
}
.row{
width:100%;
height:157.5px;
}
.cards{
width:120px;
height:125px;
display:inline-block;
margin:16px;
border-radius: 5px;
background-color:grey;
vertical-align:top;
}
Don't remove them, instead set visibility: hidden;
https://jsfiddle.net/n4y6sfg6/14/
Don't remove div.You can add a class to the div that you want to hide.For example
<div class="cards remove-card"></div>
then style the class like
.remove-card{
visibility:hidden;
}
If you want to continue to use jQuery, you could use the opacity function.
$("#element").opacity(0);
This will leave the element exactly where it is, but invisible.

Filling height using css

This is an age old question, although I wasn't able to find a solution that suited me.
Given a DIV inside a table cell (TD), I want to fill the DIV's height to fit the TD
+-----------+
| TD |
|+---------+|
|| DIV ||
|+---------+|
| |
+-----------+
Only gotchas are:
I don't want to set the height of the parent TD
I want to avoid using Javascript (prefer a CSS only solution)
Keep the resizable nature of the contenteditable DIV
Bonus: get it to work in IE8+ (cross browser solution)
Bonus: use display:flex; - I couldn't work this out, but looks like it should do the trick.
Too much to ask?
Example:
Get the "foo" DIV, to fill 100% height of their parent TD. I got something close to working, but having padding on the DIV element, throws out the borders (using Opera).
/* My Attempt: close, but the padding throws out the borders */
div{
display:inline-block;
height:100%;
width:100%;
}
http://jsfiddle.net/nickg1/g5cpQ/5/
Thanks!
yes, as per you terms and conditions, display:table is the best solution for you.
Add css like this :
div{
display:table;
height: 100%;
border:1px solid red;
}
Check following link for
LIVE DEMO
Try the following:
table {
height: 1px;
}
td {
vertical-align: top;
height: 100%;
}
div{
border:1px solid red;
padding: 2px 4px;
box-sizing: border-box;
}
/* My Attempt: close, but the padding throws out the borders */
div{
display:block;
height: 100%;
}
See demo: http://jsfiddle.net/audetwebdesign/AkjND/
The trick is to specify a height on the table, any small value will do the trick.
If you want to apply vertical padding to the inner div, you need to use box-sizing: border-box, which may work as far back as IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Is it possible to change default overflow:hidden border?

When I use overflow:hidden on a container div with an image slider inside, it hides the overflowing content perfectly, but creates a white border of about 50px wide on the right side.
I want the images to extend all the way to the edge of the page, or as close as possible.
Is it possible to make the 'border' that overflow:hidden creates transparent, or make it narrower?
Hmm.. Animuson is right. Overflow: hidden; doesn't add any border. If the images is a link, then it might have borders (but the default color isn't white).
But yeah, please add some source code for it. Without knowing the complete scenario, then something like this could possibly help you out:
HTML:
<div id="section1">
<img alt="foobar" src="the_URL" />
</div>
CSS:
#section1 {overflow: hidden; width: 100px; display: block; }
#section1 img {width: 100px; border: none; outline: none; display: block;}
not tested...
Let me know if it helps or not. If it doens't, then please elaborate.
It turns out that the way to fix this problem was to:
Set the outer container to width:100%,
Set the inner container to 60px more than total page width, and overflow:hidden
This reduced the 'border' (right margin whitespace) to any px width I set, as per the width of the inner container.
Code: http://www.benphilippi.com

How can I get Chrome to resize this div when the padding changes?

Update: added css transitions on fiddles to make it clearer
When the padding is removed from this div via javascript, Chrome doesn't resize the content to fit (i.e., the red div doesn't cover the yellow, it stays the same size):
http://jsfiddle.net/XDchs/4/
Likewise, if padding is added, the content is pushed outside of the div:
http://jsfiddle.net/XDchs/3/
Firefox resizes as I'd expect. Does anyone know why, and how to fix it?
HTML:
<div id="outer">
<div id="inner">
<div id="content">blah</div>
</div>
</div>
CSS:
#outer {
background-color:blue;
width:300px;
margin:0 auto;
}
#inner {
padding-left:100px;
margin:2px;
background-color:yellow;
-webkit-transition:padding-left 2s;
-moz-transition:padding-left 2s;
}
#inner.no-padding {
padding-left:0;
}
#content {
background-color:red;
}
JavaScript:
$(document).ready(function() {
$("#inner").addClass("no-padding");
});
I have no idea why Chrome appears to behave incorrectly, but you can work around with resetting the width:
#inner.no-padding {
padding-left:0;
width: 100%;
}
I ended up fixing this by setting the content's width to 100% via javascript after adding the CSS class: http://jsfiddle.net/XDchs/6/
$("#content").width("100%");
I couldn't find a CSS solution that completely worked.
Also, I filed this as a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=171060

Categories

Resources