Develop Reference

How to show/hide an element based on the presence of vertical scrollbars?

I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.

Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>

How do I get pageYoffset on a mobile browser

I need to keep track of the page offset on a website.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var Y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
Using the above code returns the vertical offset for me on all desktop browsers. However, I only get 0 on mobile browsers. How can I get the scroll location on mobile?

I guess this might help you:
Demo : Fiddle
JQuery
$(window).scroll(function (event) {
var scroll = $(window).scrollTop(); // This would give you offsetY while you scroll
$(".scrollY").text(scroll); // This is just to display for instance.
});
Open in Mobile
Update
JavaScript
window.addEventListener('scroll', function(){
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
document.getElementsByClassName("scrollY")[0].innerHTML = scrollTop;
}, true)
.scrollY
{
position:fixed;
top:0px;
left:0px;
padding:10px;
display:block;
width:auto;
height:auto;
background:red;
color:yellow;
}
.title h1
{
text-align:center;
}
div
{
display:block;
width:90%;
background:#2b2937;
color:#eee;
padding:10px;
margin:10px 0px;
border-radius:10px;
}
<div class="scrollY"> </div>
<div class="title">
<h1>Dummy HTML Text</h1>
</div>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
Demo : Fiddle

Fix and unfix a photo and content below cover photo on scroll

Here's what I'd like to execute:
Fixed navigation
Photo spanning full width of the page (may also be deeper than browser window which is okay because I want the user to scroll past the image.
So I suppose the photo should be fixed. The part that's hard to create is that once the window reaches the point of half photo, half story below, the story below should begin to cover the photo (until the photo is no longer visible) and the page begin to scroll up.
Here's my fiddle, and the code:
<body>
<header> <span class="white">Home</span></header>
<!--A FIXED HEADER ALWAYS IN SIGHT-->
<div id="content">
<section class="intro">
<!--CONTAINER FOR PHOTO AND HEADLINE-->
<h1 class="atop">Headline</h1>
<img class="scrollimg" src="http://ww2.hdnux.com/photos/23/74/63/5229797/3/1200x706.jpg"/>
</section>
<!--SECTION SHOULD BE FIXED BUT ONCE SCROLLED 75% OF PHOTO, STORY CONTAINER BELOW SHOULD BEGIN TO COVER PHOTO-->
<section class="story">
<!--CONTAINER FOR STORY WITH WHITE BACKGROUND BEGINS TO COVER PHOTO UPON SCROLLING DOWN-->
<div id="row">
<!--DUMMY COPY-->
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
</div>
</section>
</div>
<div id="footer">FOOTER</div>
with what I thought was some helpful code from another fiddle.
The fiddle seems to perform a similar trick in that the footer pushes content up upon reaching a set position upon scrolling.

How about
http://jsfiddle.net/anaran/gYxK4/
No JS at all.
See also https://developer.mozilla.org/en-US/docs/Web/CSS/position
position: fixed;
leaves not space for such an element.
Therefor elements coming after it need to specify relative positioning and specify the relative position.
I added a white background which you might like or not.
.story {
position: relative;
background: white;
padding: 4%;
top: 850px;
left: 30px;
}

Get the invisible text with JavaScript

Suppose we have the following code:
<div id="test" style="width:200px; height: 200px; overflow: hidden;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Consectetur adipiscing elit. Vivamus lorem ipsum dolor sit amet,
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Sed rhoncus facilisis commodo. Sed mattis lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus ipsum diam, cursus ornare eleifend
quis, posuere id sapien. Vestibulum et mattis augue. Nulla facilisi.
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
</div>
The result would be a clipped text.
Is there some way to get invisible text as a substring?
I tried
$("#test :hidden").text();
and
$('#test').children(":hidden").text()
without success.
I'm trying to show pages of text without scrolling. I have a large amount of text (html formatted) and a fixed size div (the text page). I would like to paginate the text on it, just showing one page of text each time.

There is a good answer on this topic already, it provides the javascript you'd need to do this. Like the respondent there though, I would say find another way to do this if you can.

You could use a mono-spaced font like Lucida Console or Courier New and split the string based on a static number of characters that fit in the content area.

How can I select the first word of every line of a block of text?

I'm trying to select each first word, to wrap it in a specific span.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
sagittis nunc non nisi venenatis
auctor. Aliquam consectetur pretium
sapien, eget congue purus egestas nec.
Maecenas sed purus ut turpis varius
dictum. Praesent a nunc ipsum, id
mattis odio. Donec rhoncus posuere
bibendum. Fusce nulla elit, laoreet
non posuere.
If this is the text, the script should select Lorem, Aliquam, varius and nulla.

You can do this, by using JavaScript to wrap every word in the paragraph in its own span, and then walking through the spans finding out what their actual position on the page is, and then applying your style changes to the spans whose Y position is greater than the preceding span. (Best do it beginning-to-end, though, as earlier ones may well affect the wrapping of latter ones.) But it's going to be a lot of work for the browser, and you'll have to repeat it each time the window is resized, so the effect will have to be worth the cost.
Something like this (used jQuery as you've listed the jquery tag on your question):
jQuery(function($) {
var lasty;
var $target = $('#target');
$target.html(
"<span>" +
$target.text().split(/\s/).join("</span> <span>") +
"</span>");
lasty = -1;
$target.find('span').each(function() {
var $this = $(this),
top = $this.position().top;
if (top > lasty) {
$this.css("fontWeight", "bold");
lasty = top;
}
});
});
<div id='target' style='width: 20em'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Naturally that's making a huge set of assumptions (that all whitespace should be replaced with a single space, that there's no markup in the text, probably others). But you get the idea.
Here's a version that handles window resize, 50ms after the last resize event occurs (so we're not doing it interim) and with Gaby's suggestion (below) that we unbold at the start of the resize:
jQuery(function($) {
var resizeTriggerHandle = 0;
// Do it on load
boldFirstWord('#target');
// Do it 100ms after the end of a resize operation,
// because it's *expensive*
$(window).resize(function() {
if (resizeTriggerHandle != 0) {
clearTimeout(resizeTriggerHandle);
}
unboldFirstWord('#target');
resizeTriggerHandle = setTimeout(function() {
resizeTriggerHandle = 0;
boldFirstWord('#target');
}, 50);
});
function boldFirstWord(selector) {
var lasty;
// Break into spans if not already done;
// if already done, remove any previous bold
var $target = $(selector);
if (!$target.data('spanned')) {
$target.html(
"<span>" +
$target.text().split(/\s/).join("</span> <span>") +
"</span>");
$target.data('spanned', true);
}
else {
unboldFirstWord($target);
}
// Apply bold to first span of each new line
lasty = -1;
$target.find('span').each(function() {
var $this = $(this),
top = $this.position().top;
if (top > lasty) {
$this.css("fontWeight", "bold");
lasty = top;
}
});
$target.data('bolded', true);
}
function unboldFirstWord(selector) {
var $target = selector.jquery ? selector : $(selector);
if ($target.data('spanned') && $target.data('bolded')) {
$target.find('span').css("fontWeight", "normal");
$target.data('bolded', false);
}
}
});
<div id='target'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Try this:
$(function() {
$('p').each(function() {
var text_splited = $(this).text().split(" ");
$(this).html("<strong>"+text_splited.shift()+"</strong> "+text_splited.join(" "));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor.</p>
<p>Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum.</p>
<p>Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</p>

To bold every first word of a <p> tag, including whitespace after the initial <p>, use some regular expressions:
$('p').each(function(){
var me = $(this);
me.html( me.text().replace(/(^\w+|\s+\w+)/,'<strong>$1</strong>') );
});