Develop Reference

Automatically expand height of DIV according to the div displayed

I am using a div sliding thing, as you can see in this fiddle example
$(document).ready(function() {
$("#moving").click(function(){
$("#moving").toggleClass("left");
$("#right").toggleClass("right");
});
});
Here is the complexity that I am using:
I have 12 Right Side DIVS, they are all set display: none, except one.
On the moving DIV I have a list of links to other hidden DIVs. They are shown or hidden with show or hide jQuery function....
It all works with height set to 700px (so I can accomodate a lot of content)
How can I make the height automatic according to the content? If, let's say Div number 5 has more content and scroll is required... how can I expand it and show it?
I hope you guys can help me. Thank you very much in advance.

Using jQuery something like this will use the largest of the children's heights for all the children div's of #wrapper.
$(window).on('load', function () {
var maxHeight = 0;
jQuery("#wrapper > div").each(function () {
var thisHeight = jQuery(this).height();
maxHeight = thisHeight > maxHeight ? thisHeight : maxHeight;
}).height(maxHeight);
});
Added a sample here:
https://jsfiddle.net/mq2c2129/15/

After jquery hide then show, width of width:auto elements is smaller than normal

I'm trying to display a list of information, and it works normally, however when I hide the div containing the list and then show it again, the width of the elements with the "width: auto" styling are being re sized and the new size is too small:
Before hide:
After Hide:
My php generating the elements looks like this:
<div displayitem='true'>
<table>
<?php
foreach($aExistingChangeDetailsData['customers'] as $aCustomer){
?><tr><td><li style='width:auto;'><?php echo $aCustomer['sCustomerName']; ?></li></td></tr><?php
}
?>
</table>
</div>
and my jquery is simply:
function expandSection() {
$("div.cd-content").show("slow");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}
I'm guessing the issue is due to the re sizing nature of the slide animation, is there any simple way to keep the width of width:auto elements after the hide so they are restored to the proper size?
Edit:
It seems to be decreasing the width by exactly 5 for every element.

try to use fadeIn and fadeOut istead of show and hide respectively, cause hide() changes width of element to zero, but fadeOut() changes attribute opacity and doesn't width

your inline width: auto styling is only being set once on first render, you can also set it after events fire:
function expandSection() {
$("div.cd-content").show("slow").css("width", "auto");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}

Try to identify which element(s) width is set to 0 after using .hide().
Then before calling .hide() fetch the original widths i.e. example below
const parentWidth = $('.slick-track').css('width');
const childWidth = $('.js-slide').css('width');
The call .hide() to hide the element block (as per desired functionality)
On calling .show(), set the width of the affected element(s) back to its original widths, i.e.
//fix collapse width
$('.slick-track').css('width', parentWidth);
$('.js-slide').css('width', childWidth);
This will do it, the element width(s) will be restored to its original width

How to snap elements to grid by jquery or javascript

There are some elements that have class='snap'
I want to find these elements in the body. Then snap and resize elements to fit grids by Jquery.
When?
The document is ready.
The window is resized.
Note:
Size of grid cells are 10px
Contents of elements can be different.
Element can move down maximum in 1 cell size. (Up is not allowed).
Because of responsive elements, It's not true to snap the element by specifying width and height.
See on JsFiddle
Any ideas or help would be greatly appreciated.
JsFiddle updated: Removed width of .content in CSS, It can be not specified.

What you could do, and this is just an idea that is perfectible, is getting the offset of the .snap div and remove all margins. Then you snap to the next (right and bellow) lines :
var Content = {
snapElement: function(element){
offset = element.offset();
element.css('left', (Math.ceil(offset.left/10)*10)+'px');
element.css('top', (Math.ceil(offset.top/10)*10)+'px');
element.css('margin', '0');
},
snapElements: function(){
var elements = $("body").find(".snap");
elements.each(function(){
Content.snapElement($(this));
});
}
}
You will also have to make your .snap divs relative :
.snap {position:relative;}
The demo
You can also keep the margins but you will have to subtract them to the left and top.
Edit : A more sophisticated demo that handle width

Making the column height same and remove extra content

I have a question, my webpage has many div section and have multiple ul li.
It is 2 column design and what i need to do is to set the same height for both corresponding div section.
For example check the image, it is one section and what i want is to set the height for the shortest div and remove the large div content. Is this possible to do?
I checked on internet but what i am getting is to set the both column height but unable to find how can i remove the content.
The right image is what i want.
Please help :)

Assuming you're using jQuery, try this:
var $targets = $('.awesomeClass'),
targetHeight = $targets.first().height();
$targets.each(function() {
var $this = $(this);
if( $this.height() < targetHeight ) {
targetHeight = $this.height();
}
});
$targets.height( targetHeight );
This code will set the height of all matching elements to the height of the shortest member.
Just make sure all your target elements have the class awesomeClass, or whatever class you decide to use, and add an overflow: hidden; so the overflowing elements are cut off. This method will remain functional even if you decide to change the number of elements etc.

Removes elements until the first div height is less than or equal to the second one:
while($('#div1').height() > $('#div2').height()) {
$('#div1').find('li:last-child').remove();
}

Say you have following two div's on the page as:
<div class="left">
<ul>/<ul>
</div>
<div class="right">
<ul></ul>
</div>
You want both of them to have the same height i.e. the minimum out of the two.
Well, its simple with following jQuery Code:
var leftHeight = $(".left").height();
var rightHeight = $(".right").height();
if(leftHeight > rightHeight)
{
$(".left").height(rightHeight);
}
else
{
$(".right").height(leftHeight);
}
Of course you need to set Overflow-y:hidden, for the div and ul, so the scroll bar doesn't appear.
It's better to set explicit height, then to remove html elements

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?

You change the z-index using css:
div.class {
z-index: 60;
}

You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.

You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}