Always display niceScroll rail - javascript

I'm using niceScroll jQuery plugin to replace common browser scrollbars in overflowing <div>'s. The plugin is working good, but I can't get it to work and display the scroll rail always (even if the content is not exceeding <div> bounds). My final configuration is:
$(document).ready(function () {
$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});
};
I've tried to fire $(".div-wrapper").getNiceScroll().show() but it doesn't seem to work either.
Any help would be appreciated, thanks

First of all, you have a missing parenthesis at the end - could that be your problem?
Setting autohidemode to false only means that it doesn't disappear when the user stops scrolling and then appear again while scrolling. Unfortunately it doesn't mean it's visible if the content doesn't overflow.
As a workaround you may try making the element with id=ascrail2000 explicitly visible after your call to .niceScroll() with something like this:
$(document).ready(function () {
$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});
$('#ascrail2000').show();
});
SEE THE MISSING PAREN IN THE LAST LINE
You may need to make its children elements visible as well:
$('#ascrail2000 *').show();
(Make sure that the element's id is ascrail2000 in your case.)
UPDATE: as veritas has pointed out, using a more general selector div[id^='ascrail'] instead of #ascrail2000 makes it work for more than one nicescroll on one page, so the above can be done with JavaScript:
$("div[id^='ascrail']").show();
or in CSS:
div[id^='ascrail'] { display: block; }
or if the above doesn't work:
div[id^='ascrail'] { display: block !important; }
This is not the most elegant solution but I'm afraid this is currently the only way to solve this problem because the nicescroll plugin doesn't have an option to select that behaviour. Fortunately nicescroll is open source and available on GitHub so one could easily fork it and add such an option or post a feature request on GitHub.

$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});

I am assuming that if the content does not overflow the bounding box, niceScroll does not do anything, which might be your problem. Keep in mind that niceScroll isn't >$overflow: scroll;... Without digging through the plugin itself I can't be certain but I would assume it has a check built-in to test whether the content needs scrolling, and if it doesn't, then the function silently exits.

I see this answer with a google search, even if it's old, this is my working solution if someone see this seeking for an answer :
$('#ascrail2000.nicescroll-rails').show();
$('#ascrail2000.nicescroll-rails div').height('300px').show();
I need to set an arbitrary height to the "bar" div, because by default it's height:0px, even if you display it, you can't see anything.
I suppose we can do better an calculate a good height with the windows dimensions, but I don't need to :)

Right now 07/02/2018 and working Version jquery.nicescroll v3.7.6 Source Link
After adding autohidemode: false it's working fine for me.
$("#example").niceScroll({
autohidemode: false // it make nicescroll scroll bar visible all time
});

Related

Properly animate multiple elements with Jquery

