I have a smooth scroll effect:
jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing");
It works fine, but when multiple items are pressed, sometimes it flashes the content of the page for one second...You can try on this link: http://teothemes.com/wp/vptest/, click on Services and after that click 10x times on Contact...while you're locked on the contact section, try clicking on Services and you'll see how the Services area shows up for one second, that's not good and I wnat to get rid of that.
Ideally, I'd like the effects to somehow delay in execution..I now have a condition
if(parseInt(scrollTarget) !== parseInt(jQuery(window).scrollTop())) {
to prevent scrolling to the same area, but if you'll click 5 times on Contact when you're in the Services, ideally it should go to Contact first time and the 2nd time it should fetch the correct scrolltop and scrolltarget after the first execution and not the one when it was clicked.
Any idea is highly appreciated.
The jQuery preventDefault() method does the trick!
Related
I have the following scenario, a user is scrolled some wheres down a search page. They click on an item and after they are done viewing the item they hit the back button. The back button brings the user back to their exact location within the search page as it's suppose to. After a second, the page auto scrolls to the top of the search results. You can see this behavior in action cardaddy.com/forsale
I've spent a couple hours trying to figure this out with no success. I'm not aware of any js causing this issue either. Please feel free to take a look. Any suggestions would be great since this is destroying my ux
I though maybe the forward from my root domain to www.domain.com with godaddy.com may of been the cause, so i changed that behavior around to use amazons name server eliminating the forwarding. I thought I repaired the issue as it seem repaired on the desktop, but it still seems to happen on mobile.
As far as I know, this behaviour depends on your browser.
The back button brings you to the last site you visited and loads this site new. So the effect to stay at the possition is caused by the browser engine.
1 way of doing it would be to save the location of the page and restore to that location when back button is clicked
on click : var position = $(window).scrollTop();
On back button : $(window).scrollTop(position);
I have a form within a loop on our site and when someone submits the form then a query string is added to the url something like "?updated=111". Then my JQuery script checks the url for the number and scrolls to that div once the form is submitted and page reloads.
This script is working fine in Firefox but doesn't work as well in Chrome or Safari. For example, say on my page I have 25 posts, and each posts has its form. Lets say I submit the form on post number 25 (the last one) then when the page reloads on chrome the window scrolls but not all the way to #div25 sometimes it works ( for like 1 -5) other times it will only scroll to half the window.
Is there a fail safe way to make sure the window will scroll to that div after the page refreshes? Again, the below does work in Firefox but only partially works in Chrome and Safari.
<script>
jQuery(document).ready(function($) {
if(window.location.href.indexOf("?updated=") > -1) {
var postID = window.location.href.match(/\d+$/);
$('html, body').animate({
scrollTop: $('#post-'+postID).offset().top
}, 'fast');
}
});
</script>
Also side note, not sure if this helps but once the form is submitted if I hit refresh on the page then it scrolls to the correct location.. Not sure if I should add a delay or speed up the animation to make this work cross browser like it does in FF?
Try putting the ".animate()" method inside a timeout of 2seconds. Does the problem go away? If it does, then its timing issue. Most likely thats because the browser is not ready to scroll to the location that you ask it to scroll to.
In this situation, you'd rather go with a timeout of 0 than a 2 sec. A 0 timeout just schedules the scroll for next cycle whenever the browser is free.
HTH!
I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;
Hi i have a slider which will slide from side if i scroll down certain amount in browser and it will slide back if i scroll up. Also i have a close function it will close the slide once i click.
I used (window).scroll to measure the scroll amount based on this i have given a condition to make the slide happen.
Now the problem is if I am at the bottom of the window when i click "close" it closes the slide but after that when I scroll up the slide again coming this is because the scroll amount condition which i given to slide.
So i went to store a cookie when a click function triggered. By checking the cookie value i let the slide function to happen.
Cookies are created once i click the close then also the same problem happening but when i reload page the slide function is not happening.
Is this Because of (window).scroll function priority or Something?
Do anybody know on what problem am I struggling?
I'm not totally sure if I do understand you correctly.
Why don't you just set the overflow css property of the element to hidden when the trigger calls?
Isn't that your problem?
Suppose I have a link, which would fade out the entire page when link is clicked. The reason I fade out the page is because a next page is about to load, but it is not loaded yet. I can use pointer-events: none which will disable any mouse events until the next page is loaded.
Suppose it was done with the keyboard, I could use the following to prevent double-enter, or to cleanly disable all elements within, for example tab-enter would be disabled this way as well.
parent.onkeydown = fals
parent.onkeyup = fals
parent.onkeypress = fals
function fals() {return false}
This works well for short loads, but if it takes a long time to load, the user may notice the following difficulties.
Cannot tab away from the a tag.
Cannot use several of the keyboard shortcuts which would control the browser.
Able to tab into the disabled area from the address bar.
Is there a modern and slick way to prevent these 3 problems, other than setting an onfocus=blur for all of the child elements? I do not care about IE today.
I think the commonly accepted way of dealing with things like what you're talking about is to use Modal's, which is to say when they click that link, you pop up a box that says 'Processing' or something like that, and you create a fullscreen div with a z-index above everything else so the user can't click / interact with anything else on the screen until you're done doing whatever it is you are doing.
See http://twitter.github.com/bootstrap/javascript.html#modals for an example of what i'm talking about.