I have been successfully using jScrollPane in a number of applications where it has been working perfectly. Running the plugin creates two additional divs around the content with classes of jspContainer and jspPane and a third div for the scrollbar.
However when I try to use it with a flyPanels plugin (https://github.com/SubZane/flyPanels), the only div the 'scroll-pane' class can be added to, to give any result is the div directly above the nav.
When the code is created on the page, I found that while the nav inside this div was surrounded by the appropriate jspContainer and jspPane divs, it was missing the separate div for the scrollbar itself.
I'm wondering whether it might be as a result of being placed around a nav, or a problem with the height and width of the div the class is on. Either way I have searched as many stackoverflow questions and the github forum for issues as much as I can bear, but all questions are either irrelevant or lacking in an answer.
I've included the main part of the code, but the header is missing so I assure you that I have included jQuery 1.9.1 and the correct javascript and css files (as the same ones worked on a separate project).
<div class="flypanels-container preload">
<div class="offcanvas flypanels-left">
<div class="panelcontent scroll-pane" data-panel="treemenu">
<nav class="flypanels-treemenu" role="navigation">
...
<!-- Unordered list containing several sublists -->
...
</nav>
</div>
</div>
<div class="flypanels-main">
<div class="flypanels-content">
<!-- Some additional code -->
</div>
</div>
</div>
Has anyone got any experience of using these two plugins together and if so does anyone have any clue as to how this can be resolved?
I haven't used flypanels but I did integrate jscrollpane many times. If my memory is correct, jscrollpane needs to be visible on screen (not hidden) when it's initialized. If not, it will have a height of 0 thus "not working".
Try this
Don't hide the sublist items
Initialize jscrollpane
Hide sublist items.
Related
I'm working on this question/answers type of chatbox and found many questions/solutions related to having auto scroll to the bottom of div. As I understand, this line of code here would do just that.
var scrollingChat = document.querySelector('#chat')
scrollingChat.scrollTop = scrollingChat.scrollHeight
However, since there can be multiple answers to the questions, they can be longer than what viewable screen can display. With the code above, it's automatically scrolling down to the bottom of the chatbox. What I want is to have scrolling to stay at the current position and it's up to user to scroll down to see additional answers displayed, especially since the first answer should be the most relevant.
Is it possible to do so? I tried to comment those lines of codes but it doesn't do anything. Any help or recommendation on how I can do that is greatly appreciated.
UPDATED - maybe I can better explain here. In my chatbox, I have these dynamic div elements:
<div>... something... </div>
<div class="from-user" id="questionDiv_1"</div>
<div class="from-system" id="answerDiv_1_0"</div>
<div class="from-system" id="answerDiv_1_1"</div>
<div class="from-system" id="answerDiv_1_2"</div>
</div>
So in this case, as soon as the user type in the question, there will be multiple answers coming from the backend system. Can I have the scroll to stay at the questionDiv_1 element and not automatically scroll down to the bottom of my chat div? How do I do that?
I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.
I have a large reveal.js presentation that I'd like to add some chapter control feature too. Naturally this sort of control needs to exist outside of the slides themselves and appear opposite of the normal arrow controls.
When adding this feature, I create a DIV with an inside of it. It is placed as the first element inside of the <div class="reveal"> tag.
For the sake of demo purposes:
<aside id="linkage">Expand</aside>
Through CSS I've gotten this to display exactly where I want it. All is well.
However it seems that Reveal does something to disable this link. It is not clickable at all, although an inspection of the DOM at runtime appears to suggest that the tag has been left intact.
By what means is Reveal disabling this link, and what should I do to circumvent this problem?
The cause of this is the .state-background DIV that appears to overlay the entire window in conjunction with position:absolute;
I have resolved this issue by enforcing a z-index on the .state-background div to have it render below my set of controls.
I have started working on a simple web application using Twitter Bootstrap for my UI and i have a div with overflow-y property. I wanted to get rid of the default scrollbar and use some cool custom scrollbar using jquery like this example. I have tried the previous example with my nested div which is in the following format.
<div class="row fill">
<div id="users" class="span3 offset1"> <!-- left navigation Pane -->
<div id="contentWrapper" class="span7 fill">
<div>Scrollable content here </div>
But when i try implementing the custom scrollbar, the default one shows up and when i inspected it with the developer tools, the custom component lays somewhere at the top of the page and not visible. Is there any way we could start using custom scrollbars with the fixed grid layout of the bootstrap? Do we have any good resources on this? I would really appreciate your help with this.
I guess i figured out where the problem might be. When i followed the jquery example mentioned above, the content div that was supposed to be scrollable was modified while execution and the following div structure added.
<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox" id="mCSB_1">
<div class="mCSB_container mCS_no_scrollbar">
<div class="mCSB_scrollTools"> ....... </div>
</div>
</div></div>
When there is data already present in the content div, the modified piece of code has it inside mCSB_container mCS_no_scrollbar and it works fine as seen here. But when the content div is dynamically appended with the user input, then during execution, the text is being appended to the 'content' instead of 'mCSB_container mCS_no_scrollba' div. Is there any way we could make it work? Thanks for your help.
First, I'd urge caution in using custom scrollbars - while the idea sounds alluring, I've found that it is one of those things that seems like it should be easy to do, but is in fact quite a bit trickier to get right. Keep in mind that people are all used to how their browser's native scrolling works. Additionally, many users may change their system's default scrolling settings, which may cause your solution to scroll at a different speed than they expect. If you stray too far from what the user expects in the functionality or features (clicking to scroll, mousewheel, etc), your custom solution is going to stick out like a sore thumb, and will seem far less usable than native scrollbars.
With that in mind, I think you'd be best off using an existing solution rather than trying to roll your own. I can recommend jScrollPane - I actually just used it for a project, and it was very easy to add - took me all of 10 minutes, and it is very easy to add your own styling. Pay particular attention to the "downloads" section though, it relies on a couple other scripts to get things like mousewheel scrolling working correctly.
I've had a look for the answer but with no luck so far.
At the moment the scrollbar and arrows are postioned inside the same
div as the scrollable content - which in most cases makes sense. I
want to know if there is a way to place the scrollbar and arrows
outside of this div in a different location in the html page? Is there
a way to specify the place they should go?
Example:
<div id="content">
Lorem ipsum....
</div>
Gets turned into:
<div id="content">
<div class="scrollpane">
Lorem ipsum....
</div>
<div class="scroll-bar">
### scroll bar and arrows here ###
</div>
</div>
But I want to get this:
<div id="content">
<div class="scrollpane">
Lorem ipsum....
</div>
</div>
[other html other html and content other html]
<div id="scrollbar-here">
### scroll bar and arrows here ###
</div>
Any help much appreciated, or a link to the answer that I've missed
would be equally helpful. I'm using jquery1.4.3 and jScrollPane -
v2.0.0beta6
I just answered this question where you had posed it to the google group:
http://groups.google.com/group/jscrollpane/browse_thread/thread/ff2e10b8d784fed6
Here is the answer for other searchers:
Unfortunately that isn't currently supported. There are a few of ways you could attempt to achieve it:
Use absolute positioning on the jspVerticalBar and/or jspHorizontalBar and try to move them so that they appear elsewhere in your document.
If you are only interested in the arrows then you could easily hook some different buttons up to the API so that they called scrollBy to do the scrolling [see http://jscrollpane.kelvinluck.com/scroll_to.html ]. Additionally you can hook up to the jsp-scroll-x/y events to mark your homemade arrows as disabled when relevant [see http://jscrollpane.kelvinluck.com/events.html ]. And you would use CSS to hide the "real" scroll bar and arrows.
You could try using javascript to move the elements (e.g. something like $('#myDiv').append($('.jspVerticalBar')); ) - no guarantees this won't have some strange side effects though!
Hope it gives you some ideas. If you want to add this as a feature request on the github issues list then I'll try to look at it in the future (it'll won't be soon though - I'm really busy with client work at the moment).
For some reason I can't comment on vitch's answer but I just wanted to document for anyone coming to this page that option 3 and some simple CSS adjustments (the main one being switching position:absolute to position:relative on .jspContainer) worked for me.