We Keep Coding

Align separate native HTML web component into a table or grid

I have a like a spreadsheet of data (rows and columns), and I am converting to web components. It makes sense to make each column a web component. However some of the fields may require more vertical space than others. I could set a max height and scroll within the box, but I would prefer for the "row", i.e. the nth cell of each column, to be the same height. How would you make it such that it always appears as a grid?
In the example below "cell" A2 and B2 do not align vertically because they are independant. How does one insert webcomponents into a <table> or a display: grid element when the web component needs span multiple rows, but keep the rows aligned?
class Component extends HTMLElement {
constructor() {
super().attachShadow({mode:'open'});
const template = document.getElementById("TEMPLATE");
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
if (this.initialised) return; // Prevent initialising twice is item is moved
setTimeout(() => {
this.initialised = true;
this.init();
});
}
get(id) {
return this.shadowRoot.getElementById(id);
}
init(required = true) {
const prev = this.previousElementSibling;
let props = JSON.parse(prev.textContent);
this.props = props;
}
set props(value) {
this.get('TEXTAREA1').textContent = value.textarea1;
this.get('TEXTAREA2').textContent = value.textarea2;
}
}
window.customElements.define('wc-column', Component);
#CONTAINER {
display: flex;
flex-direction: row;
}
<template id="TEMPLATE">
<style>
:host {
display: block;
border: 1px solid lime;
}
#TEXTAREA1, #TEXTAREA2 {
border: 1px solid red;
display: block;
}
</style>
<div id="TEXTAREA1"></div>
<div id="TEXTAREA2"></div>
</template>
<div id="CONTAINER">
<script type="application/json">
{
"textarea1": "Cell A1",
"textarea2": "Cell A2"
}
</script>
<wc-column></wc-column>
<script type="application/json">
{
"textarea1": "Cell B1 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum",
"textarea2": "Cell B2 - Long text that overflow and requires extra vertical height because it is so long, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsu, lorem ipsummmmmmmmmmmmmmmmmmmm, lorem ipsum"
}
</script>
<wc-column></wc-column>
</div>

How to select entire lines of text when selection partially covers multiple lines

In the example below place the cursor anywhere in the middle of two lines, eg. from 'ipsum' to the following 'lorem'. The following words will be selected: ipsum dolor sit lorem
On clicking the button I need to get the full lines in the selection. In the above example I should retrieve the following words:
lorem ipsum dolor sit lorem ipsum
Does anyone know how I can do this?
$('button').on('click', function() {
var sel = window.getSelection();
sel.modify('move', 'backward', 'paragraphboundary');
sel.modify('extend', 'right', 'paragraphboundary');
});
div {
white-space: pre-wrap;
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>lorem ipsum
dolor sit
lorem ipsum
lorem ipsum
dolor sit
lorem ipsum
</div>
<br>
<button>CLICK</button>

How can i scroll one service section at a time while keeping the .service-inner element in the same place?

I'm trying to create a layout where the user will be able to scroll one service section at a time for ex if the user scrolls down from the first section i want the first section to fade out before the second section fades into the same place as the frist section was
here is a link to js bin Click [here] (https://jsbin.com/xubemivaso/edit?html,js,output)
#one, #two, #three, #four
{
padding: 0px;
margin: 0px;
height:100%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
font-size:3rem;
right: 0px;
left: 0px;
background-color:black!important;
}
#one {
top:0px;
}
#two {
top:100%;
}
#three {
top:200%;
}
#four {
top:300%;
}
.container-outer{
overflow: hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
position:relative;
}
.container-inner{
overflow:auto;
position:fixed;
width:100%;
height:100%;
padding:30px;
border:30px solid #131313;
margin:0px;
padding:0px;
}
.container-inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body itemscope itemtype ="http://schema.org/LocalBusiness">
<div class="cursor"></div>
<div class="cursor"></div>
<div class="container-outer">
<div class="container-inner" id="fullpage">
<nav>
<a class="careers">CAREERS</a>
<a class="services">SERVICES</a>
<a class="about">ABOUT</a>
<a class="find-us">FIND US</a>
</nav>
<div class="slogan">
<h1>SERVICES</h1>
</div>
<div id="one" class="outer section">
<div class="service-inner first">
<p class="service-title-first"></p>
<p class="service-para-first">
Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor
</p>
</div>
</div>
<div id="two" class="outer section">
<div class="service-inner second">
<p class="service-title-second"></p>
<p class="service-para-second">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="three" class="outer section">
<div class="service-inner third">
<p class="service-title-third"></p>
<p class="service-para-third">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="four" class="outer section">
<div class="service-inner fourth">
<p class="service-title-fourth "></p>
<p class="service-para-fourth ">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
</div>
</div>
<script>
(function(container){
$.fn.stopAtTop= function (serv) {
var $this = this,
$container = $(".container-inner"),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($(".container-inner").scrollTop() < thisPos) {
TweenMax.to($this, 0, {"position":"absolute","top":""});
setPosition = over;
}
};
over = function(){
if (!($(".container-inner").scrollTop() < thisPos) ){
TweenMax.to(serv.prev(".service-inner").find('.service-inner'), 1, {"opacity":"0"});
TweenMax.to($this, 0, {"position":"sticky","top":"0px"});
TweenMax.to(serv, 1, {"opacity":"1"});
setPosition = under;
}
};
setPosition = over;
$container.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$container.scroll(function(){setPosition();});
setPosition();
};
})($(".container-inner"));
$('#one').stopAtTop($("#one > .service-inner"));
$('#two').stopAtTop($("#two > .service-inner"));
$('#three').stopAtTop($("#three > .service-inner"));
$('#four').stopAtTop($("#four > .service-inner"));
</script>

How to show and hide an element when scrolling the window using jquery

I want to show a border effect when I'll scroll down and reach on the desired section.And it'll be hide when I'll leave that section. Is this possible using jquery?

Using $(document).on('scroll'), like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
html,body {
height:101%;
}
#box-1 {
width:200px;
height:200px;
background-color:#333;
}
.border-1 {
border: 10px solid #696969;
}
</style>
<body>
<h1 id="myTarget">This is the desire section</h1>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<div id="box-1"></div>
<script>
$(document).on('scroll', function() {
var pos = $(this).scrollTop();
if( pos >= $('#myTarget').offset().top){
$("#box-1").addClass("border-1").show();
} else {
$("#box-1").removeClass("border-1").hide();
}
})
</script>
</body>
</html>

jQuery custom scrollbar plugin doesn't update with horizontalScroll: true

I’m using jquery plugin jQuery custom content scroller
source :
http://manos.malihu.gr/jquery-custom-content-scroller/
It works very well in vertical mode.
I can call mCustomScrollbar and call the update method.
See this fiddle :
http://jsfiddle.net/Vinyl/2mU7H/1/
But in horizontal mode, i have an issue when i call the update method. There is no content.
See this fiddle :
http://jsfiddle.net/Vinyl/4CW3p/1/
Do you know why ?
JS Code :
$(document).ready(function () {
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark"
});
});
$("#button").click(function () {
$("#content").show();
$("#content").mCustomScrollbar("update");
});
$("#button_close").click(function () {
$("#content").hide();
});
CSS code
#content {
display:none;
overflow:hidden;
text-align:left;
width:150px;
height:150px;
background-color: #666;
color:#fff;
}
HTML code
<div id="content">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<p id="button">Show Content</p>
<p id="button_close">Hide Content</p>

Fiddle
You forgot the autoExpandHorizontalScroll setting :)
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark",
advanced: {
autoExpandHorizontalScroll: true
}
});