We Keep Coding

Make room between divs when clicking a div to show hidden content

What I want to do is add functionality such that if I click any div bar, space opens up below it to allow me to see a hidden div. Clicking the original bar will re-hide the hidden div and remove the expanded space between the div bars.
When the hidden divs are hidden the layout looks like this:
When a div bar is clicked, the layout expands so that the hidden div is visible between the rows of div bars. The space between the bars expands to make room for the hidden div. (Blue "Hidden 2")
This is not a duplicate of another question out there because all of the other questions were more narrow and do not address the functionality I am trying to achieve with divs.
.bar {
width: 400px;
height: 30px;
border: solid 1px #aaa;
border-radius: 8px;
padding: 20px;
font-size: 24px;
margin: 15px;
background-color: #ccc;
z-index: -2;
}
.hidden-data {
display: none;
width: 350px;
height: 70px;
border: solid 1px #aaa;
border-radius: 8px;
padding: 20px;
font-size: 24px;
margin: 15px;
background-color: #e6eeff;
z-index: 1;
}
<div class="bar" id="bar1">Bar 1</div>
<div class="hidden-data" id="hidden1">Hidden 1</div>
<div class="bar" id="bar2">Bar 2</div>
<div class="hidden-data" id="hidden2">Hidden 2</div>
<div class="bar" id="bar3">Bar 3</div>
<div class="hidden-data" id="hidden3">Hidden 3</div>
<div class="bar" id="bar4">Bar 4</div>
<div class="hidden-data" id="hidden4">Hidden 4</div>
I have seen solutions that use < ul > < li > and solutions that use checkboxes, but I am using neither. (And I could get neither to work with my divs)
I have seen solutions that use spans, but those only support one row. If you add more than one row, then both rows respond to the click.
https://jsfiddle.net/tzfa81cp/73/
I saw a solution that uses < summary > < details > which looks like it is an all text version of the functionality I want, but this seems like it may not be supported by most browsers. (And I couldn't get it to work with divs.)
http://jsfiddle.net/thurstanh/emtAm/2/
A CSS solution would be great if there is one, but am definitely open to a JavaScript solution. I am new to jQuery
To reiterate the question:
I want to be able to click Bar 1 and have a box "Hidden 1" open below it, moving the other div bars down to make room. Then to close the hidden div, I click Bar 1 again. (or click an x in the hidden div).
How can this be done?
My codepen is here:
https://codepen.io/Chris_Nielsen/pen/xWNmYy

The Summary/Detail solution is toggling due to built in functionality - something div's do not have out of the box.
A jQuery solution would be simple, something like:
$(function() {
$(".bar").click(function() {
$(this).next(".hidden-data").toggle();
});
});

I have seen simple solutions to this problem using Javascript. In theory, you could have a div set up to display, ":hover" (sp?), but I have never seen it in practice. Worth exploring?

On this div slideshow there is inconsistent margin jumping after margin-left slide.It starts on the second cycle

Right now when you click the next button you get a smooth animation but when you get to the copy of the div that was detached when it went out of view on the left side and appended to the wrapper the sliding animation gets a little choppy. I want it to always be smooth like at the beginning. I'm guess that the problem is that I'm adding .css({"margin-left" : "5px"}) and that is messing up with the original sliding functionality -- $(".element").eq(0).css({"margin-left" : "-245px"}) I had to add the margin 5px otherwise the newly attached divs didn't show any margins. (they were staking up on each other)
$(document).ready( function(){
$(".next").on("click", function(){
$(".element").eq(0).css({"margin-left" : "-245px"}).delay(1000).queue(function(next){
$(this).css({"margin-left" : "5px"}).appendTo(".wrapper");
$(this).dequeue();
})
})
});
css:
.mgcont{
margin:5% auto;
width:970px;
overflow: hidden;
border: 2px solid gray;
}
.wrapper{
/*overflow: hidden;*/
white-space: nowrap;
width:960px;
}
.element{
width: 240px;
height: 300px;
background: tomato;
display: inline-block;
margin-left: 5px;
transition: margin-left 1s;
}
.prev{
float: right;
}
html:
<div class="mgcont">
<button class="next">next</button>
<button class="prev">PREV</button>
<div class="wrapper">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
</div>

This looks like it's being caused by the fact that, based on the initial mark-up, the inline-block styling is an adding an extra ~4-5 pixels after each block, as discussed here. Something about the jQuery append, however, is adjusting the mark-up so that the extra padding goes away on round two (probably by stripping space between tags).
It looks like you were compensating for the initial extra padding by making the negative margin 5 more pixels ({"margin-left" : "-245px"}) than their actual width (width: 240px) should require. On the first go-around, this made the "next" block appear to land more or less in its place. But on subsequent loops, it moved the elements "too far", hence the jumping back.
To solve:
First step would be to change the negative margin effect to use the same width as the blocks, i.e. {"margin-left" : "-240px"}. However, this alone makes the first loop have a bit of jumpiness (though not as noticeable, in my opinion), so:
Next would be to deal with the extra padding. I guess you have a few options.:
The easiest would be to just use float: left; instead of display: inline-block. Float doesn't have the extra-padding problem. But if floats create more issues, you could try:
Using a different CSS hack described in the above link, e.g. set .wrapper to font-size: 0; and .element "back" to font-size: 16px. Bleh.
Re-writing the mark-up by hand. Yawn-and-a-half. And not always possible.
Replicate the re-write of the mark-up with jQuery, by doing something like this:
$(".element").each(function(){
$(this).appendTo(".wrapper");
});
though that feels hackish too (and I don't know what performance ramifications it may have).

Single window application with 100% height and no scrollbars

I am currently developing a web application using jQuery.
The layout for the same goes as shown in the figure given below:
The orange color box at the very back should be 100% in height and width with some margin like 5px or so.
The logo and the tab-bar are placed as shown and are about 50px in height. But tab-bar should take size as shown with some margin.
The tab content should occupy the remaining height and should scroll for the contents it occupies.
Similar structure is required for the internal menubar and tab content.
Can anyone please suggest the layout method to employ?
Or how can I manipulate different heights/widths?
The requirement also suggests a responsive window i.e. the width/height to manipulate on resize.

The jsFiddle I said I'd make.
As you'll see, I make use of jQueryUI for the "tabs" layout and simply "add" a few things. The few things I "Add" are simple and the jQueryUI alreqady provides a strong CSS with which to manipulate to get desired result. Also attached to that page is a theme-switcher, so you could see what it would look like using different jQueryUI Default Themes.
I'll try to explain the process as shortly as possible without being to vague.
HTML
I first start with a basic page wrapper. Not too necessary, but it provides a nice "element" with which to work inside of and possibly make manipulations for page layout change in otherways in the future. For now it simply holds our page "padding" of 5px. The HTML and BODY tags will be set to a default and should not be manipulated beyond that as height and other properties begin to take different meanings for these tags in different browsers.
I then place 2 divs inside this wrapper, again, these could be done without depending on your needs. I like these 2 divs and use this alot because it provides "vertical align -> middle" as one might expect. The first, parent, is a div with class table. This will have its display set to table to provide a "table-like" layout but still have the ability to do things like "round the corners" or, as in my case, set height! The second, child, is the same except it will have a class and style as table-cell, respectively. This allows us to set something like vertical-align: middle; and ensure that this element is in the vertical middle of the page/table element. Again, with your layout, this may seem unneccessary, but I don't know your full expected end result and I'm trying to give as much "fluid dynamics" to the page as possible.
Finally, I first insert the jQueryUI tabs HTML in their expected layout, with 2 small differences. I place our "logo" in a custom span tag just before the ul. I also take the ui-tab-panel(s) and place them in their own container. This helps us adjust the height of our tabs area as needed. I also gave this container overflow, so even tho overflow maybe hidden on the body, it's still available for the tabs. (see also: small blog i wrote on jQueryUI Tabs)
<div class="page-wrapper">
<div class="table">
<div class="table-cell">
<div id="tabs">
<span class="my-logo">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
</span>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div class="ui-tabs-panel-container">
<div id="tabs-1">
<<p> ... </p>
</div>
<div id="tabs-2">
<p> ... </p>
</div>
<div id="tabs-3">
<p> ... </p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
As I mentioned before, jQueryUI provides us with a strong CSS to work with already. As you might have noticed, I made use of some of this by using their predefined class names throughout the HTML. This established things like background, color, and even font-family and more! Now that that is over with, let's layout our page mechanics first. As I mentioned, I give a very "direct" set of properties to HTML and BODY. This will help eliminate "Cross-browser-issues". I also provided a background color, tho you could set that at one of the children levels. This was done just to show you where HTML, BODY exist.
I then set our "frame" elements. .page-wrapper will provide our page wrapping, sizing will come from within, so there is no need to deal with it here. The .table and .table-cell provide display exactly as their name suggest. As previously mentioned, this provides a nice ability to maintain an element in the exact "center" of something, even vertically!
Now we manipulate our tabs and content. I use #tabs throughout to maintain "name-spacing". This will not only help with any "css overrides" on jQueryUI presets, but also helps keep page layout confusions to a minimum. This is always a good thing.
The first thing I manipulate is the placement and setting of our custom span for the logo. Then, of course, I have to change the ul to next to it. Thus I look at the CSS for the uls class. If I open edit tools in a browser, I can see the ul is given the classname ui-tabs-nav and I can see it has a margin setting. If I play with the margin-left of this ul I can see that nothing is affected but the left side of the ul. PERFECT! Here is what I must manipulate to set our log in its "own space".
Finally, I simply set our tabs container (given custom class name, ui-tabs-panel-container, made to match jQueryUI) to have overflow, so that if any content exceeds our page height, it can still be scrolled within this element.
html, body {
background-color: #ADDFFF;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.page-wrapper {
padding: 5px;
}
.table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
#tabs .my-logo {
display: inline-block;
float: left;
height: 2em;
margin: .5em 0 0;
padding: 0;
width: 2em;
}
#tabs .my-logo img {
max-height: 100%;
max-width: 100%;
float: left;
}
#tabs .ui-tabs-nav {
margin-left: 2em;
}
#tabs .ui-tabs-panel-container {
overflow: auto;
}
JS
Finally, the easy work. I write a function to set the height of our tabs content area, since it will be "filling" the rest of the page. This take a little thought, but not hard to figure out. With the function written, I simply add it to the window resize event and call that event right after. This way it's resized on load, thus giving us our "end height" for first view. I also establish the tabs, although not much work there since I'm just making "default tabs". Feel free to experiment, go wild!
// the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; } // -10 to account for padding
$(function() { // our on page load call
$("#tabs").tabs(); // establish tabs
// add ability to resize tabs content area on window resize, then call resize event
$(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})
As for the layout of tab content, it's all up to you and your imagination. Hopefully this will give you a good idea of where to get started though! Good luck!

You could use something like Blueprint CSS:
http://www.blueprintcss.org/
Here's a very quick and dirty layout (not using blueprint CSS, just plain CSS), as a general guideline. It still needs work, but it could be used as a starting point:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* hide page scrollbars */
}
div {
margin: 0 auto;
padding: 0;
border: 1px solid black; /* for debugging */
text-align: center;
}
#header {
width: 100%;
position: relative;
overflow: auto;
}
#header > div {
height: 5%;
float: left;
}
#logo {
width: 23%;
}
#spacer {
width: 1%; /* -1% for borders */
}
#tabbar {
width: 75%;
}
#tabContent {
}
#tabContent > div {
width: 100%;
}
#tabContentMenuBar {
height: 5%;
}
#tabContentMain {
min-height: 80%;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="spacer"></div>
<div id="tabbar" class="fullWidth">Tab bar</div>
</div>
<div id="tabContent">
Tab content
<div id="tabContentMenuBar">Tab content - menu bar</div>
<div id="tabContentMain">Tab content - main content</div>
</div>
</body>
</html>

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.

slideToggle the whole div

I am developing a page where the content is hidden behind a jquery toggle button. I want the content wrapper to expand both horizontally and vertically when clicked (currently the wrapper only expands vertically).
I'm not sure how to organize my files. Currently, the wrapper has these css attributes:
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}
The "panel" div controls the javascript via:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Changing the #wrapper width directly in the css causes the content inside the slideToggle to be truncated: ie. the wrapper won't expand to the proper horizontal size after sliding if the width is set. On the other hand, if I remove the width attribute, the page is no longer properly wrapped. How should I remedy this problem?
<div id="wrapper" >
<div id="intro" class="content-wrapper"><span class="content">CONTENT</span>
<div class="wrapper-inner container"><div class="home-page container">
<div id="panel">

Not sure i fully understand the problem, but here are 2 possible solutions:
1. use the jQuery .animate() method instead of slideToggle, that will give you all the flexibility you need.
2. if you are having problems with the surrounding layout, place your wrapper inside a div with a fixed size, and change your #wrapper to position:absolute