I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ?
My client doesn't want any scrollbars and the website works like panels that show when you scroll.
I tried Skrollr, but when I overflow : hidden, it doesn't work.
thanks
I think you always have to write some code to "parallax" the whole thing , but, I once used this library
jQuery mousewheel
https://github.com/brandonaaron/jquery-mousewheel
because I did not want scrollbar's in my website , it was really helpful. It allows you to detect scrolling in every div of your document , so you're not obliged to bind action to window.scroll.
The only issue if you're not using jQuery is that this library requires it.
Anyway I think that jQuery is always a good idea.
Related
Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.
I'm using https://github.com/peachananr/onepage-scroll to create a one pager and would like to trigger a function (a modal lightbox) when scrolling to a specific section.
I've tried a few different scripts (appear, waypoint) but so far have come up trumps. Not sure if it's got to do with the fact that onepage scroll isn't actually scrolling but moving the section into the viewpoint.
Any help would be highly appreciated!
You could make use of the callbacks the plugin provides.
Also, if you want to change for a more complete plugin such as fullPage.js, there you have the option scrollBar than when set to true will allow plugins such as waypoint or appear to work as expected.
The reason for it is detailed in fullPage.js FAQs:
Parallax, as well as many other plugins which depends on the
scrolling of the site, listens the scrollTop property of javascript.
fullPage.js doesn't actually scroll the site but it changes the top or
translate3d property of the site. Only when using the fullPage.js
option scrollBar:true or autoScrolling:false it will actually scroll
the site in a way it is accessible for the scrollTop property.
The same principle is applied to onepage-scroll but the difference is that fullPage.js provides a way to deal with it (scrollBar:true) and onepage-scroll doesn't.
I am using jquery slimscroll plugin and I have a problem because it is shown even when there is no need, and after I move mouse, or tap on the page it hides (this happen when I navigate to the page where I use it). Is there any work around for this - I tried changing the plugin code, but the problem is it using page dimensions to determine visibility.
I have had the same issue and it's hard to believe what I found as a solution. Ready? Just remove the border on the container where you have applied the slimscroll. That fixed it.
I haven't found it necessary to look into the code but I am sure there's an easy fix for this.
I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php
What I want to do is scroll down the window when I expand elements in my page.
The effect I am trying to achieve is like the Stack Overflow comments. If it expands beyond the page, it scrolls down to fit all the comments in the window.
What is the best way of doing this?
Edit: I am using JQuery.
This jQuery plugin worked well for me:
http://demos.flesler.com/jquery/scrollTo/
If you have the advantage of using Prototype, you can use $(element).scrollTo().
Otherwise, the general idea is to calculate the cumulative offset of the element, then set window.scrollTop (and window.scrollLeft) accordingly.
You can do it nicely with Scriptaculous (built on top of Prototype):
new Effect.ScrollTo('someDiv',{...some parameters...})
It gives you finer control than Prototype alone (delay before start, duration and callback events (such as afterFinish) that allow you to trigger other effects or whatever you choose. You can make it scroll smoothly and nicely, so the page doesn't suddenly jump.
If you know what the next element in the source is you could actually just jump to that element (location.href="#..."). This would use the browser's native 'scrolling' and not use any libraries.
You could use this code wich is okay but not perfect.
Based on the suggestion by blonkm
function scrollTo( Selector ){
$(Selector).before("<a name='scroll' id='scroll'></a>");
document.location.hash = 'scroll';
$('scroll').remove();
}
This should work.
Requires jQuery but you already say your using that.