I’m sorry I didn’t specify further. Pullo had helped me program this script in the past and I didn’t think an explanation was necessary, but you’re right. There’s a bit of code in the script that sets the height of the div contentarea. Well, when I wrap all of the code in one load function, including the scroll part, that bit of code that sets the height stops working properly. This is how it looks now:
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
var divHeight = $('#content').height();
$('#contentarea').outerHeight(divHeight);
$("html, body").animate({
scrollTop: $(this).height()
}, "slow");
});
Before, the first bit of code dealing with home.html and the bit of code that sets the height were in different functions, and this worked perfectly. I’m sure it’s an easy fix, but I can’t figure it out.
I came across a strange problem but I managed to fix it. If I clicked on a menu item, divheight was not calculated correctly, and in consequence contentarea was not being set correctly either. But when I clicked on the same menu item again, this time the height was calculated and set properly. The way I fixed was by setting a static height for each page. That way, when I first clicked on a link it would automatically load the right height at the first attempt.
It all seems to be working properly now, or at least for Google Chrome and Firefox. Internet explorer 9 does not seem to properly scroll down on load. Is this to be expected?
I figured it out. It seemed to have been a syntax error. There’s one more issue though, and I’m not sure if it’s related to this. When I link to another page from within a page (see the forms page), the link doesn’t seem to be doing anything. In the forms page, you can see a link to contact us, but it doesn’t really direct me to that page. I thought it worked before we changed the code.
I’ve kind of lost track of where we got to with this, but I’d guess that the reason it isn’t working, is something to do with you loading things via AJAX.
Is there any reason you are using AJAX over ordinary static pages?
AJAX has various disadvantages, for example as Mittineague says, it breaks back button functionality.
You will need to re-state the problem again (with examples and links to the relevant page) as I have lost track now as this doesn’t seem to be the same question you asked a few posts back about linking to another page?
Sorry about the confusion. I found an issue and I’m not sure if it’s related to the changes we made to the code previously.
Basically, I’m having issues with links that are located inside of the content area, and one link that is outside of it, on the language menu. For example, if you go to the forms page you will see there a link to the contact us page. When you click on it, the URL is changed but the contact us content is not loaded. This is probably related to the way my script loads content, but I’m not sure what I should change.
The other issue with a link happens when you go to the Spanish site. See here. From there, if you go the language bar and try to go back to the English site, nothing really happens; the url is not even changed. Does this have to do with the fact that my Spanish site is contained in a subfolder of the main site? Or does this have something to do with my Jquery code?
Sorry if I seem to be asking a lot of questions in one thread. Thank you for your help.
Just wanted to ask if there is any specific reason you are using AJAX over ordinary static pages?
Most of these problems would be avoided if you used static pages.
This works for me in Chrome. Did you fix this in the meantime?
When I click the link, the url changes and the new content is loaded as expected.
There is a jump to the position of the anchor on the new page though. Maybe you want to prevent this, e.g. by using:
event.preventDefault();
When you click the flag, what do you want to happen?
Should the user be directed to the main page of the site in the other language, or should the user be directed to the page they are viewing in the other language?
The problem wasn’t actually fixed, but the reason why it worked for you might provide a clue as to why the links aren’t working. When I started this thread, the site was located in the folder beta, but last night the website went live, which means I took everything out from beta and put it on the main folder. When you clicked on the contact us link in the forms page, it forwarded you to the contact us page of the beta site. So from the forms page on the main site (/) you clicked on a link that lead you to /beta/#contactus. Now that I deleted the beta folder, the link does not exist anymore. I went ahead and changed the code to reflect the new directory structure. What it needs to do now, is to just take you to the contact us page that’s on the same folder as forms. Is the anchor the problem? If so, how do I load without referring to the page without an anchor? Note that when you click on the link and open in a new tab, it loads correctly in the new tab (so the link must be working).
For the language selector, when you click on Spanish, you are forwarded to a subfolder called “es” where there there is a copy of the website in Spanish. This works perfectly. However, from the Spanish site, if you click on the US flag to get back to the English site (located one folder up in root), the link does not respond. So, the link for the main site is /, and the link for the Spanish site is /es/. From es, I’m trying to get back to /.
The language issue seems to have been fixed! I replaced $(‘a’).click with $(“.menuitem”).click. That way the URL’s such as the language site are not affected by the loading function. It acts like a regular URL.
I found a clue regarding the other issue with the links. When you click on the link in the forms page the URL changes in the address bar but the content is not loaded. Does this mean I need to modify the function that loads content only on page load?
