We Keep Coding

jQuery animations on back button

I have a page where multiple tabs (subpages) are accessed via jQuery show/hide functions. When one clicks on the logo all other tabs are hidden and the first one is shown.
I would like to attach the same show/hide flow as with $("#logo").click() to the back button. When someone would tap browser's back button the default action should be prevented and show/hide combination should be activated to display the first tab.
Does anyone has a solution?
window.onbeforeunload function does not work...
https://jsfiddle.net/hqkyxz3w/3/

This is usually done using URL's hash (that's everything after #) and window.history.pushState() method.
When the user clicks on a tab/logo:
Change location.hash to whatever you want.
Call window.history.pushState() to add state to browsers history. See https://developer.mozilla.org/en-US/docs/Web/API/History_API for more detailed explanation what parameters it requires.
Call your function that hides/shows appropriate tabs.
Then, when you press the browser's back button you want the tabs to change so you need to know when the URL's hash has changed.
See this answer how to listen to hash change events: On - window.location.hash - Change?
Check current hash and call the same function from bullet point 3 in the previous paragraph that hide/shows tabs.

Here is the half working version... I have used location.hash and history.pushState to change it on clicking the tab and then window.onpopstate to hide the page..
https://jsfiddle.net/hqkyxz3w/4/
The problem still exists because the onpopstate also fires when clicking the tab and not only when tapping back button.. Here is the example:
https://jsfiddle.net/hqkyxz3w/5/
$("#tab1").click(function(){
location.hash = 'something';
history.pushState({extraData: "something"}, '', 'new-hash');
$("#page1").show();
});
$("#logo").click(function(){
$("#page1").hide();
});
window.onpopstate = function() {
alert('How to exclude it on clicking page one?');
$("#page1").hide();
};

Force check dirtyforms.js

I'm trying to check for dirty form when swithing between tabs - and if the form is dirty, show the alert.
I'm using this plugin: https://github.com/snikch/jquery.dirtyforms
Ii works fine when trying to go to an external page (here i will get the warning), but when i switch between tabs(bootstrap), nothing happens. I have made a speciale class(".chkChange") to listen to if the form is dirty, but nothing happens when I click on a tab. The tabs looks like this:
<li class="setup-conditions"><a data-toggle="tab" class="chkChange" href="#setup-conditions">Procedure</a></li>
And i'm able to check if the form is dirt or not with this snippet, but i need help to trigger the alert build in dirtyforms:
$('#myTab li a').click(function () {
if ($('form').dirtyForms('isDirty')) {
//alert("Form is dirty");
}
});
And like i said, if I put the same class on another (external) link, it will prompt if anything has been changed - bot not on the tabs.

In this case, you can customize the event binding to attach the click handler to your link.
$(document).bind('bind.dirtyforms', function (ev, events) {
var originalBind = events.bind;
events.bind = function (e) {
$('#myTab li a').on('click', events.onAnchorClick);
originalBind(e);
};
});
Dirty Forms will then correctly
Check whether the form is dirty
If dirty, prevent the click event
Show the dialog
If the user decides to proceed, will refire the click event
Dirty Forms ignores your anchor tag by automatically because it has no HREF tag. This was a feature that was contributed by the community, that I am now reconsidering because apparently there is an argument to monitor anchor tags that don't have HREF sometimes.
Update
The default behavior has changed in 2.0.0-beta00005 to include links with no HREF tag by default. That should fix this so you don't need to attach the event. However, depending on what libraries you are using, you may need to add an ignoreSelector to Dirty Forms to stop watching them.
$('form').dirtyForms({ ignoreSelector: 'a.some-class:not([href])' });

Empty URL hash causes page to jump on js events

I have a gallery of photos with a next and previous button. If one of my javascript methods is broken for one reason or another when one of the buttons is clicked it will add a hash to the url i.e. www.google.com# . I know the hash can be given a div id to jump to that part of the page but when it's blank it jumps around my page a few times and I'm not sure what it's targeting. I thought of attempting to remove the hash from the url but then I'd have to ensure that on every action and that seems like bad practice. I would prefer if the hash just made no difference to the actions on the page.

Don't use href="#", it is improper.
Instead, use href="javascript:;" or a variant thereof (personally I use javascript:void(null);)
This explicitly states that the link does not go to another location, but is handled by JavaScript.

I guess Next And Prev button has <a href="#" ...</a> like markup. In this case you can add event listener to those links with jquery
$('#prev, #next').on({
'click': function(e) {
e.preventDefault();
}
})
and avoid changing location by browser. Or in pure javascript:
document.querySelectorAll('#prev, #next').addEventListener('click', function(e) {
e.preventDefault();
},false)
//Note: this code is not cross-browser

Don't use an anchor tag when you don't want to perform a navigation function. Use button

Is there a callback function for internal page links

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) { ... });

Append div to body when URL hash # changes

I'm using curtain.js and would like to keep a DIV (which holds navigation) visible at all times except for when the user is looking at the very first panel, i.e. at the top of the page.
Currently the DIV resides within panel two
I'm thinking perhaps of using the hash change as you scroll through the page to trigger an append to the body. Curtain.js creates an individual URL for each panel and the URL changes each time a panel is brought into view.
I can append the div to the body (below) but I need to work out when to do this but I am unsure how? Could anyone help me out?
$("body").append($('.nav-wrap'));

you can use onhashchange event:
The hashchange event fires when a window's hash changes
$(window).bind('hashchange', function() {
$("body").append($('.nav-wrap'));
})

You can use JQuery to bind the Event
$(window).bind('hashchange', function(){ ... });
And add some workarounds for when it doesn't have the onhashchange event.
jQuery - hashchange event

Ok well instead of using some hacky solution, after much digging around in the plugin's file, I just added:
$("body").append($('.nav-wrap'));
to the setHash function on line 491. Works a treat.