We Keep Coding

hovering on one element while scrolling

how to hover on one element when scrolling. If you don't know how it's done, please tell me at least what it's called. There is a similar effect here. link
searched on many forums. Because I don't know what it's called, that's why I couldn't find it

If you want to know how it works I leave you my implementation of this feature (not perfect) with some comments
//add event on scroll on the window element and trigger scrollLeftAnimation function
window.addEventListener("scroll", scrollLeftAnimation);
function scrollLeftAnimation() {
//get each element who have scrollLeftAnimation class
let scrollLeftAnimationElements = document.querySelectorAll(".scrollLeftAnimation");
//for each scrollLeftAnimation element, call updateAnimation
scrollLeftAnimationElements.forEach(SectionElement => updateAnimation(SectionElement));
function updateAnimation(SectionElement) {
let ContentElement = SectionElement.querySelector(".animationContent");
//get the top value of element
//for reference see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
let y = ContentElement.getBoundingClientRect().y;
//get a pourcent of scrolling
let pourcent = Math.abs(SectionElement.getBoundingClientRect().y / (SectionElement.clientHeight - ContentElement.clientHeight));
let ContentOverflowElement = SectionElement.querySelector(".animationContentOverflow");
//get the scroll left available distance
let ContentOverflowElementLeftScrollDistance = ContentOverflowElement.scrollWidth - ContentOverflowElement.clientWidth;
if (y == 0) {
//if element is sticky then scroll left = (max scroll left available distance) * (pourcent of scrolling)
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance * pourcent;
} else if (y > 0) {
//if element is bellow, then scroll left = 0
ContentOverflowElement.scrollLeft = 0;
} else {
//if element is above, then scroll left = max scroll left available distance
ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance;
}
}
}
section {
height: 100vh;
}
/*Main CSS*/
section.scrollLeftAnimation {
/*The more the ratio between the height of
.scrollLeftAnimation compared to .animationContent
the more it will be necessary to scroll*/
height: 300vh;
}
section.scrollLeftAnimation .animationContent {
/* using sticky to keep the element inside the window*/
position: sticky;
top: 0;
height: 100vh;
}
.animationContent .animationContentOverflow {
height: 25vh;
overflow: hidden;
}
/*CSS for card element*/
.animationContent ul {
margin: 0;
padding: 0;
height: 100%;
white-space: nowrap;
}
.card {
border: 1px solid black;
height: 100%;
width: 35vw;
background-color: gray;
display: inline-block;
}
.card + .card {
margin-left: 50px;
}
.card:first-child {
margin-left: 25px;
}
.card:last-child {
margin-right: 25px;
}
<section style="background-color: darkorchid;">Regular section 1</section>
<section class="scrollLeftAnimation" style="background-color: deeppink;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: violet;">Regular section 4</section>
<section style="background-color: silver;">Regular section 5</section>
<section class="scrollLeftAnimation" style="background-color: peru;">
<div class="animationContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Rhoncus dolor purus non enim praesent elementum facilisis leo. Turpis tincidunt id aliquet risus feugiat in ante metus.</p>
<div class="animationContentOverflow">
<ul>
<li class="card">card 1</li>
<li class="card">card 2</li>
<li class="card">card 3</li>
<li class="card">card 4</li>
</ul>
</div>
</div>
</section>
<section style="background-color: orange;">Regular section 7</section>

Unfold or close content in html/JS - Need display partial content

I would like to display partial content, then unfold or close the remaining content in html/JS,
I have project.html as below, what I achieved is as attached picture, it doesn't display anything before I clicked:
<style type="text/css">
#box4{padding:10px;border:1px solid green;}
</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
if(shutAble) return;
targetObj.style.display="none";
if(openTip && shutTip){
sourceObj.innerHTML = shutTip;
}
} else {
targetObj.style.display="block";
if(openTip && shutTip){
sourceObj.innerHTML = openTip;
}
}
}
</script>
<div><button onclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></div>
<div class="list-group list-group-flush list-group-formset">
<div class="col-10" id="box4" style="display:none">{% for c in course %}{{ c }} {% endfor %}</div>
</div>

In this case you could play with the text-overflow: ellipsisso in your collapsed item you should set a class with the following properties
.collapsed-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
targetObj.classList.toggle("collapsed-content");
if(targetObj.classList.contains("collapsed-content")){
sourceObj.innerHTML = oShutTip;
} else {
sourceObj.innerHTML = oOpenTip;
}
}
#box4{padding:10px;border:1px solid green;}
.collapsed-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div><button onclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></div>
<div class="list-group list-group-flush list-group-formset">
<div class="col-10 collapsed-content" id="box4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis tortor orci. Vestibulum elementum leo augue, quis accumsan justo consequat in. Pellentesque egestas sollicitudin velit, sed consequat massa lobortis vitae. Integer aliquet arcu eros, id bibendum diam sodales pulvinar. Aenean odio tellus, venenatis a rutrum a, interdum eu turpis. Ut condimentum volutpat aliquam. Praesent auctor ex nec sagittis commodo.
</div>
</div>

In jquery accordion, how to make sure when you click on one header, the other one closes?

I'm using Jquery Accordion to show and hide certain divs. There's also a "Show All"/"Expand All" button. Everything works fine, except for when I click on the header of section 1 and then click on header of Section 2, Section 1 remains expanded. How do I make it collapse when another one is open whilst retaining the show all and hide all functionality? I have tried multiple answers on StackOverFlow, jquery forums and fiddles. Each one of them seem to be missing one thing or the other. Can someone please help me?
This is a fiddle that is almost close to what I want: http://jsfiddle.net/apd8526c/
This is what it is doing:
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function() {
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function(){
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});

