Why doesn't Javascript add height with the ex unit? - javascript

I wanted JavaScript to add height to the current height in css and it works with the px unit but doesn't with the ex unit. Anybody who knows a solution to this?
HTML:
<div class="parent">
<div class="child">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.parent {
width:150px;
height:100px;
float:left;
background:red;
}
.child {
line-height:2.5ex;
max-height:5ex;
margin:2.5ex;
background: green;
overflow: hidden;
}
JavaScript:
$(document).ready(function(){
var child = $(".child");
var height = parseInt(child.css("max-height").split("ex")[0]);
height = height + 10 ;
child.css({"max-height": height});
});

You should do it like this: child.css({"max-height": height + 'ex'});

You'll have to add ex when you set the CSS property. From the jQuery docs:
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
$(document).ready(function(){
var child = $(".child");
var height = parseInt(child.css("max-height").split("ex")[0]);
height = height + 10 ;
child.css({"max-height": height + "ex"});
});
.parent {
width:150px;
height:100px;
float:left;
background:red;
}
.child {
line-height:2.5ex;
max-height:5ex;
margin:2.5ex;
background: green;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>

Related

Setting width of <div> to be one of two values based on text content

Is there any way to set width of a <div> using a conditional operator on the size of text within it?
For example, if there are 60 characters or less, width should be 500px else, 700px.
This works fine upto some extent:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
display:block;
min-width: 600px;
margin: 2px;
text-align: left;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
Output:
But, when I increase the number of characters of the first child <div>, I get this:
I want all the container elements to shift down once an element crosses a specific character limit, say, 60 characters.
EDIT:
What I wanted is this:
(image)
You could more easily do this with CSS Grid than with flexbox layout; here we take advantage of the minmax() function to determine the column width (bearing in mind we're explicitly styling the whole column, not just the specific 'cell' of content):
grid-template-columns: repeat(2, minmax(min-content, 700px));
Here we use the repeat() function to create two columns, each column assigned a minimum width of 500px or a maximum width of 700px.
This gives the following output:
.flex-container {
display: grid;
grid-template-columns: repeat(2, minmax(500px, 700px));
grid-template-rows: repeat(2, 1fr);
}
.flex-container>div {
white-space: nowrap;
overflow: hidden;
}
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ipsum dolor sit amet </div>
</div>
References:
minmax().
repeat().
"Basic concepts of grid layout."
You can do this with jQuery. Run a loop and check all the element, and if one of the element has more than 60 character you apply a width to all of them.
var elem = $('.flex-container > div');
for (var i = 0; i < elem.length; i++) {
if (elem.eq(i).text().length > 60) {
elem.css('width', '600px');
break;
}
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container>div {
display: block;
min-width: 300px;
margin: 2px;
text-align: left;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div>(A) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
</div>
<div>(B) Lorem ipsum dolor sit amet,</div>
<div>(C) Lorem ipsum dolor sit amet </div>
<div>(D) Lorem ips </div>
</div>
You can resolve this with JavaScript, using the string length property and a condition.
1) Create a variable in JavaScript to access the div you created using : document.getElementsByTagName("div").innerHTML;
2) Use the if. In the condition use the length property and a compactor to see if the length is bigger then a certain number of characters.
3) In the statements add document.getElementsByTagName("div").style.width = x; and modify the width by the number you want by changing x.
Using a conditional operator, you've set the size of a div depending on the size of text.

How to set a variable for the parent's css class using the parent's variable for its id?

So what I want to do first is to set a variable for the parent using the id of it. Then I want to use this variable to find the css class of the parent and set a new variable again. It's important use the variable for the parent's id because later I want to change HTML style of this class with the specific id. My JS works fine without "var parent = parentid.find('.parent');"... I don't know what's wrong.
var parentid = document.getElementById('1');
var parent = parentid.find('.parent');
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
jQuery's .find() doesn't include the selector itself into it's search, you have to use .closest() (begins with the current element) instead:
var parentid = $('#1');
var parent = parentid.closest('.parent');
$(parent).css('background-color', 'gold');
.parent {
width: 150px;
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
The CSS 'background-color' property is PINK.
</div>
In your example, as long as the element only has a single class, you can just reference className
var parentid = document.getElementById('1');
var parent = document.getElementsByClassName(parentid.className)[0];
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>

IF function in jQuery function

I have been trying to run an overflow check if I hover on a div. But I use jQuery for the hover function and in the next function there's just simple Javascript. It's not working because I assume one can't use the if then function inside a jQuery function... but then I need the action that if I hover over the div the if then function should be executed. Can someone help me please? =)
So it's jQuery (hover) -> JS (check overflow) -> jQuery (add to div (here: "...read more..."))
HTML:
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
JS:
$('.hover_cap').hover(
if (function checkOverflow(hcd) {
var curOverflow = hcd.style.overflow;
if (!curOverflow || curOverflow === "hidden") hcd.style.overflow = "visible";
var isOverflowing = hcd.clientWidth < hcd.scrollWidth || hcd.clientHeight < hcd.scrollHeight;
hcd.style.overflow = curOverflow;
return isOverflowing;
}) {
function() {
$(this).append($('<a>...read more...</a>'));
},
function() {
$(this).find("a:last").remove();
}
}
}
Here is a snippet for you:
When you hover the outer div, if the inner div's text is overflowed append a 'readmore' button to the outer div.
When you unhover the outer div, if there is an appended 'readmore' button remove it.
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$(document).ready(function(){
$('.hover_cap').hover(function(){
var $this = $(this);
var $textContainer = $this.find('.hcd');
$textContainer.css('overflow','auto');
var isOverflowing = isOverflowed($textContainer[0]);
$textContainer.css('overflow','hidden');
if(isOverflowing) {
$this.append($('<a>...read more...</a>'));
}
}, function(){
var $this = $(this);
var lastA = $this.find("a:last");
if(lastA) {
lastA.remove();
}
})
})
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
<br/>
<br/>
<div class="hover_cap">
<div class="hcd">
Short text, no overflow
</div>
</div>

How to Detect 40% in the Middle of a Div Using jQuery

Can you please let me know if it is possible to detect the 40% in the Middle of a Div Using jQuery for example in following example I need to enable the mousemove() only on 30% left side or 30% of the right side of the center.
$('#box-wrap').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log("X: " + x + " Y: " + y);
});
html, body{
width:100%;
height:100;
}
#box-wrap{
height:400px;
width:100%;
background:yellow;
}
<div id="box-wrap"></div>
Thanks
Add just two transparent divs as an overlay on the left and right and have the mouse move events only on those. I just added a red border to make them visible:
$('.sensor').mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log("X: " + x + " Y: " + y);
});
html, body{
width:100%;
height:100;
}
#box-wrap{
height:400px;
width:100%;
background:yellow;
}
.sensor {
width:30%;
height: 100%;
border: 1px solid red;
background-color: transparent;
cursor: pointer;
}
.left {
position:absolute;
left: 0px;
top: 0px;
}
.right{
position:absolute;
right: 0px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box-wrap">
<div class="left sensor"></div>
<div class="right sensor"></div>
Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem ....
</div>
How about adding two child divs and calling .mousemove() on them instead?
<div id="box-wrap">
<div id="left_30"></div>
<div id="right_30"></div>
</div>
#left_30 {
position: absolute;
width: 30%;
height: 100%;
}
#right_30 {
position: absolute;
width: 30%;
height: 100%;
right: 0px;
}
Check out this working fiddle: https://jsfiddle.net/qeaxu9c9/2/
Try this:
$('#box-wrap').mousemove(function(e){
var t = $(this), w = t.height(), h = t.width(), os = t.offset();
var x = e.pageX - os.left, y = e.pageY - os.top;
console.log("X: " + x + " Y: " + y);
if(x >= w * 0.3 && x <= w * 0.7 && y >= h * 0.3 && y <= h * 0.7){
console.log('Inner 40%');
}
});

How do I make the larger child divs to always fit in the parent div?

Html
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
Stylesheet
.child1, .child2, .child3{
display: block;
float: left;
}
.parent{
height: 200px;
}
The child divs may have a height that is larger than 200px but I am not able to figure out how make it fit inside the parent without truncating content of the child div.
See this fiddle
As mentioned in my comment, you could use overflow:auto; for .parent which will make the parent scrollable.
CSS
.child1,.child2,.child3 {
height:100px;
width:50%;
margin:10px;
}
.parent {
height: 200px;
overflow:auto;
}
If you want to just the vertical scrollbar, use overflow-x:auto for .parent instead of overflow:auto;
Please see the docs for more information about overflow.
Use overflow property on the parent or the children.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.parent {
height:200px;
width:400px;
border:1px solid;
}
.parent div {
float:left;
width:33%;
height:100%;
overflow-y:auto;
}
<div class="parent">
<div>Lorem Ispum</div>
<div>Lorem Ispum</div>
<div>Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>
</div>

Categories

Resources