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.
Related
I have a code Codepen. The problem is parallax stop working when i'm adding two divs related to smooth scroll script. How to fix this problem? I need smooth scroll working with parallax effect. Thanks.
Remove two first divs "data-scroll" and "data-scroll-content" to see what's the problem.
<section id="00">
<div class="parallax-div parallax-div-00">
<div class="leading-statement statement-00">
<p data-aos="fade-up"> Parallax Scrolling </p>
</div>
Hello Stackoverflowers,
First of all thank you for reading this post. I am having a rough time trying to figure out how to make my Cycle 2 slideshow images shrink and move the images next to the other divs while resizing windows. The funny thing is that when the slide show has only one png the image moves next to all other divs while resizing, but when I add another image to the slide show all the images stays in its own position and doesn't move with the shrink.
here is my code for the Sector:
<div id="clientscont">
<div class="Title2">Clients</div>
<div id="container">
<div id="wrapper"> <div class="controller" id="prev2"></div><div class="controller" id="next2"></div></div>
<div id="slider2">
<img src="../image1.png" alt="" width="265" height="116" class="logoclient2"/>
<img src="../image2.png"/>
</div>
</div>
</div>
I tried everything in positioning and display modes and even tried making them separate divs with different attributes....but can't make it work. I really need your help, I thank you all in advance.
*For Cycle I am using jquery
Solved,
changing css attribute to list-Item display solved the issue, it is the only display mode that worked, to solve the bullet problem just changed the font color to the actual background color to hide the bullet. Now both images stayed centered while shrinking page. The truth is that i don't know the reason of this, if somebody could explain it would be perfect!
ShaloM! and Happy Coding!
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 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.