Develop Reference

Load back to homepage on refresh

I have a single page website. If click one of the navbar tabs, lets say 'contact us' the site will scroll down to the contact section. The problem is, if I refresh the site now it will automatically scroll down to the contact section each time. I want the site to scroll to the top of the page every time I refresh. The reason this is happening is because the address bar is changed to ...index.html#contact-area.
I tried the code below but the site gets caught in an infinite refresh loop.
<script>
window.location.replace("index.html");
</script>
I also tried the following but it doesn't work. It starts to scroll up then stops.
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>

One option is to attach an event listener to the anchor instead, and instead of changing the page hash, call scrollIntoView on the #contact-area:
anchor.addEventListener('e', (e) => {
e.preventDefault(); // don't change page hash (unless JS disabled...)
document.querySelector('#contact-area').scrollIntoView();
});

Click event triggered from parent page not working in IE

I am working with a filter on page to display different products. I am trying to make it so that when you click a button from an external page, it navigates to the product page and automatically clicks the "organics filter" checkbox and then displays the organic items. This code works in every browser except IE and EDGE. Any ideas what could be wrong? It appears to click the organics checkbox but it does not actually click the submit button for IE and EDGE.
**Update: It works if I put an alert after the window.load function. I think its a timing issue or something. Anyone have any suggestions?
//force organic filter if coming from organics article
$(window).load(function(){
var organicURL = document.referrer;
if (organicURL === "http://www.sampleurl.com") {
$('#organicFilter').trigger('click');
if ($('#organicFilter').is(':checked')) {
$('#submitFilter').trigger('click');
}
}
});

In order to trigger click event, you should use the jQuery .click() function. Also, have a look here : jQuery.trigger('click') not working
and here :
Trigger click event not working in IE10

I fixed it by adding this below:
$(window).load(function(){
var organicURL = document.referrer;
if (organicURL === "http://www.centowine.com/articles/2017/cento_organics.php") {
$('#organicFilter').trigger('click');
if ($('#organicFilter').is(':checked')) {
setTimeout(function(){ $('#submitFilter').click()}, 500);
}
}
});
Just needed to add a timeout it was loading too soon. Before the document loaded.

framework 7 on click not working while navigation

I have used framework built-in formToJSON() to get the form values. I have used click event to console the value.
$$("#query-submit").on("click", function () {
var queryForm = app.formToJSON("#query-form");
console.log(JSON.stringify(queryForm));
});
It works fine when page loads first time. But if I changed navigation to other page and return back to first page.
On debug, I found click event is not working when I went back to form page.
Also found this warning in console.
What is wrong here.
Note All pages were loaded via AJAX

Try this:
$$(document).on('click', '#query-submit', function(){
// your code
});

Popstate not working as expected(needs multiple clicks)

I am trying to learn History Web API, but already have problems at the first hurdle.
I am able to get history.pushState working, but have issues with popstate. It works fine when clicked for the first time after AJAX page load, but if I load that same page again, I need to click back button twice. If I load it one more time, I need to click back three times, and so on.
Here is my code:
$(function(){
var $main = $('#main');
$(window).on('popstate', function () {
loadPage(location.href);
});
$(document).on('click', 'a', function(){
var href = $(this).attr('href');
history.pushState({}, '', href);
loadPage(href);
return false;
})
loadPage = function(href){
$main.load(href);
}
})

You need the state Object. In your case you using a empty Object wich will not work proberly. Just test is with a Object like this : {"url":yourUrlVar}
Reference: History.pushState - MDN

jQuery slider redirect on 4th click

I'm using the jQuery Superslides plugin here: http://dougalpaterson.com.s69396.gridserver.com
And I want to redirect the user to the main website on the 4th click of the .next arrow (after the last slide), rather than looping through the slideshow again.
I've managed to add the address to the href using this js:
$('#slides').superslides({
animation: 'fade'
});
var clicked=0;
$('a.next').on('click', function (e) {
clicked++;
if (clicked >= 3) {
clicked = 0;
$("a.next").attr("href", "http://www.google.com/");
} else {
e.preventDefault();
}
});
But when I click on the arrow, it doesn't send the user to the URL. I think this may be because of the:
e.preventDefault();
In the original plugin.
How can I remove the preventDefault, so that I send the user to my desired URL?
Thanks in advance!!

Just as you suspect it's the preventDefault() method which prevents the default behaviour of the link (which would be to send the user to the href). So what you could do (if sending the user to some URL is all you want on the fourth click) is just change:
$("a.next").attr("href", "http://www.google.com/");
to:
window.location = "http://www.google.com/";
This would redirect the user instead of setting the href of the link.
This would work if you pressed the .next-link four times in a row. It would also work if you pushed this sequence though: .next->.prev->.next->.prev->.next->.prev->.next which might not be what you'd want (as it counts any clicks on the .next-link no matter where in the slideshow the user actually is).
So a better solution might be to actually check if the user is actually on the last slide when clicking the .next-link, and if so: redirect the user.