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>
Related
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>
I had some troubles with handling div's size with huge walls of texts for mobiles
So, I came with an idea "what If there's an formula that basing on screen's width/height can set proper height to that div?"
And resulted in something hardcode-ish like:
https://jsfiddle.net/qmde87kt/ (Resize view window a few times)
$(window).resize(function() {
var div = document.getElementById("test");
var width = div.offsetWidth;
var height = (div.innerHTML.length * 70) / width;
div.setAttribute("style", "height:" + height + "px");
});
#test {
font-size: 10px;
border: 2px solid red;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa iaculis, elementum dolor bibendum, maximus orci. Aliquam imperdiet metus mi. Vestibulum cursus elementum ex in tempus. Nulla accumsan, ex eget rhoncus mollis, lectus lacus sodales
neque, ut dictum nibh elit eget tellus. Vestibulum tincidunt quis mi quis egestas. Aenean ultricies purus nunc, id facilisis ante eleifend sed. Proin rutrum luctus turpis, sed pellentesque lorem consequat a. Quisque tortor leo, tempus in ante ac, mattis
faucibus risus. Praesent tristique, odio ac finibus tristique, neque sapien aliquet dolor, in finibus mauris urna sit amet mauris. In hac habitasse platea dictumst. Praesent nunc est, fringilla in condimentum et, gravida a ligula. Vivamus hendrerit
mauris a venenatis dictum. Sed vitae mi eget diam dapibus ultricies. Suspendisse varius turpis ante, nec cursus felis luctus et. Etiam ac ligula et tellus viverra tristique sed sodales ex. Nullam accumsan volutpat libero, vel laoreet sem lacinia sit
amet. Nam id mollis justo.
</div>
So, is there an way better (more universal) formula for something like this? or maybe there's an easier way to do that?
As per what Rory suggestion, I would recommend media queries with below-suggested breakpoints
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
Setting with JS is anyway a costly JOB!!!
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.
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/