Probably I didn't choose the best title for my question, sorry for that.
I'm pretty new with jQuery, hence with animations.
I'm just experimenting with It, but now I have a problem.
The script works like I want, but It seems a bit "buggy", I bet my code isn't optimized, at all... Plus I may be using a wrong way to achieve what I want.
One button is triggering the script (Its not supposed to be like that at the end, but momentarily I'm using this button to trigger the script), it works like a "toggle" and every time I click on "Show", a bunch of HTML is shown and two animations run:
$(".achievement_container").hide(300).show(); //shows the whole container
$(".glow").fadeIn(100).fadeOut(800); // First "brightening" effect
This one shows the whole "frame", while another animation runs for a lighting effect:
$(".ach_hover").css("left", "0px").css("opacity", "1").animate({
left: "252px",
opacity: "0"
}, 1100);
You can see a "working" example here:
http://jsfiddle.net/Frondor/6EA6W/
My problem appear after I click the "Show" button many times, the $(".ach_hover") animation start to fail and it doesn't appear, at all...
I'm not satisfied with the way I wrote this last animation, at least I think there might be a better and "standard" way to achieve this.
So I would really appreciate any suggestion from jQuery experts to "optimize" my script, and avoid any buggy behavior on it.
Thanks in advance
Try using jQuery .stop()
Stop the currently-running animation on the matched elements.
$(".ach_hover")
.css({
"left": "0px",
"opacity": "1"
})
.stop()
.animate({
left: "252px",
opacity: "0"
}, 1100);
Fiddle

jQuery Waypoint Plugin troubles

I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!

jQuery Waypoints Context not Working in Safari or Chrome

I have a web application that sizes the html and body elements at 100% width and height and puts overflow: scroll on body to create full screen slide elements. I'm using jQuery Waypoints for sticky navigation and to determine which slide is currently visible.
Since the body element is technically the one scrolling, I set context: body. This works as expected in Firefox, but the waypoints won't fire in Chrome or Safari.
I can get the waypoints to fire by manually calling $.waypoints('refresh'); after scrolling to a point where they should have fired, but calling this after every scroll event seems like a very cumbersome solution.
$('body').on('scroll', function(){$.waypoints('refresh');}) —it works, but sure isn't pretty.
I'm assuming this has something to do with how each browser interprets the DOM, but is there a known reason why Chrome and Safari wouldn't play nicely with waypoints in scrollable elements?
I'm looking for one of two things, either what I've done backwards in my use of waypoints, or what the underlying issue is so I can fix it and make waypoints work properly for everyone.
For the record (and before anyone asks), I've done my research and this isn't an issue with fixed elements.
Edit: finally got a CodePen built for this. Take a look.
Remove overflow:hidden from html. Unfortunately looks like this is required - I hope it doesn't break your layout.
Next, you'll need #nav.stuck { position: fixed; } instead of absolute for a sticky header.
Use this js:
$('#nav').waypoint(function(direction) {
if (direction == 'down') {
$(this).addClass('stuck');
} if (direction == 'up') {
$(this).removeClass('stuck');
};
});
That works for me - see http://codepen.io/anon/pen/GgsdH
How about this?
$(window).load(function() {
$('#myheader').waypoint('sticky');
});
… instead of this:
$(document).ready(function(){
$('#myheader').waypoint('sticky');
});
This is of course stupid if you have a huge amount of images to load, but this solution saved my day.
Try min-height: 100% on body and html instead of height, if appropriate for your layout.
Delete overflows and heights in html and body, also context is not needed. Worked for me.

Tiny_mce - can't set width

Let me start by saying I am well aware this is a duplicate question - TinyMCE width and height disobedient!
The trouble is I have tried all the css fixe suggested to no avail and I am not using an init (where the docs i found tell you to set your width and height) - I dont know why, I did this along time ago.
Here is the mce code which is being launched in an aftershow event of a fancybox:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/assets/js/common/tiny_mce/tiny_mce.js',
// General options
theme: "advanced",
plugins: "autolink,lists,pagebreak,table,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advlist",
// Theme options
theme_advanced_buttons1: "undo,redo,|,cut,copy,paste,|,bold,italic,underline,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,formatselect,fontsizeselect",
theme_advanced_buttons2: "tablecontrols,|,charmap,iespell,|,cite,abbr,acronym,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false
});
Please someone, tell me how to make this god damn thing 500px wide. I tried this(does nothing):
.mceEditor > table {
width:500px !important;
}
Tried putting this in general options in my code:
width:"500",
Tried setting columns of the textarea to 2
Tried setting the css width of the following elements with !important:
id=desc_mce_parent, id="desc_mce_tbl"
I have set resizing to false
Nothing changes no matter what I do - why?
Ok... I feel a bit of an idiot saying this but in my case it was because my toolbars were too big. I solved this by spreading my buttons over three toolbars - you can set the width using css but it wont go smaller than your toolbars and the they will not wrap around (seems like that might be a good feature).

Order of properties matter with jQuery animate?

After just now spending too much time debugging why my jQuery animate() calls stopped working correctly, I realized my problem was the properties in the animate() call have to be in a specific order. So the following will not work properly:
$('div.example').animate({left: 50, top: 100, opacity: 1});
What will happen is the div.example will fade in (if it wasn't already) and will just appear at position left:50, top:100, it will not animate. To get this to work as expected, you have to reorder:
$('div.example').animate({opacity: 1, left: 50, top: 100});
I tested this in FF4 and Chrome. This surprised me as I wasn't even aware that Javascript guaranteed order of properties in objects and jQuery makes no mention of this requirement in their docs. So my question is basically, am I doing something wrong? Is this expected? Is there documentation on what the proper order is? Will this work properly in all browsers?
I'm using jQuery UI as well. I know that enhances the standard animate method to allow for animating colors and such. Is that potentially the issue?
This a jQuery bug: cannot animate position and opacity at same time but is fixed in 1.6.1
In the meantime, you can fix it by adding "px" on the end:
$('div.example').animate({top: '100px', left: '50px', opacity: 1});
Does your properties left and top are declared earlier in css? Some browsers (webkit if I remember correctly) have problems animating properties that weren't declared. Try setting left and top to 0 or some other values and see if it works.

Categories

Resources