I'm using this script
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000);
});
});
in order to smooth scroll down when my nav elements are clicked... the problem is that if a link is clicked before page finish loading, when it finishes the page will go back to top again.
I thought event.preventDefault(); was to avoid that. Help please.
you should use the document.onLoad event instead.
document.ready is invoked after all of the HTML is brought down into the document and ready for parsing.
onLoad on the other hand is invoked after all images / resources are loaded into the page as well.
If you wait for this event, then you should have desired results. although they won't have any click functionality until then.
Furthermore, preventDefault does not avoid this. All that does is disable the default action of the element you apply it to. so it prevent's whatever the default action would be for your 'scroll' elements
Related
To explain the scenario, When I manually/in person click "apply discount" button on the checkout page it applies the discount and stays on the checkout page. But if I click "apply discount" button with jquery on the checkout page ,it applies the discount but it redirects me to the cart page if clicked with jquery. How can I click the button on checkout page with jquery and not get redirected to another page?
jquery I am using to click button :
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click()
}
})
First, you are missing a ; (semicolon) after the click() method. This may throw an error. I am not entirely sure if you are looking for something to simulate a click (a user does not actually click on the button) or use an event listener to wait for a click on the button, I'll go with the first from how your code looks.
As far as I know, jQuery's .click() method is a shortcut for the method .on('click', handler) - which is essentially an event listener that is waiting for a physical click on an element.
According to jQuery's .click() documentation here, "The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released."
With all of that being said, here is some code that may work using a jQuery method preventDefault(). This will prevent the default action of the clicking the element from occurring. However, the click() method will not simulate a click. Good Luck!
jQuery(document).ready(function() {
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click(function(e) {
e.preventDefault();
//do some cool stuff
});
}
});
Edit: My original answer will wait until all DOM content has loaded. However,
to wait until all Window content has loaded (included images, etc.), you can try putting your code in the following:
jQuery(window).on('load', function() {
//do stuff after the window has fully loaded
});
In order to wait until all ajax processes have stopped, you can try adding code to the following:
jQuery(document).ajaxStop(function() {
/*do stuff after all ajax has stopped. This will be called even if
an ajax event occurs after the page loaded */
});
I'm trying to get the event for a mousewheel scroll right before it happens so that I can stop the scroll and do some stuff and then give back control to the user.
Currently I have the following code to cancel out the scroll. However the scroll happens once and then control is taken away from the user. I'd like to make sure the scroll does not happen, do some other stuff instead, and then give control back afterwards.
$('body').on({ 'mousewheel': function(e) {
e.preventDefault();
e.stopPropagation();
}});
How can I do this?
You can use the onwheel event.
window.onwheel = function(){
alert('your magic here');
return false;
}
Are you able to debug and see if the event is being fired in the first scroll?
Is your code inside a $(document).ready( function?
If you are using jquery-mousewheel plug-in, you will be able to call this only if you are attaching it after the plug-in is ready and declared before your script (might be on your page header).
When linking to a page using a named anchor e.g. page.html#heading the browser will load the page, then jump down to the anchor. Is there a browser event that fires when this has completed?
To explain my reasons behind it: I want to use the event to trigger an animation in the browser.
Many thanks.
Changing the hash triggers the hashchange event.
However, I don't think it fires when loading a url where the link already has the hash set. But you can check the hash (location.hash) on page load if you want a certain script to run depending on the hash.
In Safari 7.0.3 on the Mac this works...
HTML has:
<a id="jumper" href="#aa">Jump</a>
JS:
<script>
var j = document.getElementById("jumper");
j.addEventListener("click", registerAnchorJump);
function registerAnchorJump(e) {
window.addEventListener("scroll", unregisterAnchorJump);
}
function unregisterAnchorJump(e) {
// trigger your animation...
console.log(window.scrollY);
window.removeEventListener("scroll",unregisterAnchorJump);
}
</script>
Fancy footwork to prevent constant firing of scroll event as user scrolls window normally.
I have a webpage where onResize calls a method which reloads the page by submiting a form which comes back to the same page.
This webpage is very big and something in it resizes the page or something like that causing the onResize event o be called again.
What would be the solution to stopping this infinite loop?
I can't find what is causing the onResize event to be called and even if I did then I don't want to change anything that is working already.
Is there anything I can add to my on resize method to stop it from going into an inifite loop
$(window).resize(function(){
refreshMainView(); // submits form which redirects back to the same page
});
Unbind it at first time you invoked it:
$(window).resize(function(){
refreshMainView(); // submits form which redirects back to the same page
// now unbind it
$(window).unbind('resize');
});
(Edit: Striking out in response to user521180's comment.)Put your listener inside a document.ready function:
$(function () {
$(window).resize(function(){
refreshMainView(); // submits form which redirects back to the same page
});
});
It sounds like your page is listening for the resize event while it is still adding DOM elements (and thus still calculating the size of the page).
If you already have a document.ready function, tTry unbinding the resize event in an onbeforeunload function and then rebinding it after the page refreshes:
$.unload(function () {
$(window).unbind('resize');
});
On - window.location.hash - Change?
The above question talks about hash change while this question talks about callback whenever internal link is clicked
I have many links in a page that points to another location in the same page using # links. Whenever, I click one such link, the page scrolls to that location. But I need to adjust the scroll manually after the automatic scroll happens. So would like to know if there is any callback function for such events?
Also the event should fire if the # tag was present in the initial page load (not only when it is clicked with a link) and when the same link is clicked again (hashchange event won't fire in this case)
You can register one by calling this function on the element:
addEventListener('click', function(){/*update your stuff here/*});
in jQuery, it's even easier
$('a').on('click', function(){/*update your stuff here/*}); will update after every link click.
There is no specifica callback that I know of but you could bind a function to the window.onscroll (https://developer.mozilla.org/en-US/docs/DOM/window.onscroll) event. That will detect when the window has been scrolled by the links being clicked and will let you make your adjustments. Then only problem is that it will also fire off when a user scrolls the page normally.
Other than that you would add a class to all your # links that will allow you to detect when one has been clicked. In jQuery:
$("a.HASH-LINK-CLASS").on("click", function (event) { ... });