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
Related
I have a button inside a div which is inside a div and I am trying to have the button in and inner div ignore the parent divs padding here is my code
<div style="padding:10px; background:red;">
<div style="width:100%; margin:-10px;">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
Can be seen in fiddle here https://jsfiddle.net/5sc5y4z3/.
setting the margin:-10px works on the leftside but then, the button is 20px short on the right side.
How can I extend it so it fills the whole width of the parent div?
Thanks
100% width doesn't include the negative margins. You need to add it back:
<div style="width:calc(100%+20px); margin:-10px;">
CSS calc() is supported in all modern browsers since IE9, so it's safe to use in most web development projects.
Use this instead:
HTML:
<div style="padding:10px; background:red;">
<div style="width:100%;background-color:lime">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
It's getting clipped, so you could also use the following to mask the right side:
HTML
<div style="overflow: hidden; margin:-10px;">
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
Is it possible to have fixed elements (Text here) between just the slides?
The only way i could achieve this was by putting the text element outside of the slides div.
<div class="section" id="section1">
<div class="intro">
<h1>URL get updated (#)</h1>
<p>
Easy to bookmark and share
</p>
</div>
<div class="slide" id="slide1">
</div>
<div class="slide" id="slide2">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
</div>
</div>
Am not sure whether this is the right way, please correct me if am wrong.
Here's my fiddle
Yeah, that's ok.
There's a bug in Chrome with fixed positioned elements and the css3 translate3d property, although it seems it can be solved when using z-index as you can see here.
.intro {
position: fixed;
-webkit-perspective: 1000;
z-index:1;
}
In any case, I believe its better to go for your option. We don't know if Chrome will change its behavior in a future regarding this trick.
I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.
I have searched the knowledge base high and low, but nothing seems to give me a result.
I have attached a screenshot and code of the content I'm working on below, but what I'm needing to do is vertically align the images based on the height of the div created by the tallest image.
So, a few things. The fixed height of the container .one-edition is determined by the tallest image size - can I do this with JS?
Then, once the height is determined, the images are aligned vertically in the middle.
Hope this makes sense.
<div class="grid_3 one-edition">
<img src="images/editions/1_Right_To_Buy_295.jpg">
<div class="editions-info-text">
<p>Right To Buy</p>
<p>C-type Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/2_Scorer_295.jpg">
<div class="editions-info-text">
<p>Hyperbolic Paraboloid Roof</p>
<p>Offset Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/3_PL16_295.jpg">
<div class="editions-info-text">
<p>132Kv PL16</p>
<p>Offset Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/4_What_We_buy_295.jpg">
<div class="editions-info-text">
<p>What We Buy</p>
<p>Publication</p>
</div>
</div>
I see many answers already but I'm still posting this, because I spent time using placekittens..
http://jsfiddle.net/7ybzp/6/
Basically, I used vertical-align: middle. I used inline-block though.