Can I set a column break in a CSS multicolumn layout? - javascript

I have a big paragraph of text flowing into a CSS multicolumn layout stretching, say, two, three, or four columns using CSS hyphening. At some point, one of the column's text needs to be ended earlier in order to allow the rest of the paragraph to start at the top of the second column.
Is there any way we can simply set a <column-break> to start the rest of the text at the top of the next column?
Currently I'm stuffing the column (that needs the column-break) with a lot of <br>s to lengthen the column in HTML in order to achieve the effect.
Furthermore, whenever something is changed in either of the columns, the amount of <br> stuffing falls short and needs to be reassessed.
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
See my JSFiddle.
Is there any way to "end" the first column elegantly and tell the browser to start the rest of the content in the next columns?

5. Column breaks
When content is laid out in multiple columns, the user agent must
determine where column breaks are placed. The problem of breaking
content into columns is similar to breaking content into pages.
Three new properties are introduced to allow column breaks to be
described in the same properties as page breaks: ‘break-before’,
‘break-after’, and ‘break-inside’. These properties take the
same values as ‘page-break-before’, ‘page-break-after’, and
‘page-break-inside’ [CSS21]. In addition, some new keyword
values are added.
These properties describe page/column break behavior
before/after/inside the generated box. These values are normatively
defined in [CSS21]:
auto: Neither force nor forbid a page/column break before (after, inside) the generated box.
always: Always force a page break before (after) the generated box.
avoid: Avoid a page/column break before (after, inside) the generated box.
left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.
This specification adds the following new values:
page: Always force a page break before (after) the generated box.
column: Always force a column break before (after) the generated box.
avoid-page: Avoid a page break before (after, inside) the generated box.
avoid-column: Avoid a column break before (after, inside) the generated box.
Therefore, you could use something like
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column {
break-before: column;
break-after: column;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
However, only Internet Explorer 10+ and Opera 11.10-12.1 seem to support those properties.

One way to tackle this would be to actually wrap your text in paragraphs (p tags), as you should do for semantics as well, and not allow your 2nd paragraph to break, given it is never longer then 1 column.
This can be achieved by using the break-inside CSS property.
https://developer.mozilla.org/en/docs/Web/CSS/break-inside
Code example based on your snippet:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
#multicolumn {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
}
p {
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0 0 1.4em;
}
p:nth-of-type(2) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>

Use the <p> tags to distinguish between paragraphs.
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam.</p>
<div id="filler"></div>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
</div>
And the CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
#filler {
float: left;
position: relative;
background-color: #f00;
height: 120px;
width: 50%;
http://jsfiddle.net/mnz2h9hr/2/
The <p> tags keeps the paragraphs together, and the 'filler' (marked in red) keeps an area free of text.

For your situation, the best solution is to use a grid system.
Please run the snippet in Full Page view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col-sm-6" style="background-color:lavender;">
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
</div>
</div>
</body>
</html>

If you are able to wrap each column in a div, then the most elegant solution would be to use a bootstrap style grid.
.row {
margin: 0 -15px;
}
.column {
box-sizing: border-box;
float: left;
padding: 0 15px;
width: 50%;
}
<div id=row">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
If you are using a wysiwyg to enter copy, then you must have access to a source button to wrap your columns in divs. Then using the above code, columns become very simple; and easily made responsive.

