Check if element is in viewport based on horizontal scroll - javascript

I've got a side scrolling / horizontal layout site I'm building. I use a function to test whether or not an element is in the viewport on "normal" vertical layout sites in order to add classes, animations, etc. once it comes into view.
I'm trying to get the same effect for the horizontal layout, but to no avail.
Here is the regular version of the function -
$.fn.isInViewport = function() {
if ( $(this).length ) {
var elementTop = $(this).offset().top;
}
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
And here is the way I tried it for horizontal layouts, which didn't work.
$.fn.isInViewport = function() {
if ( $(this).length ) {
var elementLeft = $(this).offset().left;
}
var elementRight = elementLeft + $(this).outerWidth();
var viewportLeft = $(window).scrollLeft();
var viewportRight = viewportLeft + $(window).width();
return elementRight > viewportLeft && elementLeft < viewportRight;
};
You call the function like so
$(".element").each(function() {
if ( $(this).isInViewport() ) {
$(this).addClass("animate-element");
}
});


Using jquery its pretty easy, All yo have to do is $(element).on('scroll',(--function--)) and then you can use $(this).offset().left to get the pixel on its left and when you get the offset of left, you can just do whatever you want. Check the snippet below for an working example. (if possible run in smaller screen like mobile)
$("#timeline").on('scroll', function() {
$("#timeline .each").each(function(){
let left = $(this).offset().left;
if(left >-50 && left< (window.innerWidth - 100)){
$(this).addClass('mvisible')
}
else{
if($(this).hasClass('mvisible')){
$(this).removeClass('mvisible')
}
}
});
});
.timeline{overflow-x:auto;width:100%}
.timeline .warp{display:flex;width:1600px;padding:50px 100px 50px 30px;}
.timeline .each{width:185px;}
.timeline .desc{padding:15px;border-radius:4px;background:#08f;color:#fff;width:100%;transform:translateY(50px);opacity:0;transition:0.4s}
.timeline .mvisible .desc{transform:translateY(0);opacity:1}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline">
<div class="warp">
<div class="each mvisible">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each" >
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each" >
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="each">
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>


As mentioned in the comments IntersectionObserver is a good place to start
const inViewObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// do stuff when in view
entry.target.classList.add('in-view')
document.body.dataset.log = 'Element in view - well done 😃'
} else {
// do stuff when not in view
entry.target.classList.remove('in-view')
document.body.dataset.log = 'Element not in view - try to find it 🔍'
}
})
}, { threshold: .5 })
const elm = document.querySelector('.element')
inViewObserver.observe(elm)
body {
/* trigger scroll in both directions */
width: 300vw;
height: 300vh;
display: grid;
place-items: center;
}
body::before {
content: attr(data-log);
position: fixed;
top: 0;
left: 0;
}
.element {
background: tomato;
width: 10rem;
height: 10rem;
transition: all 600ms 300ms;
transform: scale(0.25) rotate(360deg);
}
.in-view {
background: olive;
transform: none;
border-radius: 1rem;
}
<div class="element"></div>

Related

Keep the position in the navigator after a click event

I have an issue about the scroll in javascript. I made a toggle feature, but when I click on the button, I have an automatic scroll; and I don't want it when the button displays the content. I only want this automatic scroll when the button hides it. I use a tutorial from this website : https://css-tricks.com/using-css-transitions-auto-dimensions/
But I didn't find a solution. I tried somes with the scrollTop or the funcion ScrollTo(), but i doesn't work.
Another thing that I don't understand about this. When I'm on the top of the page and I click on the button, there is no automatic scroll, but I scroll down just a little, the automatic scroll is here. I don't know why.
Last point, tt's necessary that the button is after the div "desc collapsible", because the idea is to close immediately the block after reading it. If it's before, the user cannot do this; he has to scroll up before.
Here is my actual code.
function collapseSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
var y = element.scrollTop;
// temporarily disable all css transitions
var elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'false');
window.scrollBy(0,y)
}
function expandSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function(e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = 'auto';
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'true');
}
document.querySelector('#toggle-button').addEventListener('click', function(e) {
var section = document.querySelector('.desc.collapsible');
var isCollapsed = section.getAttribute('data-collapsed') !== 'true';
if(isCollapsed) {
expandSection(section)
section.setAttribute('data-collapsed', 'true')
} else {
collapseSection(section)
}
});
.desc {
color: red;
overflow:hidden;
transition:height 0.3s ease-out;
height: 0;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div>
<div class="desc collapsible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<button id="toggle-button">Toggle collapse</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Thanks by advance!

You need to place your button before that div "desc collapsible" to achieve your functionality
<button id="toggle-button">Toggle collapse</button>
<div class="desc collapsible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
// remove this line <button id="toggle-button">Toggle collapse</button>

Wrap unwrapped textNode using jQuery

I have a HTML structure like this:
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
I need to get the text inside the div wrapped in <p> tag. I'm using the code below:
$('.col-md-6').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
this.nodeValue = $.trim(this.nodeValue);
}).wrap('<p></p>');
Which works fine IF there is no link (<a>) inside the text. The output with my jQuery code would be:
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>tempor<p> incididunt ut labore et dolore magna aliqua.</p></div>
This is my desired result:
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
Is this possible?

