I need to run some functions on initial page load and also if the page is refreshed, if the url contains a particular hash.
As of now, I am able to get it working only on page refresh and not working when i first get to the page.
My code:
$(document).ready(function() {
if (document.location.href.indexOf('#story') > -1) {
alert('true');
}
});
You should be working with window.location.hash like this:
$(document).ready(function() {
if (window.location.hash === '#story') {
alert('true');
}
});
Related
I want to clear cache and hard reload browser but how to do that using JS/jQuery command when the document is ready?
My reference:
1st Link
2nd Link
3rd Link
I have tried below but not working except commented with this one but it continuously reload with never stop. Why this happen? How to make it just reload 1 time only.
$(document).ready(function(){
// window.location.reload(false);
// document.location.reload(true);
// window.location.reload(true);
// window.location.href = window.location.href;
// location.reload(true); //this one
});
Updated: Googling and tried this but not working.
sessionStorage.setItem("origin", window.location.href);
$(document).ready(function(){
if(window.location.href == sessionStorage.getItem("origin")){
window.location.reload();
sessionStorage.removeItem('origin');
}
});
You can set a localStorage for that, simply check whether your localStorage has a value or not. If not, reload first and then set a value. Have a look at the example below:
$(document).ready(function () {
var reload = localStorage.getItem('reload');
console.log(reload);
if (reload === null) {
location.reload(true);
localStorage.setItem('reload', "stop");
}
});
I have a navigation bar in my website with links to the important pages and I was wondering if there is a way using JS/PHP to disable the URL if it just goes to the same page the user is currently on to avoid too many redirections. For example (if the user is currently on the about page):
Home
About //this url has been disabled because the user is currently on the about page
Contact
It should work for you:
$("a").each(function() {
if (window.location.href == this.href)
this.onclick = function() { return false };
});
with JavaScript you can use this
function redirectToNotCurrentUrl(event, this){
if(window.location.href == $(this).attr('href')){
event.preventdefault();
}
}
then, call the function on click to a, for example
$("a").click(function(event){
redirectToNotCurrentUrl(event, this);
});
or in one step
$("a").click(function(event){
if(window.location.href == $(this).attr('href')){
event.preventdefault();
}
});
You can use
About
I am using the fullPage.js plugin to scroll page by page. The plugin is using hash urls to do so. On page refresh, the document is always loading on the last hash url it was on. How to make the document load at the top after every refresh? I tried adding the following code but it did not work out:
$(document).ready(function(){
$(document).scrollTop(0);
});
This is the link to the webpage - https://rimildeyjsr.github.io/St.Anthony-Website
jQuery :
$('#fullpage #section1').hide();
$(document).ready(function(){
$('#fullpage #section1').show();
$('#fullpage').fullpage({
anchors:['Page1','Page2','lastpage'],
afterLoad : function(anchorLink,index) {
if (index == 2 || anchorLink == 'Page2'){
$('.school-name').addClass('animated slideInUp').css('visibility','visible');
}
}
});
Link to github repository : https://github.com/rimildeyjsr/St.Anthony-Website
It looks like this on your page causes it to go back to the top.
window.location.hash = '#Page1';
So you could try doing that
$(window).on('load', function() {
window.location.hash = '#Page1';
});
which should happen any time you load the page, including refreshing.
Try This
if(location.href.split('#').length > 0){
location.href = location.href.split('#')[0]
}
Let me know if you face any issue
The proper way would be by using the fullPage.js function moveTo:
$(window).on('load', function() {
$.fn.fullpage.moveTo(1);
});
But the suggested solution by changing the location hash will also do it.
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
I want to disable the a link from refreshing the page (i.e. going to the href link). But I want to the url to be modified, as per the href value.
Currently, I am trying this
$('.advertPP').click(function() {
event.preventDefault();
location.href = link.attr("href");
});
HTML Link
Link
Since both are on the same page, so I don't want the page to be refreshed but i want the url to be modified as in the href value.
Your code is full of(logical) errors.
$('.advertPP').click(function(event) {
event.preventDefault();
location.href = this.href; //or $(this).attr("href"), is the same thing, jQuery is not needed in this case
});
Maybe you want your page to change contents without refreshing, so you need AJAX, here is an example:
$('.advertPP').click(function(event) {
event.preventDefault();
$.ajax({
url: this.href,
success: function(data) {
//if the loaded page is a full html page, replace the HTML with the data you requested
$("body").html(data); //make sure your data has only body contents, either you can replace the full HTML even if it is a bad practice $("html").html(data);
}
});
});
Check whether document.URL and $(this).attr('href') are same then set new url and return false.
If both are different them redirect to the page.
$('a').click(function() {
var currentUrl = document.URL
if ($(this).attr('href') == currentUrl) {
$(this).attr('href', 'http://www.google.com');
return false;
}
})
I noticed that you are not passing event object to your function. You should pass the object like this:
$('.advertPP').click(function(event) {
//^^^^^ pass the event object
event.preventDefault();
$(this).attr("href", "http://...");
});
I have a pagination div that contains links to the previous page <span id="previous"><a href="www.site.com/page/1" >Previous</a>, and to the next page. On the first page, there will not be any link to the previous page.
Now I have 2 image buttons with front and back arrows. If the user clicks on these buttons, jQuery will take the link from the pagination div as mentioned above and redirect the user to these links. However if the pagination link does not exist like on the first page, clicking the previous button will not do anything.
My Code:
//img has id = info_rightclick_left
$("#info_rightclick_left").click(function() {
if($("#pagination_previous")) {
window.location = $("#pagination_previous a").attr("href");
} else {
alert("NOO");
}
});
The problem now is that it seems like whether or not #pagination_previous exists, clicking the image still redirects the user. In this case, on page 1, the user gets redirected to undefined
How can I solve this?
Try this.
$("#info_rightclick_left").click(function() {
if($("#pagination_previous").length) {
window.location = $("#pagination_previous a").attr("href");
} else {
alert("NOO");
}
});
the answer in your question itself! just check for undefined like so:
$("#info_rightclick_left").click(function() {
if($("#pagination_previous a").attr("href") !== "undefined") {
window.location = $("#pagination_previous a").attr("href");
}
});
if($("#pagination_previous").length > 0) {
jQuery returns a list of captured elements, if it doesn't find any it will return an empty list, but still a list