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.
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?
From a quick search here and in Google I realised that it is not possible to put fullpage.js in a container, hence the name fullpage.js
Unfortunately I have to find a solution for my project. I want normal scroll on my entire website, but a specific div should have the fullpage.js "slideshow" effect, that when you scroll a bit, the whole section is moving to the other direction. I tried doing it myself with a lot of javascript calculations (scroll direction, binding and unbinding scroll events etc), but Its out of the scope of this project budget.
So my question is: is there a way to hack it around with fullpage.js or maybe with another plugin? I found scrollify, but it is basically the same.
Here is an HTML Code to show exactly what I mean
<body>
<h1>Some website</h1>
<h2>I want to scroll it normal</h2>
<div id="fullpage">
<!-- Only here should the slides scroll with the desired effect -->
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
Any kind of help would be appreciated. Here is a video showing exactly what am looking for.
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.
I am working on an Android app that makes use of HTML in a WebView.
I have a series of <div>s in my HTML. Something like this:
<body>
<div id='topdiv'></div>
<div id='contentdiv'>
<p>A bunch of content in here!<p>
<p>There is more content here than can fit on 1 screen.<p>
</div>
<div id='bottomdiv'></div>
</body>
Is there a way to make it so that bottomdiv or topdiv is rendered, but not scrollable? In other words, is there a way to prevent the user from scrolling down past contentdiv even though bottomdiv exists below it and is not invisible, but contentdiv is always fully scrollable?
I am open to any plain JavaScript, CSS, or HTML implementation. It would be nice if that was a feature you could turn on and off, but not necessary.
Since I am working exclusively on a mobile device, it does not help me to disable the scrollbar or capture mousescroll events and the like.
If I understand well what you want, the following can solve your problem. Use the overflow property on the body tag, like this:
body
{
overflow:hidden;
}
Another way to solve it would be to set your bottomdiv to hidden, either by using
visibility:hidden;
if you want it to take no space or using
display:hidden;
if you want it not to take any space.
Than, just change it with javascript according to what you want to do.
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.