I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
Related
I made a splash page using jQuery by appending a div on the page load. After a set amount of time, the body of the page fades in, though the appended div still displays itself at the end of the page. Tried to add .remove() at the end of the function to see if that would help, nothing though. I'd like to have it disappear as the rest of the page loads. Let me know if i'm going about this the wrong way.
https://swaybs.github.io/jdphotography/
$(document).ready(function() {
$('html').append('<h1 class="onLoad">loading...</h1>');
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').delay(4000).fadeIn(1000);
$('html').remove('.onload');
You can use the complete callback function of fadeIn() to remove (or fade out the loading message).
Note: Instead of hiding the body, and adding the h1 to the html, it's better to add a use a main element (div or main), you can hide/show.
$('html')
.append('<h1 class="onLoad">loading...</h1>');
$('body').css('display', 'none')
.delay(4000).fadeIn(1000, function() {
$('.onLoad').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm part of the body
You need to work on the CSS. The loading div should have an absolute positioning (and its container should have a relative one), otherwise it will always be pushed down by other elements as they appear.
I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.
I use jQuery for it, with this little code:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...and more code...
As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.
As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.
Any ideas how I can retime the whole thing?
I put the JS in the <head> tag and I made sure it is the first code to be fired.
If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.
Bit more about ready vs load:
jQuery - What are differences between $(document).ready and $(window).load?
I'm using the jScrollPane plug-in along with my SmartAutocomplete (https://github.com/laktek/jQuery-Smart-Auto-Complete) and i'm appending the Autocomplete results into my main containing div for jScrollPane so the user can scroll through them.
This works, but my problems is when a new set of data is appended to my jScrollPane the height (scroll area) does not update, it always stays the same height.. so items are either cut off or there is a large amount of white space at the bottom.
I've looked at the demo for their dynamic content example but can't get this to work: Demo here
Anyone have any ideas?
The property you are looking for is the autoreinitialize property. You need to call something like:
$('#idofyourcontainer').jScrollPane({ autoReinitialise: true });
when changes are being made to your container.
I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.
I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:
$('#mycarousel').jcarousel();
Here is the problem:
The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.
I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).
To get the jCarousel, I am using:
JQuery('#mycarousel').data('jcarousel')
and it is returned as null.
How can I get the jCarousel to draw correctly?
What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...
The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:
#mycarousel {
height: 100px; /* whatever height your div will have when shown */
width: 100px; /* whatever width your div will have when shown */
position: absolute:
left: -10000px;
}
When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.
A little more info here.
Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.
a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process...
get hold of the carousel instance.
var cInstance = null;
cInitCallback = function(c){
cInstance = c;
};
$('#mycarousel').jcarousel({
initCallback: cInitCallback,
});
reload the carousel on the show of the div
cInstance.reload();