Check this working code. I have added
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function () {
$('#accordion .ui-accordion-content:visible')['slideUp']().trigger('hide');
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen ? 'slideUp' : 'slideDown']()
// trigger the correct custom event
.trigger(isOpen ? 'hide' : 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function () {
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen ? 'hide' : 'show']()
.trigger(isAllOpen ? 'hide' : 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (isAllOpen) {
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (!isAllOpen) {
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.accordion-expand-holder {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<p class="accordion-expand-holder">
<a class="accordion-expand-all" href="#">Expand all</a>
</p>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 2
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 3
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
</body>
</html>

Responsive full screen video below fixed top navbar

How can I have a full sized responsive HTML5 video under the bootstrap's fixed top nav bar?
This is my sample code:
<nav><!-- navbar goes here --></nav>
<div class="container">
<div style="width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<video controls="" style="height: auto; width: 100%" autoplay="">
<source src="videos/myvideo.mov">
</video>
</div>
</div>
After searching through many questions, the above video div could actually fits my video completely on the window (which actually moves my video to middle of the body and scales to fit entire window), so I thought if I could adjust the transform values to something else would work.
But nav bar stays above video and there is a cut off of video on the top.
Is there any way to make my video fit completely under the navbar?
Should I use the media queries and set fixed width & height of video & its container? Is that right way?
Could be like this http://jsfiddle.net/mgmilcher/8R7Xx/sho/ but this hides part of video on the tap by navbar

You can easily do this by calculating your header height, and setting it as margin-top on your video-container on init as well as on resize.
This is your updated fiddle
Update your code like so:
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px',
height = $(window).height(),
unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}

If you using bootstrap then they have own responsive embedded class. Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to , , , and elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don't need to include frameborder="0" in your s as we override that for you.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
OR
With out bootstrap
Create a container div around the iframe code and give it a class eg:
<div class="video-container"><iframe.......></iframe></div>
Add in the CSS:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
The first CSS declarations target the video container and the second target what is in the container, in this case it's the iframe, you can also apply this to objects and embed elements.
That's it the video will now scale as the viewport is resized, the magic element is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%, full explanation in alistapart article.
Also get same out put using JS.
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px',
height = $(window).height(),
unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}
Here's your updated fiddle.
/** Document Ready Functions **/
/********************************************************************/
$(document).ready(function() {
// Resive video
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
scaleVideoContainer();
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var navbarHeight = $('.navbar-fixed-top').height() + 'px';
var height = $(window).height();
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css({
'margin-top': navbarHeight,
'height': unitHeight
});
}
function initBannerVideoSize(element) {
$(element).each(function() {
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element) {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function() {
var videoAspectRatio = $(this).data('height') / $(this).data('width'),
windowAspectRatio = windowHeight / windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({
'top': -(videoHeight - windowHeight) / 2 + 'px',
'margin-left': 0
});
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({
'margin-top': 0,
'margin-left': -(videoWidth - windowWidth) / 2 + 'px'
});
}
$(this).width(videoWidth).height(videoHeight);
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
.video-container .link a {
color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Services
</li>
<li class="active">Sectors
</li>
<li class="active">News
</li>
<li class="active">About Us
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="homepage-hero-module">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to our Company</h1>
</div>
<div class="description">
<div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</div>
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
<div class="poster hidden">
<img src="http://www.videojs.com/img/poster.jpg" alt="">
</div>
</div>
</div>
<div class="container" id="content">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>
<a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>
<a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
<!-- /container -->

use bootstrap builtin class responsive and here is some different method
link

display all textarea rows without scrolling [duplicate]

This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 7 years ago.
How can I display all textarea rows instead of having that vertical scroll. I have tried with css using min-height and max-height and height: auto but is not working.
.form-control{
width:400px;
min-height: 100px;
max-height: 900px;
height: auto;}
I don't really know if is possible to do that with css.
Maybe is possible with native javascript so I am trying something like this
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!")>
}
}
I find something nice here but it only increase and decrease rows , so how can I display all textarea rows without using scroll. DON'T NEED SOLUTION WITH FIXED HEIGHT, NEED SOMETHING DYNAMIC or other solutions that works only on chrome browser or only on firefox like Object.observe().
Demo
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!") >
}
}
body {
padding: 20px;
}
.form-control {
width: 400px;
min-height: 100px;
max-height: 900px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>
External JSFiddle.

Simple jQuery solution is:
$(function() {
$('textarea').each(function() {
$(this).height($(this).prop('scrollHeight'));
});
});
Check Fiddle.
As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('textarea');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
Check Fiddle Here.

No Javascript required.
You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:
.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
<div class="textarea" contenteditable="true">

The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.
Here is the code from the example.
The following example shows how to make a textarea really autogrow while typing.
function autoGrow(oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
textarea.noscrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Autoadjust
This example will take care of the case where you remove lines.
function autoAdjustTextArea(o) {
o.style.height = '1px'; // Prevent height from growing when deleting lines.
o.style.height = o.scrollHeight + 'px';
}
// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================
// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);
textarea.noscrollbars {
overflow: hidden;
width: 400px; /** This is via your example. */
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>

Using Jquery and some logic I have tried to do what you need.
Here is the jsfiddle;
https://jsfiddle.net/45zsdzds/
HTML:
<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>
Javascript:
$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');
CSS:
textarea[name='FurnishingDetails']{
height:2em;
}
Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.