Develop Reference

Smooth Scroll Javascript fails on one Mac (Chrome) but works on another Mac (Chrome)

We have a smooth scroll script that fails on some Mac machine (latest chrome).
We tweaked the script a little bit and it appears to be working on all Macs now.
But we have no idea why.
Can someone help?
Before (That fails to smooth scroll correctly for some Mac/Chrome test machine):
var topID = (ua("safari")) ? "body" : "html";
$(".SmoothScroll").unbind().click(function(){
var link = $(this).attr("href");
if(link.charAt(0)=="#" && link.charAt(1)!="") {
var offset = $(link).offset();
var tid = setTimeout(function() {
$(topID).stop().animate({scrollTop: offset.top}, 800, "easeInOutCubic", function() {
location.href = link;
});
}, 10);
return false;
}
});
After fix (works on all machine)
//var topID = (ua("safari")) ? "body" : "html";
var $root = $('html, body');
$(".SmoothScroll").unbind().click(function(){
var link = $(this).attr("href");
if(link.charAt(0)=="#" && link.charAt(1)!="") {
var offset = $(link).offset();
var tid = setTimeout(function() {
$root.stop().animate({scrollTop: offset.top}, 800, "easeInOutCubic", function() {
location.href = link;
});
}, 10);
return false;
}
});
Basically changing $(topID) to $('html, body') appears to working. But why? What is happening and what could be the reason that the previous script fails on some Mac+Chrome?

You probably do not have the same version of safari on both macs

Scroll to an Anchor with multiple anchor in uRL,

Got a question about the Anchor point.
I have a URL like domain.tld/sub/#point1/#point2 and I also using tabs which is triggered by the first #point1. So if someone opens the link the browser is detecting the first tab on that page and then it needs to find the second #point2 which is a anchor point like <div id="point2"></div>.
But now comes te question, since it is not possible to use multiple anchor scrolldowns when the pages is loaded, I have to find a other option. But offcourse didn't have that much experience. Who could help me out?
Regards Martijn

$(document).ready(function() {
goToUrl();
});
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("#");
var newUrlArrLength = newUrlArr.length;
if (newUrlArrLength>0) {
var last = parseInt(newUrlArrLength) -1;
var lastUrl = newUrlArr[last];
var lastItem = $("#"+lastUrl);
$('html, body').animate({
scrollTop: lastItem.offset().top
}, 1000);
}
}

Ok I changed the answer from Stavros a bit like underneath:
$(function() {
goToUrl();
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("?target=");
var defUrl = newUrlArr[1].slice(0, newUrlArr[1].indexOf("#"));
var newUrlArrLength = defUrl.length;
if (newUrlArrLength>0) {
var tag = $("#"+defUrl+"");
$(window).scrollTop(tag.offset().top);
}
}
});
This does the job for me! Thanks Stavros.

Binding the correct function

I'm having some trouble with this website I am building. I am modifying the existing pre-loader to have a button before continuing on to the home page. The issue is I can't point the button click to the correct function for a reason that i really can't figure out. Here is the appropriate code:
Revision: Just to clarify, I'm aiming to get this button click to replicate the function performed in the final code extract: this.parent.endLoader(); but am not having any success.
The click:
<script>
$(document).on('click', '.qLbtns', function(){
$(this).EndLoader();
});
</script>
The js bind:
$.fn.EndLoader = function(){
return this.each(function(){
this.endLoader();
});
};
The function i am trying to point to:
QueryLoader2.prototype.endLoader = function () {
this.destroyed = true;
this.onLoadComplete();
};
Which is effective within this function:
PreloadImage.prototype.completeLoading = function () {
this.parent.imageDone++;
var percentage = (this.parent.imageDone / this.parent.imageCounter) * 100;
this.parent.overlayLoader.updatePercentage(percentage);
if (this.parent.imageDone == this.parent.imageCounter || percentage >= 100) {
this.parent.endLoader();
}
};

Scroll To error and success message after submitting a form using ScrollTo jQuery Plugin

So far I have this working properly for the error message only. However, I would like this to work for success message as well. This should happen when the submit button is pressed in the contact form. Click contact at the top right of the page to scroll to it.
You can test it here.
Here is the jQuery I'm using for the error message:
$(document).ready(function() {
$(".error:first").attr("id","errors");
$("#errors").each(function (){
$("html,body").animate({scrollTop:$('#errors').offset().top-175}, 1000);
});
});
Any way to modify it to work with scrolling to #success and #errors with the same offset().top-175 ?
Thanks in advance!

You could do :
$(document).ready(function() {
var pos = null;
if($("#contact-form #errors.visible").length > 0)
pos = $('#errors').offset().top;
if($("#contact-form #success.visible").length > 0)
pos = $('#success').offset().top;
if(pos != null)
$("html,body").animate({scrollTop:pos-175}, 1000);
});
And fix the fact that your script "js/contact_script.js" must be declared after JQuery lib

this solution make the same job for Contact Form 7 (popular form plugin for WordPress). I found this page during the search by Google of my problem, so I added the solution below to help others who ended also at this page.
jQuery(function ($) {
$(document).ready(function ()
{
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
setTimeout(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(".wpcf7-response-output").offset().top - 100
}, 500);
}, 500);
//console.log("Submited");
}, false );
});
});

$(document).ready(function () {
var $elementToScrollTo;
var $firstError = $(".error:first");
if ($firstError.length > 0) {
$firstError.attr("id", "errors");
$elementToScrollTo = $firstError;
}
else {
$elementToScrollTo = $("#success");
}
$("html,body").animate({
scrollTop: $elementToScrollTo.offset().top - 175
}, 1000);
});

How to change page title of root page when loading ajax content?

I'm sure this is very simple, but I'm not getting it.
I'm using the following AJAX script to load content from a particular div of an external page into a div of the same name on my root page.
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
$el;
$(document).delegate(".dyn a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
});
});
$(".dyn a").removeClass("current");
$(".dyn a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Could someone please help me with changing the title of the root page for the title of the page I am loading?
I have tried using:
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
As it mentions in this post, which almost worked but stopped the ajax functioning correctly. I'm not sure, though whether I am placing this in the right place.
Thanks in advance!

Could you possibly want: window.top.document.title = newTitle; ?

I managed to achieve this by adding the following to the hashchange function:
String.prototype.toTitleCase = function(n) {
var s = this;
if (1 !== n) s = s.toLowerCase();
return s.replace(/\b[a-z]/g,function(f){return f.toUpperCase()});
}
newHash = window.location.hash.substring(1);
function changeTitle(title) {
document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
changeTitle("");
This takes the title from the page filenames, removes the hash and any underscores, then capitalizes the first letter of each word.
I'm certain there's a better, simpler way of doing this. What I've got will do for now.