The technique I have used to hide/unhide a div is as follows:
$("#" + sectionId).css("display", ""); // unhide
$("#" + sectionId).css("display", "none"); // hide
This works fine, except I need to make this hiding/unhiding not affect the dimensions on the rest of the page. That is, I do not want the act of hiding the content to shrink all the content around it. In other words, I would prefer to have the dimensions of everything on the page remain as it would be if the div were always visible. I've tried setting the div to zero height, but that doesn't seem to have an effect.
Note: these divs actually reside within a table, hence cells are resizing automatically to fit content (which I do not want).
Update: Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.
I believe you're looking for the CSS visibility property. http://www.w3schools.com/css/pr_class_visibility.asp
Use visibility='hidden' and visibility='visible' instead:
$("#" + sectionId).css("visibility", "visible"); // unhide
$("#" + sectionId).css("visibility", "hidden"); // hide
This will keep the object physically in the page but it will be "invisible", as opposed to "removing" with display.
More info.
EDIT
As for the new/editted question:
Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.
Set the table width to a fixed value and the hide the divs with content using display property:
<table style="width: 500px;">
<tr><td>
<div id='div1'>Some content</div>
</td></tr>
</table>
When you now hide the div1 using then code you've used in your question, the table width should stay the same width but shrink in height.
EDIT2: A simple example.
Try setting the visibility instead:
//hide
$('#element').css('visibility', 'hidden');
//show
$('#element').css('visibility', 'visible');
Related
I have a <table> element with a lot of rows and a max-height attribute.
I need to find the real height displayed for the <tbody> element. Normally I can just take the difference between <table> height and <thead> height
var tbodyDispalyHeight = $("table").height() - $("thead").height();
This works unless horizontal content is too much and an horizontal scrollbar appears (and can't remove it because... I need it!). I should remove its height from tbodyDispalyHeight but... how can I do?
First problem: I don't really know when this bar is displayed
Second prolbem: Each browser implement scrollbar in a different way
Here is a JSBIN example to understand what I mean. Try to resize page horizontally until the scrollbar appears, there the dislayed tbody height should be lower...
Sounds like you are looking for the clientHeight.
(But this seems to be to easy.)
Have a look to MDN
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
You may try:
$("table")[0].clientHeight
Currently you have your table with overflow:auto. But you could wrap it with a DIV with "overflow:auto". Then you can simply determine if you have a horizontal scrollbar by comparing the width of your div with the width of your table.
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.
What the code does:
Retrieve all cells of the column (th, td)
Wrap the content of each cell in a <div class="wrapper" />
Animate the width of the wrapper div with jQuery.animate();
After finishing, unwrap the cell contents (remove the div)
The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?
See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)
Everything works perfectly for rows and columns, in except of one (two?) problems:
When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.
When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.
What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected.
Any ideas how I can achieve that?
You could nest your div in another div with overflow hidden:
.crop {
overflow:hidden;
width:100px
}
.inner {
min-width:300px;
width:auto;
}
http://jsfiddle.net/mikatalk/7xwLjp2e/
I have a grid of div's. and those all position:relative inside its parent.
What I need to do is on click of one div, All the divs from that row will be hidden and that space will be occupied by first div with
width = number_of_div_in_one_row * orignal_width
ie whole row will be occupied by the div user clicked.
I tried lot many thinks. Calculated number of width in one row and Applied css animation for hiding each div and increasing width of first div.
but Whenever user clicks any div, all rows above it and below it are getting disturbed.
I am not asking anybody to do all calculation for me. Just want to ask is there any JS/jquery library that I can apply for this kind of scenarios.
I already tried http://nanogallery.brisbois.fr/
But in this library all the images are replaced by other set of images. I just want to do something like this with only one row.
I don't know if I understand correctly your question but in this Fiddle there is a fluid grid with three divs per row.
When you click on one div this gets 100% width and other divs in same rows disappear.
When you click on the div that has animated, the entire line will back to the starting point
all code you need is
<script type="text/javascript">
$(document).ready(function(){
$('div.element').click(function(){
$(this).toggleClass('go');
if($(this).hasClass('go')){
$(this).animate({'width':'100%'},{
duration:1000,
step:function(gox){
var width = gox < 100 ? (100 - gox) / 2 : 0;
$(this).siblings().css({
'border':'0px',
'width': width + "%"
});
}
})
}else{
$(this).parent('div.row').find('div.element').animate({'width':'33.33%'},1000);
};
});
});
</script>
If you have rows with differnt number of divs you culd do something like this:
Fiddle
These are just simple examples, I hope them can help you.
I have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.
Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.
Edit:
Basic fiddle: http://jsfiddle.net/9AXS4/4/
Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()
If your pages, as you call them, are of fixed width and height, then you can set their container to be position:relative and also have the width and height of the pages..
.container{
position:relative;
width:500px; /*the total width of a page, including padding and borders*/
height:400px; /*the total height of a page, including padding and borders*/
}
This way the container element will handle the pushing around of the other elements
Here is your corrected fiddle: http://jsfiddle.net/gaby/9AXS4/2/
(the width/height of the container must account for paddings and border on the page elements)
Also you were targeting the container with .pagecontainer instead of #pagecontainer (since you used an id)
Update (after comment about arbitrary heights..)
Since your pages height is not fixed, you will need to resort to jQuery to resize the container..
Here is a full demo : http://jsfiddle.net/gaby/9AXS4/7/
The divs can't be positioned absolute in relation to each other, but they can be positioned absolutely in relation to an outer div. The container that holds the page divs should have position: relative in order to contain the inner page divs that are absolutely positioned.
If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want to allow for scrolling. If you are going to use the overflow property, be sure to include a height and width so the browser knows where the overflow should be.
http://jsfiddle.net/vkTXs/
$(".page").each(function(){
jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
jQuery(this)
.parent().fadeOut()
.next().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
$(".back").click(function() {
jQuery(this)
.parent().fadeOut()
.prev().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
function resizeContainer(page){
// get height of next page
var newPageHeight = $(page).height();
// add padding and border
newPageHeight = newPageHeight + 14;
$('#pagecontainer').height(newPageHeight);
}