Develop Reference

Scroll to top button visible only on desktop (no mobile)

I made a scroll to top button that appears when the user scrolls down 25px from the top of the document (otherwise it's not visible) thanks to JavaScript following a tutorial because I still don't know anything about this programming language.
However, I would like it to be visible only on desktop websites and not also on mobile.
I tried using media queries but they don't work since JavaScript has control over the visibility of the button.
What function can I integrate to manage everything with JS?
Here is the code I'm using.
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>

There is a JS way to detect if a media query is matched: this is done by using window.matchMedia(). Then it is a matter of adding the appropriate media query to matchMedia() function, and then checking the .matches property in your if block:
let myButton = document.getElementById("to-top-container");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
const matchesMediaQuery = window.matchMedia('(min-width: 600px)');
if (matchesMediaQuery.matches && (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25)) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
scrollFunction();
#to-top-container {
position: fixed;
bottom: 30px;
right: 3px;
}
.to-top-button {
background-color: #263238;
min-height: 40px;
min-width: 40px;
border-radius: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
/* animation: Up 2.3s infinite; */
}
#to-top-container .lni {
font-size: 14px;
font-weight: 900;
color: white;
}
<div id="to-top-container">
<a href="#body-container" title="Torna su" class="to-top-button">
<i class="lni lni-chevron-up"></i>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Just Add this css in your css file or if you are using bootstrap then add bootstrap media query to disable display in mobile
#media only screen and (max-width: 600px) {
#to-top-container {
display: none;
}
}

You don't need javaScript to do it, you should have used the "a" tag to jump to other pages. But the "a" tag can also jump to an element on the same page.
As defined in the HTML specification, you can use href="#top" or href="#" to link to the top of the current page.
The #media query is set to max-width: 600px - adjust the max-width to fit your needs.
html {
scroll-behavior:smooth;
}
body {
position: relative;
}
.section {
height: 100vh;
background: #dedede;
margin-bottom: 20px;
font-size: 100px;
}
.scroll-container {
position: absolute;
top: 0;
right:0;
height: 100%;
}
.scroll-container:before {
content: '';
display: block;
height: 100vh;
pointer-events: none;
}
.scroll-container a {
position: sticky;
top: 88vh;
cursor: pointer;
font-size: 20px;
}
#media (max-width: 600px) {
.scroll-container a {
display: none;
}
}
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="scroll-container">
To Top
</div>

expand all textareas without needing to click each one

I have my .jsp page set so each textarea element, when clicked, expands in size to show its full contents. The code that enables this is shown below.
But how do I modify this so all the textarea elements are pre-expanded on visit to the page?
My existing requires requires you click the specific textarea itself. I want to modify this so all textarea elements are expanded accordingly on page load, rather than a click event on the textarea itself.
js
<script type="text/javascript">
...
var elements = document.querySelectorAll('textarea');
elements.forEach(function(element) {
element.onclick = function() {
this.style.height = (this.scrollHeight > this.clientHeight) ? (this.scrollHeight) + 'px' : "1.5em";
}
});
...
</script>
css
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
textarea:focus {
height: 8em;
width: 98%;
overflow:hidden
}
I cobbled my existing code together from tips from here and here. Maybe this could be done in css alone, which would be even better.

You just need to use the same code (replacing this with element) without the click handler. Also, the CSS textarea:focus seems redundant, so it can be elimintated.
document.querySelectorAll('textarea').forEach(function(element) {
//element.classList.add("focused");
element.style.height = (element.scrollHeight > element.clientHeight) ? (element.scrollHeight) + 'px' : "1.5em";
});
textarea {
height: 1.5em;
width: 80%;
padding: 2px;
transition: all 0.2s ease;
overflow:hidden
}
<div>Lorem Ipsum
<textarea>Area 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem IpsumArea 1 Lorem Ipsum</textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 2 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>
<div>Lorem Ipsum
<textarea>Area 3 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </textarea>
</div>

Flexbox Masonry - stacked blocks that can change height and keep columns?

I'm wanting to have a number of elements stacked, and when an element is clicked, content is revealed - which pushes the element below it down
Codepen for example here -
http://codepen.io/ashconnolly/pen/bEZzmj?editors=1100
is this possible in flexbox? I've seen masonry but not sure if it can do what I need it to as it doesn't seem to have an ordering system, nor do I know if changing heights of elements and rerunning masonry is efficient.
I could manually select every element below it (with nth child) and do a transform:translateY() to move it down, and do this for every responsive layout (and add margin to the bottom of the container). But I suspect there is a better way with less manual tweaking.
Important factors
- in the order seen in the Dom (could have lots of elements 20)
- the columns amount / block width to change responsively
- can change height but keep their respective column like order
html -
<div class="box">1<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">2<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">3<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">4<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">5<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
<div class="box">6<div class="text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div></div>
css-
body { margin: 0; padding: 0; width: 100%; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.box {width:33%; height:200px; position:relative;
background:salmon; float:left;border:10px solid grey;
&:nth-child(1) {background:red;}
&:nth-child(2) {background:blue;}
&:nth-child(3) {background:green;}
&:nth-child(4) {background:orange;}
&:nth-child(5) {background:brown;}
&:nth-child(6) {background:yellow;}
&:nth-child(2) .text {display:block;color:white;}
.text {display:none; position: absolute; top:100%;z-index:2;width:100%; background:blue; border: 1px solid grey}
}
#media (max-width:600px) {
.box {width:50%;}
}

