Check URL when page is loading - javascript

I need to change website pages with hashtag when site is loading.
For example when in browser address bar type:
http://example.com/#about
about page open in browser.
I use this:
$(window).bind('hashchange', function(e){
var anchor = document.location.hash;
nextPage(anchor);
});
for change page when user press on menu button and it works well, but I need this check happen in first of load website too.

If you want to trigger an event immediately, use trigger():
$('selector').on('event', function(e) { ... }).trigger('event');
So you would do:
$(window).bind('hashchange', function(e){
var anchor = document.location.hash;
nextPage(anchor);
}).trigger('hashchange');

Related

History replaceState problem in AJAXified Wordpress Theme

I made an Ajax enabled Wordpress theme with the main feature that internal links are not reloading the whole page but only the new content. So when URL's hash is changed, the new content is put in the #primary section and the map in the background stays untouched:
var $mainContent = $("#primary")
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
});
});
Everything works fine, also history back and forward navigation. You can check out the basic funcionality here.
Now I want nice URLs hiding the hashes, so for example a link like http://geraldkogler.com/places/#/places/place/stwst/ gets changed to http://geraldkogler.com/places/place/stwst/. I do this adding this code to line 47 of ajax.js:
var oPageInfo = {
title: "places",
url: window.location.origin+window.location.hash.substring(1)
}
window.history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
Now the URL gets rewritten - but history doesn't work any more.
So I think I should listen to popstate events, I try to do the following and so back works once, but not more:
window.onpopstate = function(event) {
if (event.state) {
var host = "http://"+location.hostname;
location.hash = event.state.url.substring(host.length);
}
};
This (wrong) behaviour with the mentioned code is shown on this page. Any idea what I'm doing wrong in ajax.js?

Link to open tab from menu help. jQuery Tabslet

I'm wanting to link to a certain tab (Portfolio Tab) on a page from the main menu of a website, so when clicked it goes to that page with that portfolio tab open.
So far I've come up with this (using jQuery Tabslet) which works when not on the same page, but doesn't work if the user happens to be on the same page as the tabs, and so does nothing.
The link I use in the main menu is /about/#tab-3 which is doing the job of going to the about page with the portfolio tab open.
I thought I may need to trigger a page refresh when on the same page? And perhaps remove the #tab-3 from the url too.
Not being a jQuery expert, I unfortunately just don't know.
Here is the code so far
Thanks in advance.
jQuery(document).ready(function($){
$('.tabs').tabslet({
active :1,
animation : true,
container: '.tabs-container'
});
var hash = $.trim( window.location.hash );
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
});
Advise: Always mention a reference to the plugin you use. I assume here you talk about this one.
This plugin acts on tab click only.
So when using a window hash in a link from another page like you do, you have to "simulate" a click on the tab.
So you will use an attribute selector to find the anchor having a href corresponding to the hash...
And click it.
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
$("a[href='"+location.hash+"']").click(); // Add this!
}
};

How to trigger iframe load event more than once when changing iframe source

I have an iframe that links to another internal web application.
There's a side panel with a list of links that changes the src of the iframe. Sometimes if there's a lot of data, the iframe site takes a while to load. I want to put a spinner icon when a link is clicked and hide it when the frame is loaded.
I change the src using $('#myiframe').attr('src', urlVar) in a click function for the links. I can show the spinner on click.
The problem is, how do I hide it? How do I find out that the iframe has finished loading?
I tried using $('#myiframe').load(function() { }) but that only works on the initial load (i.e. for the first link I click), not for subsequent loads (if I click on another link).
This javascript works for me :
function loadNewUrl (url){
if(url === undefined) url = 'http://example.com?v=' + Math.random();
var ifr = document.getElementById('myiframe');
ifr.setAttribute('src',url);
ifr.onload = function() {
alert('loaded');
};
}

Trigger event on browser back and force refresh or reload the page with new url

This is my url:
DOMAIN-NAME/#city=13&pc=13&car=18.26+2.97
Now when user clicks browser back, the query string parameter gets removed one by one, like:
First browser back:
DOMAIN-NAME/#city=13&pc=13&car=18.26
Second browser back:
DOMAIN-NAME/#city=13&pc=13
Third browser back:
DOMAIN-NAME/#city=13
The problem is that on browser back the page is not reloading.
I read about hashchange, pushstate but i am unable to figure correct way to reload page on browser back?
I tried this:
var hash;
$(window).on('hashchange', function () {
if (hash != window.location.hash) {
alert('hash change called');
//window.location.reload(true);
}
hash = window.location.hash;
});
This is repeatedly reloading my page when i am refreshing it.
What you need is 'windows.location' it allows you to check the current URL and assign a new one or force to reload in this case. JavaScript Window Location
you could do something like:
function reload(){
window.location.assign(window.location.href);
}
when you detect navigation... could be with the HTML onbeforeunload Event Attribute or something like that...
<body onbeforeunload="return reload()">

javascript's unload and beforeunload alternative

I need to monitor when the user moves away from a page (to a different site not the same site) or closes the window/tab. I can achieve that with $(window).bind('unload', function() {}); but onload is a catch-all event: it also catches page refresh and navigating to a different page on the same website. How can I detect those two events (page refresh and navigating to another page in the same website) using javascript/jQuery please?
I think that isn't possible, I don't know such an event.
A possible solution is to compare the current url with the destination url but that's not possible because of security and privacy reasons see:
How can i get the destination url in javascript onbeforeunload event?
On each page,
var leaving = true;
$(function() {
$('a[rel!=ext]').click(function () { leaving = false; });
$('form').submit(function () { leaving = false; });
});
$(function() { window.onbeforeunload = unloadPage; });
function unloadPage() {
if(leaving) {
// Put your logic here
}
}
Then just make sure that all links to external sites have a rel="ext" attribute.

Categories