Using html() and contents()
$('.col-md-6').html(function() {
return $('<p/>').html($(this).contents())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
For multiple .col-md-6 with textNode
$('.col-md-6').each(function() {
$(this).contents().filter(function() {
return this.nodeType === 3;
}).siblings().addBack().wrapAll('<p></p>')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Wrap unwrapped textNode using regex in arbitrary HTML structure

I have pages with HTML that look like this:
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Now I need to have the first Lorem ipsum text wrapped in <p></p> tags aswell. Is there a way to detect this and do it with regex?
I would be using regex to make these changes directly in the database.

Since your structure is fixed it's just a matter of
Finding the first non-empty TextNode
Creating a p element
Substituting the text node with the paragraph inside the parent node.
I made the paragraphs green so you can see the effect. Just click the "Wrap" button to see it in action.
function wrap() {
let div = document.querySelector('div.row>div.col-md-12'); // get the container
for (let i = 0; i < div.childNodes.length; i++) { // loop through children
let n = div.childNodes[i];
if (n.nodeName == "#text" && n.textContent.trim() !== '') { // children found!
let p = document.createElement('p'); // create a `p` element
p.textContent = n.textContent; // put the original text inside
n.parentNode.replaceChild(p, n); // swap!
break; // we're done here
}
}
}
p {
background-color: green;
}
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<button onclick="javascript:wrap()">Wrap</button>

I used regex search, and when find the string, make a child element of class col-md-12 and removed another string without elements!
<html>
<body>
<div class="row">
<div class="col-md-12">
<h2>Some Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
<script>
var string = document.getElementsByTagName('html')[0].innerHTML;
var regex = /Lorem ipsum[a-zA-Z0-9_ _,_.]*/g;
var save = regex.exec(string)[0];
document.getElementsByTagName('html')[0].innerHTML = document.getElementsByTagName('html')[0].innerHTML.replace(save, "");
var first = document.createElement("p");
var text = document.createTextNode(save);
first.appendChild(text);
document.getElementsByClassName("col-md-12")[0].appendChild(first);
</script>
</html>

Html collapsible not expanding on click

My code seems fine (or maybe it's not), when I try it on online platforms it seems to work but it doesn't work when I run it locally. For example, when I put in the exact code in w3school's try it in editor there seems to be no problem.
This is the javascript file I'm using:
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
When I tried looking online I keep getting answers saying that you need a jquery file which I'm sure I have.
Help is very much appreciated.
Edit: Earlier on in my code I used "content2" instead of "content". That was a mistake, I was just messing around with my code and forgot to change it back. It still doesn't work with "content".
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
EDIT: As the problem seems to lie with code on my side that i have not shown here, i will list my .html code here. I am only using a html and css file, and my entire css file has been shown
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="css/index_styles2.css">
</head>
<body>
<div class="prtbox">
<img src="graphics/tmp/ca.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/logob.eps" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
</html>

Try placing your script toward the bottom of your HTML document, at least after the elements it uses. It's probably running before the DOM has finished loading so the elements haven't been created yet causing it to throw an error.

As already pointed out, jquery is not required over here. The other issue is, this code will not work in online editors also, as the element content2, whose height you are trying to access is not defined. Changing it to the following will also work for you -
content.style.maxHeight = content.scrollHeight + "px";

Try as below:
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}
.partnerimg{
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox{
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="prtbox">
<img src="graphics/tmp/xx1.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx2.png" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="graphics/tmp/xx3.png"class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
I have try below code in local system and its working fine. Check it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.partnerimg {
width: 250px;
padding-bottom: 2%;
cursor: pointer;
}
.prtbox {
padding-bottom: 30px;
width: 33%;
display: inline-block;
}
.partnerdesc {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
<div class="prtbox">
<img src="https://dummyimage.com/100X100/000/fff" class="partnerimg">
<div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</div>
</body>
<script>
var coll = document.getElementsByClassName("partnerimg");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = this.scrollHeight + "px";
}
});
}

find out length of last incomplete line of text in container

Is there a way, with JavaScript, to find out the rendered width of the (incomplete) last line of text in a container (e.g. in a div)?
For example, suppose I have the following HTML:
<div style="display: table-cell; text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
If the div is not wide enough, the browser will break the text into multiple lines, possibly like this:
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
How can I find out the rendered width, in pixels, of the last line ("dolore magna aliqua.") from JavaScript?

Here, this could be helpfull, this is what you want ha?
Check live in jsfiddle
$(".borded-textbox").each(function(index, elem) {
$(elem).append('<span class="endline"></span>')
var endline = $(elem).find(".endline");
//var sizeOfDiv = $(".borded-textbox").width();
var sizeOfLeftSpace = parseInt(endline.offset().left);
endline.css('width', parseInt(endline.offset().left));
endline.addClass('processed');
$(".length").append(sizeOfLeftSpace);
});

An implementation of aladin8848's ingenious idea in pure JavaScript, MWE.
<html>
<head>
<meta charset="utf-8"/>
<script>
function lastLineLength() {
var thisDiv = document.querySelectorAll('#this')[0];
var tmpSpan = document.createElement( 'span' );
thisDiv.appendChild( tmpSpan );
var x = tmpSpan.offsetLeft;
thisDiv.removeChild( tmpSpan );
thisDiv.appendChild( document.createTextNode( x ) );
}
</script>
</head>
<body onload="lastLineLength()">
<div id="this" style="display: table-cell; position: relative">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
</body>
</html>

Categories

Resources