CSS truncate strings past two lines - javascript

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.

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.

Unexpected End of input for function in brackets. Why?

I am doing a vanilla Javascript practice but I kept getting the error that says Uncaught SyntaxError: Unexpected end of input.
I don't understand what is going on, because the code seems fine to me.
Can someone help me with this? Thanks in advance for any assistance rendered.
HTML:
`<div class="foot">
<h1>Eleemo<wrap class="yol">synary</wrap></h1>
<h2 class="stash">Welcome</h2>
<p class="stash">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.</p>
</div>
<div class="foot" class='stash'>
<p class="stash" class="indi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras pulvinar mattis nunc sed blandit. Adipiscing elit pellentesque habitant morbi tristique. Ultrices vitae auctor eu augue ut lectus arcu. Habitant morbi tristique senectus et netus et malesuada. Ullamcorper sit amet risus nullam eget. In vitae turpis massa sed. Tristique senectus et netus et malesuada. Varius vel pharetra vel turpis nunc eget lorem dolor sed. Arcu bibendum at varius vel pharetra vel. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Libero id faucibus nisl tincidunt eget nullam non. Integer vitae justo eget magna fermentum iaculis.</p>
</div>
<div class="straw">
<button class="headx">Let's Begin</button>
</div>`
JS:
(function() { var elements; var winHeight;
function init() {
elements = document.querySelectorAll('.stash');
windowHeight = window.innerHeight; }
function checkPosition() {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var positionFromTop = elements[i].getBoundingClientRect().top;
if (positionFromTop - winHeight <= -80) {
element.classList.add('fadeo');
element.classList.remove('stash');
}else{
element.classList.add('stash');
element.classList.remove('fadeo');
}
} }
window.addEventListener('scroll', checkPosition); window.addEventListener('resize', init);
init(); checkPosition(); });
function apple(){ if(document.querySelectorAll(".indi")[0].style.opacity==1){
document.querySelectorAll(".straw").classList.add("woops"); }
Try This
(function() {
var elements;
var winHeight;
function init() {
elements = document.querySelectorAll('.stash');
windowHeight = window.innerHeight;
}
function checkPosition() {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var positionFromTop = elements[i].getBoundingClientRect().top;
if (positionFromTop - winHeight <= -80) {
element.classList.add('fadeo');
element.classList.remove('stash');
} else {
element.classList.add('stash');
element.classList.remove('fadeo');
}
}
}
window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);
init();
checkPosition();
});
function apple() {
if (document.querySelectorAll(".indi")[0].style.opacity == 1) {
document.querySelectorAll(".straw").classList.add("woops");
}
}
you were just missing last closing }

CSS - scroll to id but need to show h3 element above id

Normally, when scrolling to any section in HTML, only add id and add href=#id.
In my case, I have a <h3> tag above id, need to show it first.
Have any method to do it with CSS?
Another question, have any javascript (not jQuery) to smooth scroll when scrolling with a link to the id of an element?
My example code:
Click here
<h3 style="height: 500px;">NEW TEXT AT HERE</h3>
<p id="nan-txt">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>
The best solution is to set id to h3 tag. But if you can't the best options is set padding and negative margin.
Example in the snippet below.
Is a lot of smooth scroll scripts, I always use this:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
.space {
height: 3000px;
}
h3 {
margin-bottom: -50px;
}
#one {
height: 3000px;
padding-top: 50px;
}
Click!
<div class="space"></div>
<h3>Title of H3</h3>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id risus consectetur, lobortis justo sed, feugiat ipsum. Suspendisse quis enim lacus. Curabitur lorem dolor, lobortis id metus quis, venenatis accumsan dui. Duis metus est, consectetur dignissim
porta sodales, accumsan sit amet magna. Vestibulum id metus mauris. Etiam aliquet quam in est viverra, ut posuere nunc scelerisque. Morbi in ligula id mi iaculis pulvinar. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Vivamus in lorem at massa molestie commodo aliquam sollicitudin augue. Nulla facilisi. Phasellus ultrices viverra mattis. Aenean rhoncus nibh a rhoncus congue. Nulla feugiat orci eget auctor venenatis. Integer a vehicula
nunc, vitae aliquet sem. Aliquam scelerisque nisl non risus feugiat, sit amet efficitur ligula convallis.</p>
This might be an unorthodox answer, but I propose you move the id to the element you want to scroll to:
Click here
<h3 id="nan-txt" style="height: 500px;">NEW TEXT AT HERE</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>
You can add h3 tag inside nan-txt element. So that it will stop on h3.
Regarding smooth scrolling, add scroll-behavior: smooth style to your html.
See the Snippet below:
html{
scroll-behavior: smooth;
}
Click here
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<p id="nan-txt">
<h3 style="height: 500px;">NEW TEXT AT HERE</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>

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.

Categories

Resources