How can I hide a scrollbar smoothly? - javascript

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/

You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}

This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Related

Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer
Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.scroll {
overflow: hidden;}
Add this class to your css
<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api
You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

Toggle CSS Transform Button For All Elements with the * Selector

Been trying to solve this all day, but just can't work it out. It's probably something really simple, but nothing seems to work.
I am using Divi scroll animations. However, on some devices they are a bit too much, so I made a button that switched them off, by disabling transform globally. However, I also want to be able to turn it back on again. I tried toggle, but it didn't work.
Because I'm not targeting a style, I can't use class toggles etc. It probably needs to be a style toggle, but on the *. So I was wonder if there is a way of doing this; or even better, how can this can be done without Jquery?
This is the site I'm trying to get it to work on.
Any solutions, are really appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#turnOffNow").click(function(){
$("*").css("transform", "none");
});
});
</script>
<div id="turnOffNow" style="color:#fff;">
Turn Off Animations
</div>
I think this will solve your problem.
Add a class to your CSS:
.notransform * {
transform: none;
}
Append this class to your html tag in your page:
$("#turnOffNow").click(function(){
$("html").toggleClass("notransform");
});
You can also try transform: none !important to force that.
for be able to turn it on, assuming you has some inline transforms which was gone, better you give them css class, which will give them transform:none !important then remove it for turn on.
example css:
body.no-transform * {transform: none !important}
js (jQuery)
function removeTransform(){$('body').addClass("no-transform")}
function backTransform(){$('body').removeClass("no-transform")}
js (Vanilla)
function removeTransform(){document.body.classList.add("no-transform")}
function backTransform(){document.body.classList.remove("no-transform")}

jquery ui resizable weird white patch in the middle of the div

i'm playing around with jquery ui resizable with the default example from jquery ui's site and i noticed a white patch in the middle of my div:
the white patch is only visible if i put a background color to my div such as:
background-color: cyan;
jsfiddle:
http://jsfiddle.net/9aQUz/
anyone knows what's going on?
thanks in advance
In your sample, you've given the div the "ui-widget-content" class.
In jqueryui, this class has the following background defination.
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
In the base theme, this is just a white image.
You shouldn't need to assign jquery classes to elements. Whenever you call the function, it'll happen automatically.
This comes from jQuery's theme. It inserts a 40x100 image (http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) as the background for the class .ui-widget-content. It's done automatically when you use the resizable widget.
If it really bugs you you can override it by adding background-image: none; to your rule.
jsFiddle example
It works perfectly if you have the css there instead of pulling it in:
Fiddle

How to set the focus on a hidden textbox field using JavaScript?

How can I set the focus on a hidden textbox element?
I tried this:
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id); returns null in this case.
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?
If you really need to do this, make the box transparent, not hidden:
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypress events.
I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.
You can add some js if you need a workaround and cannot change the opacity attr.
/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
/* in case your field is fading, cheat a little (check css transition duration) */
setTimeout ( function timeoutFunction () {
/* show the cursor */
jQuery('#your-search-input').focus();
}, 100);
});
Using Apsillers answer, my setup for this same situation involved:
a parent div with position:relative;
a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.

Font anti-aliasing issues with jQuery.fadeIn in IE8?

I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.
As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.
This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.
Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.
it needs to be called after the fade effect is completed (e.g. 500ms after etc.)
I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/
Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html
I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.

Categories