I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
Related
All of my elements hide and show correctly using slidetoggle(), EXCEPT for my li:before. I've tried forcing the overflow, visibility, display, etc on the :before and the li, and nothing is helping, it still shows the bullets set using the :before class. What needs to happen to hide these bullets when slidetoggle() is activated/deactivated?
jQuery(document).ready(function($) {
$("#read-more").click(function(){
$(".careers-position").slideToggle(800);
return false;
});
});
ul {
line-height: 2.4em !important;
margin-left: 20px;
padding: 0 0 23px 1em;
}
li {
list-style: none !important;
color: #656565;
}
li:before {
content: "";
background: #9e9e9e;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 18px;
margin-top: 16px;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
}
.careers-position {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
<h3>Pilot</h3>
Position information will go here.
We are an equal opportunity employer and all qualified applicants will receive consideration for employment.
<strong>Requirements:</strong>
<ul>
<li>Multi Commercial (ATP preferred)</li>
<li>First Class Medical</li>
<li>Passport</li>
<li>90 day currency</li>
<li>Clean FAA record</li>
</ul>
</div>
<div class="careers-read-more">
<a class="quick-btn" id="read-more" href="#">Read More</a>
</div>
Add position relative:
.careers-position {
display: none;
position: relative;
}
Demo
Here look at this fiddle https://jsfiddle.net/wfccp58p/4/
ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}
I removed the li:before and added the list-style-type to the ui. Not sure if you still wanted some of the LI:Before pseudo stuff, but this fixes your issue.
I need to target two div elements and toggle their classes simultanouesly.
I understand that I can get multiple divs "by ID" by using .querySelectorAll
but when I get to .classlist.toggle ("NewClassName"); how can I target two classes??
So here's some code:
#small-div{
background-color:#aaaaaa;
border: 3px solid #aaaaaa;
padding: 0px 0px 0px 0px;
margin: auto 10px auto auto;
border-radius: 10px;
overflow: auto;
}
.tobetoggled{
width: 45%;
float: left;
}
#small-div2{
background-color:#aaaaaa;
border: 3px solid #aaaaaa;
padding: 0px 0px 0px 0px;
margin: auto 10px auto auto;
border-radius: 10px;
overflow: auto;
}
.tobetoggled2{
width: 45%;
float: right;
}
.toggletothis{
width: 100%;
float: left;
position: fixed;
display: block;
z-index: 100;
}
.toggletothis2{
width: 100%;
float: left;
position: fixed;
display: block;
z-index: 100;
}
.whensmalldivistoggled{
display: none;
}/* when small-div is clicked, small-div toggles to class "tobetoggled" while small-div 2 simultaneously toggles to class "whensmalldivistoggled" (the display none class) */
<div id="container">
<div class="tobetoggled" onclick="function()" id="small-div">
</div>
<div class="tobetoggled2" onclick="separatefunction()" id="small-div2">
</div>
</div> <!-- end container -->
<script>
function picClicktwo() {
document.querySelectorAll("small-div, small-div2").classList.toggle("toggletothis, whensmalldivistoggled");
}
</script>
So as you can see one div is on the right, the other is on the left, each set to 45% width. So if I toggle one div to 100% width the browser still respects the other divs space instead of taking the whole 100%.
So I'm thinking if I can get the div on the right ,for example, to not display when the div on the left is toggled, it will be out of the way so the left div can take all 100%
Maybe im going about this the wrong way. Any help is welcome. Thanks.
You can create a single javascript function that sets appropriate classes on each element. Since you have only two elements it is not too complex.
HTML
<div id="container">
<div id="lefty" onclick="toggle('lefty', 'righty')">Lefty</div>
<div id="righty" onclick="toggle('righty', 'lefty')">Righty</div>
</div>
JS
function toggle(target, other)
{
var t = document.getElementById(target);
var o = document.getElementById(other);
if (!t.className || t.className == "inative")
{
t.className = "active";
o.className = "inactive";
}
else
{
t.className = "";
o.className = "";
}
}
CSS
#container {
background-color: lightgreen;
padding: 15px 0;
}
#container div {
color: white;
width: 45%;
display: inline-block;
}
#lefty {
background-color: blue;
}
#righty {
background-color: purple;
}
#container div.active {
width: 90%;
}
#container div.inactive {
display:none;
}
https://jsfiddle.net/dLbu9odf/1/
This could be made more elegant or capable of handling more elements with something like toggle(this) and then some DOM traversal and iteration in javascript, but that's a bit beyond scope. If that were the case I would recommend jQuery.
I have such example of my code:
<div class="container">
<div class="item n1">Proe Schugaienz</div>
<div class="item n2">Proe Schugaienz</div>
</div>
and i use such jQuery code:
$('.item').dotdotdot({
wrap: 'word',
fallbackToLetter: false
})
and css:
.item {
margin: 5px;
background: red;
padding: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.n1 {
width: 8px;
}
.n2 {
width: 80px;
}
but as result i get:
as result i want achieve this:
is it possible with pure css or with dotdotdot.js?
if word (sentence) cannot match it's parent: then show only default one-line-text-overflow
if word (sentence) is able to fit parent word-by-word - then match it, no letter-hyphenation!
so i don't wanna my container to be extented by height (i have a lot of data, it's only an example, i could not hardcode some blocks)
https://plnkr.co/edit/IxS0CReJicRfDdeGpoPo?p=preview
you can use flex
<div class="container">
<span></span>
<em></em>
</div>
.container {
display: flex;
justify-content: center; /* centers content horizontally*/
align-items: center /* centers content vertically*/
}
Here is a proposal that prevents the word break - there are changes in the markup as well:
I'm using flexbox container item for the div inner that has dotdotdot applied - this ensures two things:
a. inner takes the width of the content
b. word-wrap: break-word applied by dotdotdot will not break the word
Now it is possible to detect when word break or overflow can happen - this would be when inner width exceeds item width.
So we can detect this in the callback of dotdotdot!
When words starts breaking, you need ellipsis - so replace the text with ... just like dotdotdot does.
See demo below:
$('.inner').dotdotdot({
wrap: 'word',
watch: 'window',
fallbackToLetter: false,
callback: function(isTruncated) {
// this detects 'break-word'
if($(this).outerWidth() > $(this).closest('.item').outerWidth()) {
$(this).text('...');
}
}
});
.item {
margin: 5px;
background: red;
padding: 2px;
display:flex;
height: 100px;
}
.n1 {
width: 12px;
}
.n2 {
width: 80px;
}
.n3 {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.js"></script>
<div class="container">
<div class="item n1">
<div class="inner">Proe Schugaienz.</div>
</div>
<div class="item n2">
<div class="inner">
Proe Schugaienz. More text here. More text here. More text here.
</div>
</div>
<div class="item n3">
<div class="inner">
Proe Schugaienz. More text here. More text here. More text here.
</div>
</div>
</div>
You should set display: inline-block; and line-height: 26px; (or any suitable value which you find suitable) to .n1 class and also increase the width to 16px (i.e. enough width to accomodate two letters). So the final css should be as follows:
.item {
margin: 5px;
background: red;
padding: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.n1 {
line-height: 26px;
width: 16px;
}
.n2 {
width: 80px;
}
Also remove the lines of in script.js which u were using to achieve the same result. It should work for you.
I think easiest solution for this is css "text-overflow:elipsis".
You can use below css snippet for desired result.
.item.n1 {width: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
Note that; width is your turning point for dots.
To the element you want to show with a ... Apply the following code
.example-element{
max-width: example-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can adjust the width at the maximum you want.
Since you are already using JS, this is how I would do it without any library/plugin.
const items = document.querySelectorAll('.item')
const log = document.querySelector('#log')
const MIN_WIDTH = 32
// Check if the elements are smaller than the MIN_WIDTH
// and apply a class to hide the text and show an ellipsis.
for (let item of items) {
if (item.clientWidth < MIN_WIDTH) {
item.classList.add('hidden')
}
}
.item {
background-color: red;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 0.5rem;
padding: 0.2rem;
}
.n1 {
width: 1.5rem; // 24px
}
.n2 {
width: 6rem;
}
/*
This will hide the text and display an ellipsis instead
*/
.hidden {
position: relative;
white-space: nowrap;
}
.hidden::before {
content: '...';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
text-align: center;
}
<div class="container">
<div class="item n1">Proe Schugaienz</div>
<div class="item n2">Proe Schugaienz</div>
</div>
If you plan on changing the size of the elements, you can wrap the loop inside a function, and then call it when needed.
$.fn.overflow = function () {
return this.each(function () {
if ($(this)[0].scrollWidth > $(this).innerWidth()) {
$(this).css('overflow', 'hidden').css('text-overflow', 'ellipsis').css('white-space', 'nowrap').css('min-width', '16px');
}
});
};
$(function () {
$('.item').overflow();
});
.item {
margin: 5px;
background: red;
padding: 2px;
overflow: auto;
word-wrap: break-word;
}
.n1 {
width: 8px;
}
.n2 {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item n1">Proe Schugaienz</div>
<div class="item n2">Proe Schugaienz</div>
</div>
I agree to the answers provided before adding text-overflow: ellipsis; to the div's does work even if content does not overflow. I believe that you want to add the ellipsis at the beginning of the content which can be achieved by "reverse ellipsis" and without the help of any js code you can achieve this kind of output Here's a plnkr that I have created for you:
https://plnkr.co/edit/TwotVdtGMaTi6SWaQcbO?p=preview
.box {
width: 250px;
border: 1px solid silver;
padding: 1em;
margin: 1em 0;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reverse-ellipsis {
/* Your move. */
text-overflow: clip;
position: relative;
background-color: #FFF;
}
.reverse-ellipsis:before {
content: '\02026';
position: absolute;
z-index: 1;
left: -1em;
background-color: inherit;
padding-left: 1em;
margin-left: 0.5em;
}
.reverse-ellipsis span {
min-width: 100%;
position: relative;
display: inline-block;
float: right;
overflow: visible;
background-color: inherit;
text-indent: 0.5em;
}
.reverse-ellipsis span:before {
content: '';
position: absolute;
display: inline-block;
width: 1em;
height: 1em;
background-color: inherit;
z-index: 200;
left: -.5em;
}
body {
margin: 1em;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>The goal would be to add ellipsis on the beginning and show the end of the content. Any idea?</p>
<div class="box ellipsis reverse-ellipsis"><span>Here is some long content that doesn't fit.</span></div>
<div class="box ellipsis reverse-ellipsis"><span>Here is some that does fit.</span></div>
</body>
</html>
All you need to do is add an extra element within .reverse-ellipsis (here a span); I hope this might help you.
I am using the odometer.js library and I want to add a '$' right before the display of numbers. (EX: $123,435) Does anyone know how to go about this to get it to work? I have tried adding tags and inserting it in the options section of the javascrip which is in correlation with the library, but it still will not work. I have also tried :before and :after pseudos but that is not very dynamic.
<div class="odometer" id="odometer"></div>
.odometer {
color: rgba(250,250,250,.75);
font-size: 50px;
margin-top: 100px;
background-color: #2ecc71;
text-align: center;
padding-top: 10px;
position:fixed; top: -50px; width:100%; border: 0px solid black !important;
}
.odometer:before {
content: "$";
}
This should do the trick:
.odometer-inside:before {
content: "$";
}
DEMO: https://jsfiddle.net/lmgonzalves/tuqhmok1/1/
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}