Trigger an event using window.location.hash - javascript

I'm trying to trigger an event by clicking an external link from an email using the jquery/javascript window.location.hash. Unfortunately the app is built with angular and has a hash in the url initially https://www.electricstudio.ph/#/
I even tried adding the hash manually but the functionality doesn't seem to trigger. https://www.electricstudio.ph/#/
function slideSignUp() {
$('.header-form-container.signup').addClass('active');
}
$(document).ready(function() {
if (window.location.hash == '#sign-up') {
console.log('PING');
}
});

This usually works for me:
$(window).on('hashchange', function () {
hashUrl = window.location.hash;
if (hashUrl == "#sign-up") {
console.log('PING');
}
});

Related

how to scroll a page at specific position when page reloads in MVC ASP.NET

This is ASP.NET MVC project, I have placed a div at specific position in the page and added id dealProductAnchor. When this page loads or reloads normally it behaves as normal, but when a specific button is clicked I want that page after completing all postback progress when page loads done, it comes to the position of that div.
with java script I tried this, but did nothing any solution from server side or client side will be appreciable.
$(".button-1").click(function () {
if (localStorage && !localStorage.getItem('click')) {
localStorage.setItem('click', true);
}
});
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.location = window.location.href + "#dealProductAnchor";
//click = false;
}
});
If you want to Achieve this via BackEnd you Can set a value into ViewBag and check it on .cshtml page like below:
Controller Code :
public ActionResult TextAction() {
// Do your Logic here
ViewBag.testValue = "test";
return View();
}
JavaScript Code:
$(document).ready(function () {
#if (ViewBag.testValue == "test") {
<text>$('html,body').animate({
scrollTop: ($("#dealProductAnchor").offset().top) - 200
}, 'slow');</text>
}
});
hope it helps you :)
Can you try this??
$(".button-1").click(function () {
$('html, body').animate({
scrollTop: $("#dealProductAnchor").offset().top
}, 2000);
});
Instead of setting:
window.location = window.location.href + "#dealProductAnchor";
In your $(document).ready callback, set the scrolltop using Javascript:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
$('body').scrollTop($("#dealProductAnchor").offset().top)
localStorage.removeItem('click');
}
});
If that doesn't work, you may need to add a window.setTimeout() wrapper to allow the browser to finish rendering:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.setTimeout(function() {
$('body').scrollTop($("#dealProductAnchor").offset().top);
});
localStorage.removeItem('click');
}
});
I'd try changing the form action attribute to include the hash
$(".button-1").click(function () {
//Change $("form") to use the form ID if you have one
$("form").attr("action", $("form").attr("action") + "#dealProductAnchor" );
}
If the button is submitting the form you may need to change the button from submit to button then submit the form in the click handler.

How to trigger an event when hash location changes

I'm trying to trigger an event when the hash changes inside my url using the method onhashchange. I'm calling it, but it doesn't ever seem to get executed.
I've tried the following.
$(function () {
window.addEventListener("onhashchange", function () {
alert("Here");
});
window.onhashchange = function () {
alert("Changed");
}
)};
is there any reason why these functions aren't being called?
You should write 'hashchange' instead of 'onhashchange' in your first example.
This code works fine for me, at least in Chrome:
window.addEventListener('hashchange', function(e){
console.log('changed');
})
Here is short code-snippet:
https://jsfiddle.net/bm8jjwmq/
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
▲ For Support // ▼ implementation
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
Source: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

Set height of div after Jquery load()

I have a function that loads content into a div with Jquery. I'm trying to add to my function, the ability to set the height of the div to fit the content that I'm loading to it. I've tried several variations of the height() function and I've looked around at other people's code, but t I don't think I really understand how to incorporate that to my particular. Here's the function. It also has some code to update the URL. contentarea is the div where everything gets loaded and the div that needs resizing.
//Jquery loader
function getHash() {
return window.location.hash
}
$("a").on("click", function (e) {
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
}
else {
location.hash = hash;
}
});
e.preventDefault();
});'
Any help would be appreciated!
UPDATE: I updated the code with your help, but it's not really working. I figured I would add a div called content inside of contentarea, and use a callback function. What am I doing wrong?
'
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
}, function () {
$('#contentarea').height($('#content').height());
});
'
The documentation of the .load() provide a callback when the function is completed
JQuery doc
$('#contentarea').load(page, function(){},function(){})
The second function is called when the funciton load is completed.
You need to call callback function after content is loaded.
jQuery('#contentarea').load('externalpage.php', function() {
jQuery('#contentarea').height(jQuery('#content').height());
});

Toggle window.location in jQuery/javascript

What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});

HTML 5 History - window.pushState not working

I am trying to ajax load the center content and update the URL without changing the page. This all works fine except until I try to access the history. It seems window.pushState is not recording my URL's properly or popstate event is not working properly. I can successfully ajax load the previous page, but if I press back more than once, it stays on the same page. Any help would be greatly appreciated!
$(document).ready(function() {
$('area, .ajax_link').live('click', function(event) {
change_image(this, event);
});
window.addEventListener('popstate', function(event) {
change_image(window.location, event);
});
});
function change_image(e, event) {
if($(e).attr('target') != '_blank') {
event.preventDefault();
$.post(
base_url+'/kit/ajax_load',
{ url: this_url},
function(return_data) {
$('#content img').attr('src', return_data.image_src);
$('map').html(return_data.imagemap);
},
'json'
);
history.pushState(null, null, this_url);
update_links(this_url);
}
}
Problem Solved
#Oliver Nightingale: I needed to remove history.pushState from my change_image function. You can not call history.pushState during an onpopstate. Here is the entire working code. I shortened it above only to include the necessary parts in question. I will be adding some fallbacks next. This is tested and works in Chrome & Firefox. Tested and does not work in IE.
$(document).ready(function() {
$('area, .ajax_link').live('click', function(event) {
history.pushState(null, null, $(this).attr('href'));
change_image(this, event);
});
window.addEventListener('popstate', function(event) {
change_image(window.location, event);
});
});
function change_image(e, event) {
if(!e instanceof jQuery) {
var this_url = e;
}
else {
var this_url = $(e).attr('href');
}
if($(e).attr('target') != '_blank') {
event.preventDefault();
$.post(
base_url+'/kit/ajax_load',
{ url: this_url},
function(return_data) {
$('#content img').attr('src', return_data.image_src);
$('map').html(return_data.imagemap);
},
'json'
);
update_links(this_url);
}
}
Is the main body of change_image function happening onpopstate? If so it looks like you are pushing a new state everytime you pop a state, this could be causing some issues.
If you are using pushState for routing you could try using a library such as Davis to make things simpler.
How is $(e).attr('target') != '_blank' when e is window.location ?
As you are using the native HTML5 History API, you'll also want to have a check before history.pushState(null, null, this_url); to only call that if we are from a link.
Plus window.addEventListener('popstate', function(event) { the variable event here is actually the state's data.
See the following gists for working examples:
https://gist.github.com/balupton/1145804 - without history.js
https://github.com/browserstate/ajaxify - with history.js

Categories

Resources