I am creating a book project where if audio button is clicked the book will be read. As the book is being read I am highlighting the corresponding word. Now when there is a long text a horizontal scrollbar appears as the overflow-x: scroll; property is set.
Now, if the visible part of the screen is read i need to move the thumb of the scrollbar/slide to the next part of the content. Here comes the problem. Lets say the div width is 650px and the scrolling width is 1500px. If contents of 650px are read, I need to show the contents of next 650px. If I scrollLeft: 650px a part of the next 650px of content will be missing as I scrolled too much. So, I have to find the width of the thumb too. So the part I will require to scrollLeft will be 650 - thumb's width. How do I find thumb's width? Or is there any alternate way I can do this?
This is one approach to solve what you're asking.
Setup
On pageload, it will set the paragraph to one line, due to white-space: nowrap; in CSS.
Two variables will be assigned to elements in the DOM; button and content.
Slide to right
After that, when clicking the button (it can be any trigger), the container where everything is in will scrollLeft the scrollWidth of content (which is around 5000px in this case) divided by 3. In JavaScript:
document.getElementById('container').scrollLeft += (content.scrollWidth / 3);
Play around with your needs, but this is a basic example. You can read more about scrollLeft and scrollWidth at MDN.
const button = document.getElementById('moveButton');
const content = document.getElementById('text');
button.onclick = function() {
document.getElementById('container').scrollLeft += (content.scrollWidth / 3);
};
#container {
width: 600px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#text {
white-space: nowrap;
}
<div id="container">
<p id="text">Morbi eros ligula, hendrerit in imperdiet ac, porta ut ex. Suspendisse fringilla gravida turpis venenatis pharetra. Suspendisse potenti. Nunc facilisis dapibus tristique. Nunc id facilisis est, nec gravida diam. Duis feugiat quam ac velit consequat,
vel pharetra odio convallis. Donec tempor, mi id sollicitudin lacinia, nunc augue cursus lacus, at pretium nisi quam non risus. Cras faucibus enim tellus, quis sollicitudin elit commodo nec. Nam ornare auctor lectus quis porttitor. Vivamus facilisis
nisl id libero gravida, eget ornare erat mattis. Ut auctor commodo sollicitudin. Mauris lectus purus, commodo sit amet nunc non, lobortis feugiat metus. Fusce non aliquet velit. Etiam congue purus at quam pharetra porta. Etiam nec magna at elit ullamcorper
varius ut vitae metus.</p>
</div>
<button id="moveButton" type="button">Move to right</button>
Related
I am having issues with my jQuery match height... or maybe I just don't understand it fully? Any Help?
Image 1
Image 1: This is how it looks without height matched, which i am happy with just some simple shadowed boxes. But they do not match each others height :/
Image 2
Image 2: This is how it looks currently when I am trying to apply my jQuery of match height. The shadowed boxes are tiny at the top and it pushes the content underneath them...
HTML:
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam.
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p>
</div>
</div>
<div class="column small-12 large-4 medium-12">
<div class="home-card">
<h2>Education</h2>
<p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".fade").hide(0).delay(0).fadeIn(500)
$('div').each(function(){
var highestBox = 0;
$('.home-card', this).each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card', this).height(highestBox);
});
});
CSS:
.home-card {
box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
padding: 5px;
margin-top: 6px;
width: 97%;
float: none;
position: relative;
left: 0.5%;
}
.home-card:hover {
box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
padding: 10px;
}
Any Ideas?? Thanks!
ALSO: How would I get it so that height matches on large screens only, and is unaffected on medium and small screens?
Have you considered using a CSS only solution?
You could wrap your columns in a container, let's use a div with a class of container. Make this container a flexbox container and child divs within it will be matching heights.
.container {
display: flex;
}
I prefer using CSS for this type of problem because it's more of a presentational concern and this approach doesn't necessitate writing any messy javascript to manipulate the DOM. Additionally, unless you need to support old versions of IE, browser support for flexbox is pretty good. http://caniuse.com/#search=flexbox
I added a border to the child divs with a class of column simply to illustrate that they are indeed the same height.
https://jsfiddle.net/eulloa/tx5jbdgf/1/
This is a pretty good reference on flexbox, in case you're interested in reading more.
Why the first div looping?
Just the second loop should do what you want.
var highestBox = 0;
$('.home-card').each(function(){
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.home-card').height(highestBox);
Because if there is another div having no .home-card child... Like a footer...
highestBox sets to 0.
Then all .homecard are setted to zero.
What you actually see as height probably is margin/padding of inner elements... or something.
Using CSS and maybe minimal Javascript (without JQuery), what would be the easiest way to create an upside down diagonal sticky positioned element. An upside down sticky positioned element basically means that it would slide from a list into a horizontal sticky bar as the user scrolled down the page. I think I have figured out the diagonal bit:
element {
transform: rotateX(45deg);
}
But I am still clueless about the rest. Any any all help / constructive criticism / advice would be greatly appreciated.
EDIT #1:
To illustrate what I mean, I drew a picture sort of describing it (I'm not much an artist, sorry).
Based on my own test, as you can see below, sticky positioning appears to be made to be too smart, and not extensible enough for its own good by W3C. What I mean by this is that position: sticky appears to have an awareness of transform hacks (because it switches to position fixed), so you cannot just flip the entire pane it's stuck on to create an upside-down effect where when you scroll down, it goes up. Alas, if only there was a position: absolute version of the current position: fixed behavior of position: sticky However, I may be wrong (I hope I am).
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font-family: Source Serif Pro, serif;
line-height: 1.5;
font-size: 1.3rem;
}
outer {
position: relative;
transform: rotateX(180deg);
transform-origin: 0 100%;
transform-style: preseve-3d;
}
.sticky {
height: 100%;
width: 50%;
padding: 2.2rem;
float: right;
position: -webkit-sticky;
position: sticky;
top: 0px;
transform: rotateZ(180deg);
}
#sticky img {
width: 100%;
display: block;
margin-bottom: 1rem;
}
<p>Rank grass, waist high, grows upon the plain of Phutra—the gorgeous flowering grass of the inner world, each particular blade of which is tipped with a tiny, five-pointed blossom—brilliant little stars of varying colors that twinkle in the green foliage to add still another charm to the weird, yet lovely, landscape.</p>
<outer>
<div class="sticky">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/core.jpg" alt="Visualisation of the Earth's core, showing the planet cut in half with the core bulging from the center">
<p>The Earth's inner core is a solid ball of iron–nickel alloy with a radius of approximately 1220 kilometers, or about 70% that of the Moon. It is thought to have approximately the same temperature as the surface of the Sun: around 5400°C.
</div>
</outer>
<p>But then the only aspect which attracted me was the distant hills in which I hoped to find sanctuary, and so I hastened on, trampling the myriad beauties beneath my hurrying feet. Perry says that the force of gravity is less upon the surface of the inner world than upon that of the outer. He explained it all to me once, but I was never particularly brilliant in such matters and so most of it has escaped me. As I recall it the difference is due in some part to the counter-attraction of that portion of the earth's crust directly opposite the spot upon the face of Pellucidar at which one's calculations are being made. Be that as it may, it always seemed to me that I moved with greater speed and agility within Pellucidar than upon the outer surface—there was a certain airy lightness of step that was most pleasing, and a feeling of bodily detachment which I can only compare with that occasionally experienced in dreams.</p>
<p>And as I crossed Phutra's flower-bespangled plain that time I seemed almost to fly, though how much of the sensation was due to Perry's suggestion and how much to actuality I am sure I do not know. The more I thought of Perry the less pleasure I took in my new-found freedom. There could be no liberty for me within Pellucidar unless the old man shared it with me, and only the hope that I might find some way to encompass his release kept me from turning back to Phutra.</p>
<p>Just how I was to help Perry I could scarce imagine, but I hoped that some fortuitous circumstance might solve the problem for me. It was quite evident however that little less than a miracle could aid me, for what could I accomplish in this strange world, naked and unarmed? It was even doubtful that I could retrace my steps to Phutra should I once pass beyond view of the plain, and even were that possible, what aid could I bring to Perry no matter how far I wandered?</p>
<p>The case looked more and more hopeless the longer I viewed it, yet with a stubborn persistency I forged ahead toward the foothills. Behind me no sign of pursuit developed, before me I saw no living thing. It was as though I moved through a dead and forgotten world.Eget duis at tellus at urna. Purus sit amet volutpat consequat mauris. Ultrices in iaculis nunc sed augue. Duis convallis convallis tellus id interdum. A pellentesque sit amet porttitor eget. Sed felis eget velit aliquet sagittis id consectetur purus ut. Dictumst quisque sagittis purus sit amet volutpat. Sit amet nisl suscipit adipiscing bibendum est ultricies. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Amet porttitor eget dolor morbi. Facilisis volutpat est velit egestas dui. Sit amet aliquam id diam maecenas ultricies mi. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Sagittis purus sit amet volutpat consequat. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Est pellentesque elit ullamcorper dignissim. A cras semper auctor neque vitae tempus quam. Tortor posuere ac ut consequat semper viverra nam libero. Nullam eget felis eget nunc lobortis mattis. Purus gravida quis blandit turpis cursus in hac habitasse. Enim praesent elementum facilisis leo vel fringilla est. Mattis aliquam faucibus purus in massa tempor nec. Sit amet nulla facilisi morbi tempus iaculis urna. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Tempus urna et pharetra pharetra massa. Velit euismod in pellentesque massa placerat. Sed tempus urna et pharetra pharetra massa massa ultricies. Eget dolor morbi non arcu risus quis varius. Id velit ut tortor pretium viverra suspendisse potenti nullam. Varius vel pharetra vel turpis nunc eget lorem. In hac habitasse platea dictumst quisque sagittis purus sit. Egestas purus viverra accumsan in nisl nisi scelerisque. Quis blandit turpis cursus in hac habitasse. In cursus turpis massa tincidunt dui ut ornare lectus. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Mauris cursus mattis molestie a iaculis at erat. Tempus quam pellentesque nec nam aliquam sem et. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Sit amet venenatis urna cursus eget. Mattis pellentesque id nibh tortor id. Quis viverra nibh cras pulvinar mattis nunc. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Laoreet id donec ultrices tincidunt arcu non sodales neque.</p>
I have a div#content with property overflow:scroll; and I want to show the hidden text at the begining of my div#content when I click on a button.
I have tried in my onClick function handler:
var objDiv = document.getElementById("contenido");
objDiv.scrollTop = 540;
Where 540 is my div#content height.
I works perfectly when I have many lines of hidden text but if I have one line of hidden text this code will not place that last line on the top of my div.
Is there any way to get the hidden text to the top of my container?
As far as I'm aware, a div will only scroll as far as it needs to get the last line into view. If you only have one line of content, it can't scroll to 540px because there's nothing to scroll to. e.g. the following works fine:
<button onclick="document.getElementById('d1').scrollTop = 100">scroll</button>
<div id="d1" style="height: 100px; width: 200px; border: 1px solid black;
overflow:scroll;">Lorem ipsumin eros scelerisque commodo non id nisi. Ut
porta non eros eget malesuada. Curabitur adipiscing bibendum sapien quis
porta. Nam ac dui a quam aliquet volutpat. Curabitur ac mi quam. Fusce
consectetur, ipsum sed venenatis feugiat, ligula leo luctus neque, ac
rutrum sapien erat ac mi. Aliquam nulla leo, gravida sit amet velit nec,
commodo bibendum lacus. Quisque sapien risus, aliquet nec nisl et, sodales
ullamcorper risus. In porttitor justo id pellentesque sollicitudin.
Quisque sodales purus non felis iaculis tincidunt. Vestibulum urna metus,
mattis in</div>
because there is enough content for it to scroll. Reduce the content to a couple of words (or increase the scroll to say 2000) and it won't scroll all the way because there's no content to scroll that far.
If you want it to scroll further, put aother div inside that extends at least 540px beyond the content, or add "blank" content to extend the scrollable area.
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
is there a way of doing this with css or is javascript the way to go?
You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this
::-webkit-scrollbar {
display: none;
}
Read this excellent blogpost for further information.
You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).
Something like this:
#outer {
overflow:hidden;
width:200px;
height:400px;
border:1px solid #ccc;
}
#inner {
overflow:scroll;
width:217px;
height:417px;
}
Full example at http://jsfiddle.net/uB6Dg/1/.
Edit:
Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.
#Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.
Here is a function that will return the exact width of the scrollbar based on what the browser reports.
var getWidth = function () {
var scrollDiv = document.createElement('div'),
scrollbarWidth;
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
var width = getWidth();
var container = document.querySelector('.overflowing-container');
container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';
// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()
.container {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 500px;
}
.overflowing-container {
height: 100%;
overflow-y: auto;
width: 100%;
}
<div class="container">
<div class="overflowing-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.
Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
</div>
</div>
<div class="scrollbar-width"></div>
The above snippet shows this in action.
You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/
How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.
You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.
You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>
I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.
You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.
You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';
The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>