Develop Reference

Set height of div to 0

I have the following HTML code generated dynamically. I need to set the height of the div that has the height as 34px to 0px. Since this div does not have a class or an id, I am unable use any of the DOM manipulation options like .getElementById(), .getElementByClassName, or .getElementByTag(). I need to set the height of this div to 0 using JavaScript.
EDIT
I apologize, I should have asked the question in a better manner, and I should have anticipated, and understood the need in advance before asking the question. This is what I truly need:
<div class="fht-cell">
<div class="filterControl">
<!-- This should stay as it is. -->
</div>
</div>
<div class="fht-cell">
<div style="height: 34px;">
<!-- This height should become 0px. -->
</div>
</div>
<div class="fht-cell">
<div class="filterControl">
<!-- This should stay as it is. -->
</div>
</div>
<div class="fht-cell">
<div style="height: 34px;">
<!-- This height should become 0px. -->
</div>
</div>
Your answer helped me, but since all the parent divs had the class fht-cell, and since we had mentioned child [0] the height for only the first div became 0.

You can use document.getElementsByClassName('fht-cell')[0].children[0] or similar.

first-child selector should do the trick.
https://www.w3schools.com/cssref/sel_firstchild.asp

Materialize truncate not working on cards

I've been using Materialize on my cards and want the titles to truncate.
I tried to use the simple code example materialize has on their website but it won't work. Here is my example:
<div class="card hoverable waves-effect waves-light">
<div class="card-image" id="house-pic" style="height: auto;">
...
</div>
<div class="card-content" style="padding-left: 0px; padding-right: 0px;">
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
</div>
<div>
I also use the min.css and js libraries on their website. It seems simple enough, but the cards just stretch if the text is too long. Please let me know if you have any ideas, thanks.

I'm not sure where exactly in your code is the problem so I'm guessing:
I supposed the card is stretching because of the text being too long in this section:
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
I would replace span element with a div element like so:
<div class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</div>
Because span is an inline element vs div which is a block element.
An inline element does not start on a new line and only takes up as
much width as necessary.
vs
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Necessary vs available :D

Bootstrap popover changing position with resolution

I have bootstrap popover as follows
<div style="float:left; width:30%"></div>
<div class="popover results" style="z-index:1060; float:left; width:70%">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content">
<p></p>
</div></div>
</div>
I saw that with change in screen resolution, its changing the relative position with the input element I have. I want to maintain the relative position of popover and input element same irrespective of resolution. Is there any way to do this ?

This was happening since I used following in above code
<div style="float:left; width:30%"></div>
I removed it and it now auto adjusts correctly

Move position of an item in the DOM

Lets say I have 6 items in a container:
<div class="container">
<div class="one" style="left:100px">...</div>
<div class="two" style="left:200px">...</div>
<div class="three" style="left:300px">...</div>
</div>
Is it possible to change the dom to read:
<div class="container">
<div class="one" style="left:100px">...</div>
<div class="three" style="left:300px">...</div>
<div class="two" style="left:200px">...</div>
</div>
I am trying something different with a masonry layout and need to move things based on size and then re-layout the container. I can't just change the inline style to move them because that would create a gap and when then doing a re-layout the masonry code sees the DOM as it was and then moves them back.
So ideally something like:
$(".container > .item").each(function(){
// if this class="three" then move its
// outerHTML and insert it after class="one"
}
Not sure if this is possible.
The basic problem is that I'm building a masonry layout but more like a windows metro look, horizontal as much as vertical, so want gaps filling with elements which maybe further down the list in the DOM

Yes, it's possible. You can use insertAfter method for example:
$( '.container > .three' ).insertAfter( '.container > .one' );
No need to use each method.

You can use insertAfter() to achieve this. Also, if you're specifically targeting .three the loop is redundant. Try this:
$(".container > .three").insertAfter('.one');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="one" style="left:100px">ONE</div>
<div class="two" style="left:200px">TWO</div>
<div class="three" style="left:300px">THREE</div>
</div>

How do i get boxes to have equal width always

Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn

All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}