Multiple Sticky Headers - CSS / JavaScript / AngularJS

I tried to find some solution for the following scenario:
Header height is all different
Mouse scroll down
Fixed headers
Does anyone know how to make multiple sticky headers like this?
(1) init
(2) scroll down (using mouse)
(3) scroll down (using mouse)

hmm...
DEMO
$(window).scroll(function() {
var $headers = $(".header");
var scrollTop = $(this).scrollTop();
if (scrollTop <= 0) {
// reset all
$headers.css({
position: "relative",
top: "0px"
});
} else {
$headers.each(function(index, $el) {
var $curHeader = $($headers).eq(index);
var curTop = $curHeader.offset().top;
var curHeight = $curHeader.height();
// scroll up
var isRelative = ($el.isFixed && scrollTop <= $el.exTop);
// scroll down
var isFixed = (curTop <= scrollTop);
var position = "";
var top = 0;
if (isRelative) {
// reset
positon = "relative";
top = 0;
$el.isFixed = false;
} else if (isFixed) {
position = "fixed";
if (0 < index) {
for (var i = 0; i < index; i++) {
top += $($headers).eq(i).height();
}
}
scrollTop += curHeight;
if (!$el.isFixed) {
$el.isFixed = true;
$el.exTop = curTop;
}
}
$($el).css({
position: position,
top: top + "px"
});
});
}
});
body {
height: 10000px;
}
div {
height: 200px;
background: gray;
width: 100%;
}
.header {
height: 50px;
background: green;
}
div.header:nth-child(7) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>content 0</div>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

Here is a simple example:
I'm calculating the height of the headers and setting the top property.
DEMO
$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
$headers.each(function (index, el) {
var height = 0;
if (index == 0) {
height = "0px";
} else {
for ( var x = index - 1; x >= 0; x--) {
height += $headers.eq(x).height();
}
}
height = height + "px";
$(el).css({
"position": "fixed",
"top": height
});
});
} else {
$headers.css({
position: "relative",
top: "0"
});
}
});
body {
height: 10000px;
}
div {
height: 100px;
background: green;
width: 100%;
}
.header {
height: 50px;
background: red;
}
.header:first-child {
height: 20px;
}
div.header:nth-child(5) {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="header">header 1</div>
<div>content 1</div>
<div class="header">header 2</div>
<div>content 2</div>
<div class="header">header 3</div>
<div>content 3</div>
</body>
</html>

With only css
Codepen-FollowMe Headers
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
height: 10rem;
}
.second {
height:50px;
background:blue;
height: 10rem;
}
.third {
height:50px;
background:green;
height: 10rem;
}
.stickyContainer {
.sticky {
position: sticky;
top: 0;
height: 2rem;
background: white;
}
}
<div class="first stickyContainer">
<div class="sticky"><h1>1</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="second stickyContainer">
<div class="sticky"><h1>2</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="third stickyContainer">
<div class="sticky"><h1>3</h1></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Align divs with p external to those divs

I have a div with some p's inside and want to put buttons to the side of some p's. Only some of the buttons show up, and I will control which ones through Javascript. Usually, I would put each p in a different wrapper div, which would also contains the corresponding button. BUT I want a background image around all p's, so I need to put all p's inside the same div and can't have separate div's for each p. I also don't want the background to appear around the buttons, which will be round. How do I align the buttons with the p's? Should I use jQuery to get the top properties of each p and pass them on to the buttons?
JS fiddle: http://jsfiddle.net/bw22yht1/
HTML:
<body>
<div class="content">
<div class="p-wrapper">
<!--there is a background image here-->
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
</body>
CSS:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
}
.p-wrapper
{
background-image:url('bg/old-paper-texture.jpg');
background-size:cover;
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
}
actual page: http://cin.ufpe.br/~rvcam/map/
EDIT: An image that shows what I need:

I took a look to your page, and you simply need to change your approach
<div class="content">
<ol class="p-wrapper">
<!--there is a background image here-->
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li>lorem ipsum lorem ipsum</li>
</ol>
</div>
You'll have what you need AND no need for that additional span, you'll have automatic numering
EDIT: See code below to fit your needs.
HTML mostly remains the same, just change <ol class="p-wrapper"> to <ol class="bible"> and add buttons
<div class="content">
<ol class="bible">
<!--there is a background image here-->
<li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
<li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>
</ol>
</div>
CSS as follows:
.content
{
width:1100px;
margin-top:60px;
margin-left: 200px;
background:url('bg/old-paper-texture.jpg') repeat-y;
background-size:700px; /* your current .bible width */
}
.bible
{
padding-top:15px;
padding-left:25px;
font-size:20pt;
margin:0px 0px 10px;
width:700px;
color: white;
/*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}
Then you'll need some adjustments to fit your taste, but this will work just as you want

You can absolutely position a <div> with white background containing the <button> aside the <p> in a common <div> as follows:
<div class="demo">
<p>lorem ipsum lorem ipsum</p>
<div class="right">
<button>Button</button>
</div>
</div>
<div>'s are transparent by default so having a common parent <div> won't hide the background of the wrapper.
You can then align the button using following:
CSS:
p {
margin-right:200px;
}
.demo {
position:relative;
}
.right {
position:absolute;
top:0;
bottom:0;
right:0;
width:200px;
background:white;
}
.demo button {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100px;
height:20px;
margin:auto;
}
Demo