Elaborating more on #Oriol answer you can set the width so first column will always use left half.
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column:nth-of-type(1) {
width:50%;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

Technically not the CSS multicolumn feature you are targeting to column-break in, but this looks visually similar.
.column {
width : 46%;
margin: 0% 2%;
height: 100%;
float: left;
}
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
Here's the jsFiddle : http://jsfiddle.net/Vbr9d/242/

Related

Calculate height of a paragraph and break it

i would like to insert inside a paragraph an html element every 200px of height, in order to break it.
Here is the paragraph:
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend o
ption congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
.newspaper p {
column-count: 3;
}
Inside the paragraph i want to inject a span tag, like this:
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<span>TEST</span>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
<span>TEST</span>facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
This is what i tried to do:
var height = $('.newspaper').height();
console.log(height);
if (height > 200) {
$( ".newspaper p" ).append( "</p><span>TEST</span><p>" );
}
The problem is that "append" inserts the html at the end.
I want it to loop every 200px of the paragraph height.
Although there is no way to just get 200 pixel intervals on a paragraph, you could manually set the blocks to 200px tall elements, and write a method to split a block of text into N character blocks (N being a good number to cover a 200px element)
var fullParagraph = `...`;
var N = 10; //N. chars in 1 chunk, used in a string slicing fn.
var parentDiv = document.createElement("div");
var TEST = document.createElement("span");
TEST.innerHTML = "TEST";
var iterations = Math.floor(fullParagraph.length / N);
for(let i = 0; i < iterations; i++){
//Push your paragraph bit
let 200px_H_p = document.createElement("p");
const newContent = document.createTextNode( fullParagraph.slice(i * N, (i+1)*N );
200px_H_p .appendChild(newContent);
//Now I know the element above the insertion is 200px for sure, so put TEST after it
parentDiv.appendChild(200px_H_p);
parentDiv.appendChild(TEST);
}
Basically I just split a string into N-sized chunks of chars, then I just push them to the parent Div in intervals with your filler (in-between elements)

Break paragrapher inside a column-count

I'm trying to break dynamic texts contained in one or more paragraphs inside a div with attribute column-count:3, so when printing, the horizontal sheet is divided into several parts. I have only one html element with all paragraphs in it, let's say I want to break it every 400px and make it go to next page, like this:
.newspaper {
padding: 50px 0;
column-gap: 40px;
height: auto;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
column-fill: balance;
-moz-column-fill: balance;
-webkit-column-fill: balance;
}
<div class="container">
<div class="newspaper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
how I would like it to be:
I tried to add dynamically via js this:
<div class="pagebreak" style="page-break-before: always; "></div>
but doesn't work inside a paragraph.

Bootstrap column, how to scroll on overflow?

<body class='container-fluid mx-auto' style='width: 95%'>
<div class='row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0
col-9'>
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0 col-3'
style='overflow-y: scroll'>
</div>
</div>
</body>
I want everything to remain responsive as it is now (where video_container is responsively in proper ratio and both video_container and chat_container are same height). but I don't want chat_container to expand further below in height when chats fill up the space. Instead I want it to scroll. How can it be done ?
I did set overflow-y: scroll to id chat_container in <style></style> because somehow style attribute disappears when added directly to the element(???) but that does nothing.
In the head I have (serving locally from downloaded copy) :
<link rel='stylesheet' href='bootstrap.min.css'>
<script src='jquery-3.3.1.slim.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='popper.min.js'></script>
You can do this by creating your own video-chat-row class. Note that by using the embed-responsive-16by9 class, you cannot expect the row and col-x classes to work normally. You got to create your own overrides.
.video-chat-row {
display: flex;
width: 100%;
position: relative;
}
#video_container {
flex: 0 0 75%;
background-color: black;
}
#chat_container {
position: absolute;
width: 25%;
left: 75%;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0' >
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0'>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
<p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
</div>
</div>
</body>

How to make a div that on scroll down after a bit of space sticks to the top of the page

I am trying to make my nav bar stick to the top of the page without using position fixed and only sticks after a set amount of space, say 500px. I have tried many different solutions but none of them work because I have a really weird nav.It also works for some reason in jsfiddle but not on my website.
Heres a jsfiddle of it.
CSS
#background {
background: lightblue;
background-position:center top;
}
p {
font-size:15px;
padding-top:100px;
padding-left:100px;
padding-right:100px;
}
.rotate {
float: left;
-webkit-transform: rotate(180deg) 2s;
transform: rotate(180deg) 2s;
transition: all 2s ease;
transition-delay: 0.4s;
}
.rotate:hover {
-webkit-transform: rotateZ(-360deg);
-ms-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
.container {
overflow: hidden;
font-family: 'Roboto Condensed', sans-serif;
position: static;
z-index: 150;
margin-bottom: -80px;
}
.container a {
float: right;
font-size: 20px;
color: black;
text-align: center;
padding: 40px 70px;
text-decoration: none;
transition: background 1s;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: white;
color: black;
padding: 40px 70px;
background-color: inherit;
font-family: 'Roboto Condensed', sans-serif;
transition: background 1s;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: lightgreen;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-right: 1px solid #bbb;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 18px;
}
.dropdown-content a:hover {
background-color: #ddd;
border-right: 1px solid #bbb;
}
.dropdown:hover .dropdown-content {
display: block;
}
HTML
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo:200|Open+Sans:300|Quicksand|Roboto+Condensed|Shadows+Into+Light" rel="stylesheet">
<div class="active">
<div id="background">
<div class="opacity">
<div class="container">
<div class="rotate">
<img class="chiz" src="kkk.png" alt="Example">
</div>
Home
About
FAQ
Games
<div class="dropdown">
<button class="dropbtn" onclick="window.location.href='store.html'">Store</button>
<div class="dropdown-content">
Example
Example
</div>
</div>
</div>
</div> <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
jQuery
jQuery(function($) {
function fixDiv() {
var $cache = $('.container');
if ($(window).scrollTop() > 0)
$cache.css({
'position': 'fixed',
'top': '0px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto'
});
}
$(window).scroll(fixDiv);
fixDiv();
});
Thanks, Any help appreciated :D
I'm going to assume that <div class="dropdown"> is your navbar.
Without using position fixed, you could get the top of your window using JS like this answer.
And then run the following function which listens for a window scroll event and then sets the navbar's top to match the window's top after you've scrolled a certain amount of pixels.
document.onscroll = () => {
const navbar = document.getElementsByClassName('dropdown')[0];
let top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if(top > 500) {
navbar.style.top = top;
} else {
navbar.style.top = 0;
}
};
I can't test this right now. So it may or may not work. Will update this after I test it.

CSS truncate strings past two lines

I have an item "gallery" with the name of the item above the image. I am loading all information from an xml file so I need the strings to be modified dynamically at two lines adding "..." to the end of the strings that are too long. is there a way to do this? I'd prefer an answer in JS but any language will do.
here is the code for the gallery portion of the page.
<?php
$GO = $game->gameobjects;
$sets = $GO->sets;
foreach($sets->set as $set) {
echo" <h3>$set->name</h3>\n";
echo" <div class=\"gallery\">\n";
$objects = $set->objects;
foreach($objects->object as $object) {
$url = genurl("$base->name" . "." . $object->img, "png");
$name = trimtext($object->name, 20);
echo" <div class=\"item\">
<div class=\"item-name\" title=\"$name[title]\">
$name[name]
</div>
<img src=\"$url\" class=\"item-img\"/>
</div>\n";
}
echo" </div>\n";
}
?>
I was hoping by truncating the text at a certain string length would work but 20 characters could still span 3 lines or more and I want two lines max.
.text-limiter {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width:400px;
}
<div class="text-limiter">
Lorem ipsum dolor sit amet nunc.<br>Sed nonummy gravida. In eros diam sed urna. Nunc at ipsum. Vestibulum ante ipsum orci, id leo ac risus. Sed sed lacus. Curabitur arcu vitae ante. Lorem ipsum feugiat est, at magna. Vestibulum ante ipsum nibh, volutpat massa dui eget enim. Mauris lobortis eu, rhoncus purus, congue eleifend. Nulla dolor dictum accumsan lorem. Vestibulum convallis cursus a, mattis sem. In cursus dignissim erat a neque mauris, interdum malesuada. Donec sit amet, libero. Donec nec adipiscing elit. Curabitur ultrices velit nulla a mi. Cras nec pede. Pellentesque placerat. Curabitur et turpis. Cras ipsum sed neque. Phasellus hendrerit magna iaculis odio, a mi. Fusce convallis eu, auctor tortor id purus est, at sapien. Etiam varius nec, mattis a, convallis tellus. In hac habitasse platea dictumst. Aenean augue egestas dignissim, libero at turpis. Duis aliquam, purus lacinia neque. Nunc leo. Curabitur scelerisque mauris vitae odio condimentum ac, cursus wisi, posuere cubilia Curae, Donec pulvinar gravida, eros eros sed justo ac nunc iaculis at, molestie aliquam. In nec ligula placerat quam. Phasellus posuere cubilia Curae, Quisque rutrum, urna.
</div>
You can use css
.item-name{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
...or cut in php (if you know how many symbols must be)
function my_crop($text, $length)
{
if ($length <= 0 || strlen($text) <= $length)
return $text;
$out = mb_substr($text, 0, $length);
$pos = mb_strrpos($out, ' ');
if ($pos)
$out = mb_substr($out, 0, $pos);
return $out.' …';
}
and use my_crop($name[name], 20) within $name[name]
..or look, what you have in array $name, cause string
$name = trimtext($object->name, 20);
looks like already trimming something
Maybe you can try this approach.
Instead of truncating the text, just hidde it. Create a wrapper with a max-height, this measure should be number of desired lines * 1 line height.
Note that this is responsive and cross-browser.
Here's a Javascript example for you. You need to set the max-height and overflow of the div though. In my snippet there are two ways to do it. With id or by class (for multiple elements).
function lastLineEllipsWithId(id) {
var el = document.getElementById(id);
var wordArray = el.innerHTML.split(' ');
while (el.scrollHeight > el.offsetHeight) {
wordArray.pop();
el.innerHTML = wordArray.join(' ') + '...';
}
}
function lastLineEllipsWithClass(elementClass) {
var elements = document.getElementsByClassName(elementClass);
for (var i = 0; i < elements.length; i++) {
var wordArray = elements[i].innerHTML.split(' ');
while (elements[i].scrollHeight > elements[i].offsetHeight) {
wordArray.pop();
elements[i].innerHTML = wordArray.join(' ') + '...';
}
}
}
lastLineEllipsWithId('box');
lastLineEllipsWithClass('box');
#box {
height: 40px;
overflow: hidden;
padding: 5px;
border: 1px solid black;
margin: 10px;
}
.box {
height: 40px;
overflow: hidden;
padding: 5px;
border: 1px solid black;
margin: 10px;
}
.box2 {
height: 70px;
width: 300px;
overflow: hidden;
}
<div id="box">
<b>ID BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box">
<b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box box2">
<b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
This works also with set width etc (as seen in the last example). Overall when the div is overflowing it will ellipsis the last line that is visible.

Categories

Resources