jquery.height() and float parameter in CSS - javascript

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.
CSS:
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS:
console.log($("someid").find("text-holder").height());
The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?

When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both

I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:
<div style="clear: both; line-height: 0; height: 0;"> </div>
This is a variant on the QuirksMode article, and has good cross browser compatibility.
I've rewritten your code to include it and demonstrate the results:
<html>
<head>
<title>test</title>
<style type="text/css">
div.text-field
{
border: 1px solid red;
font-family: sans-serif;
margin: 3px;
float: left;
}
div.text-holder
{
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#output1").text($("#someid1 .text-holder").height());
$("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>
<body>
<div id="someid1">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
<br>
<div id="output1"> </div>
<br><br><br>
<div id="someid2">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>
</div>
<br>
<div id="output2"> </div>
</body>
</html>
The demonstration can also be viewed on JSFiddle.

floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0

because floats remove the element from the normal flow. try using overflow:hidden
see the DEMO
for more details http://www.quirksmode.org/css/clearing.html

In jQuery the test script looks like:
console.log($("#someid").find(".text-holder").height());
if you modify the html to clear the float, the parent will gain height:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both;"></div>
</div>
</div>

I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.

Related

Can Flexbox help me?

I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>

Simple Sibling() jquery issue. Not appending class to div

So I'm trying to append a class to my div which are children of a section and i've ran into some trouble.
Here is the basic code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 7 Starter File</title>
<style>
body {
font-family:arial; font-size: 100%;
}
#outer {
width: 800px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
padding: 10px;
}
h2 {
font-size: 16pt;
margin-bottom: 0px;
}
h1 {
font-size: 1.5em;
text-align: center;
}
div {
margin-bottom: 25px;
}
p {
margin: 0px;
padding: 10px;
}
.bottomBorder {
border-bottom: 1px dashed #000;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("a").attr("target" , "_blank"); // makes tabs open in new tab
$("section #faq").siblings("div").addClass("bottomBorder"); //adds the class to the bottom of each div. Adds dots.
$("<aside><h2> Links used:</h2></aside>").insertAfter("section #faq");
$("a").clone().appendTo("aside").append("<br />");
});
</script>
</head>
<body>
<header>
<h1>FAQ</h1>
</header>
<section id="outer">
<section id="faq">
<div>
<h2> What is jQuery?</h2>
<p>jQuery is a JavaScript library intended to make writing JavaScript easier and fun. For more information visit jQuery.com.
</p>
</div>
<div>
<h2>How did jQuery Begin?</h2>
<p>
jQuery was developed in 2006 by John Resig, who is still the lead developer. For more information visit ejohn.org
</p>
</div>
<div>
<h2>What is the jQuery UI?</h2>
<p>
jQuery UI provides abstractions for low-level interaction and animation.
Visit jQueryui.com
</p>
</div>
<div>
<h2>What is Minification?</h2>
<p class="content">
Minification is the process of removing all unnecessary characters from source code.
</p>
</div>
</section>
</section> <!-- end outer -->
</body>
</html>
So basically i just want to insert that class into the div. But it won't work. It'll work just fine if the code is just a simple append without the sibling but it can't seem to get the sibling part down. any ideas?
Try using children function:
$("section #faq").children("div").addClass("bottomBorder");
example fiddlejs
You've got it pretty much right, but your jQuery selector is a little off. You're trying to put the class on that first div right? If so, this should work:
$("section#faq div").eq(0).addClass("bottomBorder");
Notice there's no space between section and #faq and then the eq(n) lets you pick which of the divs you want, 0 being the first.
[EDIT updated answer from comments:]
To add a class to all the divs matched by the selector, just add the class to that jQuery result array directly:
$("section#faq div").addClass("bottomBorder");
Notice that all the work is being done by the selector, which will match all divs inside a section that has the id "faq".

Adding content to inline-block-div messes up layout in unexpected way [duplicate]

This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 7 years ago.
I have a piece of HTML/CSS/JS which behaves in a way I wouldn't expect it to behave. There are three divs displayed as inline-block and given a fixed height and width. Within these divs are further divs which I'm filling with content.
My expectation would be, that the content would start at the top, head to the bottom of the div, and then im some way overflow. At least I've seen it like that in the past.
But for some reason, the code in the snippet I'll post below behaves differently - the two grey boxes move downward. And I'd be thankful for some explanation on why it behaves that way. Maybe it's too obvious for me too see after looking at that code for two hours now and scratching my head.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
Just click the demo-button at the bottom to see what I'm talking about in action.
Setting vertical-align property (almost any value, since you fixed the heights) to .user rule should fix the issue.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometexttest";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
vertical-align: top;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div id="clock5"></div>
</div>
<div class="user">
<div class="username">user6</div>
<div id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>
overflow:hidden will fix it.
Its basically aligning everything to bottom. So either overflow it, or set vertical-align :top. What's the deal with inline-block
Why does overflow fix it? From w3
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
function demo() {
document.getElementById("clock5").innerHTML = "test<br/>sometext";
}
.user {
display: inline-block;
width: 128px;
height: 128px;
font-size: 18pt;
color: white;
background-color: #999;
}
.clock{
border: #000 2px solid;
}
.present {
background-color: green;
}
<div id="users">
<div class="user">
<div class="username">user4</div>
<div class="clock" id="clock4"></div>
</div>
<div class="user present">
<div class="username">user5</div>
<div class="clock" id="clock5">some text <br/> </div>
</div>
<div class="user">
<div class="username">user6</div>
<div class="clock" id="clock6"></div>
</div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

How do I achieve this layout without using Javascript?

I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?
Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.
<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?

Floating columns both ways in JavaScript

I am trying to float columns using CSS so they stack up evenly like on this blog: http://typeneu.com
It seems to be impossible using CSS so I am looking into JavaScript.
The website listed above uses this JavaScript file: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js
I have tried to implement it to experiment but it doesn't seem to be working.
Any links to tutorials on this subject or suggestions for getting it to work with JavaScript or CSS?
Edit: I would like the number of columns to be flexible with the screen resolution.
I have a site which basically has DIV's float left with a set pixel width. Depending on the resolution and window size I might have 1-n columns, You should be able to basically:
<style>
.myClass
{
float:left;
width:350px;
}
</style>
<div class="myClass>my content</div>
<div class="myClass>more content</div>
<div class="myClass>even more content</div>
To get a fixed number of columns I'd assume you can calculate the width using javascript or perhaps there is some other trick.
Edit
Ok looking at their JS file you need to make sure you match up your class and id's to match what they are expecting Looks like all your posts need to be ina div with an id of allposts.
Check out the HTML of the site you typenu site you referenced and get your html to match theirs.
Keep it simple. This should make a nice page... the css should include this:
.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}
.first { width: 100px; left:10px;}
.second { width: 100px; left:110px;}
.third { width: 100px; left:220px;}
.fourth { width: 100px; left:330px;}
.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/
and some html (inside the body, after you have called the css):
<body>
<div class="header">TITLE</div>
<div class="bod clear">
<div class="first tall"> Lorem ipsum </div>
<div class="second"> Lorem ipsum </div>
<div class="third"> Lorem ipsum </div>
<div class="fourth"> Lorem ipsum </div>
</div>
<div class="footer" >FOOTER</div>
</body>
</html>
Simple, works, right?
After placing first component on the page, take dimensions of that, then place next components one by one on the UI using absolute placing.
That JavaScript file is actually part of this plugin:
http://suprb.com/apps/gridalicious/
It's not that hard to do in CSS, however. You just need to use floats.
For example:
<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>
Is it clear enough?

Categories