We Keep Coding

Bootstrap resize container on click to side

I have two divs...
<div class="row">
<div id="general" class="col-sm-4">
<p>General content.</p>
<p id="show">Open extra content.</p>
</div>
<div id="extra" class="alert alert-info col-sm-8">
×
<p>Here is the extra content!</p>
</div>
</div>
The general content div should always show, and the extra content div should show when the #show paragraph is clicked.
As you can see, the general div is 1/3 of the page, and the extra div is 2/3 of the page (when opened).
I want the general div to fill the whole width of the page when the extra div is closed, and fill the ususal 1/3 when it is open, making it behave like this...
How would I do this with jQuery / Javascript / CSS3?

I think if you will change div #general class, resolve it.
Firstly when #extra closed, #general set class="col-sm-12" and use this code;
$("#general").click(function(){
$(this).toggleClass('col-sm-12 col-sm-4');
$("#extra").show();
});
and you can use again this code when div #extra close.

Initially add col-sm-12 class to your #general so that it shows fully and hide the #extra div with hide class. Then on the button click, with jquery swap the classes to display #extra div.
$("#show").on('click',function(){
if($("#extra").hasClass('hide')){
// in case its already hidden
$("#general").removeClass('col-sm-12').addClass('col-sm-4');
$("#extra").removeClass('hide').addClass("show");
} else {
// in case its already visible
$("#general").removeClass('col-sm-4').addClass('col-sm-12');
$("#extra").removeClass('show').addClass("hide");
}
});

Hiding an element doesn't redraw page correctly in IE8 if the parent elements have a specific combination of display types

I have a problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?

This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>

Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.

Position elements in a top->down left->right manner

I have a main container <div> which holds 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to position the sub divs so that they are arranged in a top->down then left->right manner?
I've tried floating the sub divs but that just gives me a left->right then top->down order.
Basically I want this
[ sub div 1][sub div 3][sub div 4]
[ sub div 2][ ][sub div 5]
When I mark up the code like this:
<div id="container">
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
<div class="subdiv">sub div 5...</div>
</div>
Notice that the sub divs can have variable heights but fixed widths.
Thank you,

To my knowledge, there's no way to do it.
There is some CSS3 that works only on some browsers to support multi-column layout (-moz-column-width, etc...) but I don't know whether it would work with DIVs in the content. And I'm fairly certain it it's not supported in IE7
The way I'd do it would be to break up the content into 3 columns containers
<div id="container">
<div class='column'>
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 5...</div>
</div>
</div>

Use this CSS on the DIVs:
display: inline-block

The only way to do this natively is to use CSS3 columns (as Damp mentioned) but there are some articles on how to achieve a similar effect with JavaScript as seen in this question. That case is actually more complicated than yours.
I'm thinking the best way to do it with JS would be to first split it evenly into column containers as Damp suggested with a best guess. This should help for those with JS disabled. Then us JS to measure heights of the subdivs and move them if the initial guess was off. Assuming you're using a server side language to generate the page, you should be able to split the columns evenly. You can probably even make a good estimation on the split by checking the length of content (assuming its text) as a heuristic for the likely height of the subdiv.

Scroll to top area in div

I have a div that has CSS as following,
<div style="overflow-y:scroll; height:100px;"> long Text....</div>
The issue is long text is shown and vertical scroll bars shown but when browsing the page div is scrolled to bottom and end of the of the long text is shown instead from beginning portion of long text.
Any way to fix this ?
Thanks

Do something like this :
<div style="overflow-y:scroll; height:100px;">
<div style=" height:500px;">
long Text....
</div>
</div>

How to prevent Jqtouch autoscrolling to div with current class?

I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>

I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.