I want to change my website to one-page scrollable. I'm trying to achieve something like this. When a user "scrolls" the content changes. I thought I could do that with the one-page scroll plugin, but wasn't successful.
Further explanation:
I want menu and few other elements to be "fixed" (visual explanation).
I want to just change the content, not slide it up or down as the plugin does.
To sum up, I want to trigger animations (block revealing effect etc.) when a user scrolls. I was thinking about making a website one-page scrollable and when a user scrolls, just redirect it to a new folder with HTML/CSS/JS files (menu stays the same, content changes). Maybe that would be one possible solution to my problem?
Anyone willing to share the solution with me?
First things first. The site you're referencing isn't using any scroll events. Open the site in Chrome and open developer tools. Then set the view to mobile (or tablet, same thing). If you're in mobile mode in Chrome, your mouse acts like a finger would on a real Smartphone. By that logic your 'swiping' over the screen with your mouse should trigger the scroll event, but it doesn't. Therefor, it isn't actual scrolling that is triggering the fancy animations.
I believe Fleur Moreau used an 'mousewheel' event listener to trigger the animations.
var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
}, false);
or if you're using jquery
$('body').on('mousewheel',function(event){
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
});
Good luck with your project
Related
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
I'm using lazyload (JS library) and it works great! I have a long page with images where I use lazyload and, if I scroll down, it works perfectly.
The problem comes when I press a button that hide some divs on the top and the page goes up, with all the images. Lazyload doesn't load the images that rise the user view.
How could I solve this? I would need something to notify lazyload "please, load the images that are now in the user area view".
Thanks!
If you're using verlok's lazyload library, it is really simple: all you need is to inform the plugin that the layout of the page has changed (or the page content has been reflowed). This can be done by calling:
var myLazyLoad = new LazyLoad();
// After your content has changed...
myLazyLoad.update();
...which will manually update the instance. In your case, you will need to invoke myLazyLoad.update() when the button is pressed: how that is implemented is really up to you.
See the API documentation here: https://github.com/verlok/lazyload#dynamic-content
I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.
I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
I have ipad web app i am scrolling the particular div it is working fine but problem is that when user touces out side the div then also the page scrolls i want to stop the page scroll and make div only to scroll.
I used
document.ontouchmove=function(e) { e.preventDefault()};
but it stops scrolling on whole page also on div.
here is the index file link i am working on
http://codepad.org/7RE5vx74
Give the div a class (say, 'scrollThis'). Handle the touchmove event in such a way that, if the target of the touchmove event is not the div, to prevent the scroll. Else, let it take place.
$('body').on('touchmove', function (e) {
if (!$('.scrollThis').has($(e.target)).length) //check if the div isn't being scrolled
e.preventDefault();
});
I have used this in an iOS/android web app, so i can vouch that it works.