Chrome Anchor Link Not Working Fix
One of my single page sites that had been live for months with no changes suddenly had the menu stop functioning in Chrome only. I can’t find an exact reason for the break, but I did find a cross-browser JavaScript solve that fixes the issue nicely. Just add the snippet to your site and the links should work automatically. Note that this fix requires jQuery but can be converted to VanillaJS.
/* Navigation Fix
-----------------------------------------------------*/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Someone reached out to me today for help as the fix broke their WordPress site. If you’re using WordPress, this version uses the compatibility version of jQuery they provide out of the box. Be sure to place it in a javascript file and not your functions.php. Rui was kind enough to confirm the fix also works for Drupal 7.
/* WordPress Navigation Fix
-----------------------------------------------------*/
jQuery(function ($) {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Reading JSON through JQuery from Cross Domain ASP.NET Web Service
Recently I had an issue with JQuery and accessing JSON from a cross domain ASP.NET Web Service. After much googling, I stumbled upon many articles that provided no fix that would solve the issue.
Every sample I found was some derivative of the following code:
$.ajax({
type: 'POST',
dataType: 'jsonp',
contentType: "application/json; charset=utf-8",
,
url: 'http://www.domain.com/webservice.asmx/function',
data: '{}',
success: function (response) {}
});
Nearly every post pointing out that the contentType argument was the issue but it still didn’t work when I included it. There were posts that said you can’t use GET and had to use POST. There might be valid security issues with not using GET but that’s another topic of discussion. in the case of an open web service where you’re providing raw data to be consumed, a GET should suffice just fine.
To support GET, you need to add the following attribute tags to your asmx.cs:
[sourcecode language=”csharp”][WebMethod(), ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)][/sourcecode]
This will cause ASP.NET to automatically serialize the returned data to JSON without requiring you to do it manually in code. There are no issues when making the call locally either. The second you go cross domain, the call fails.
A few articles mention JSONP (JSON with Padding) which is supposed to provide a workaround for the Same Origin Policy in JavaScript. Once I implemented the JSONP, the entire function
function getJSON() {
var url = 'http://www.domain.com/webservice.asmx/function';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function (json) {
alert(json);
},
error: function (e) {
alert(e.toString());
}
});
}
jQuery fancybox ‘*.support not defined’ or ‘b.support not defined’ Error
I was importing some code from static HTML pages into a client’s home grown CMS system this morning. When I reviewed the site in Firefox with Firebug running, I was seeing the error:
b.support not defined
The site uses Fancybox to display the window overlays within the site so I had to step through the code and to find out what broke during the migration. Turns out it was a stupid mistake on my part.
Make sure that you include a reference to the jquery library before you load fancybox.
<script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/Fancybox.js"></script>
SSL, jQuery, and CDN
I just got whacked by a minor bug with SSL and the Google CDN (totally my fault, not theirs). I stuck the reference to the CDN in my master page not realizing one of the pages would be served up as secured by the vendor due to compliance issues. It made it through all testing because none of the staging/dev environments were configured for SSL and I was not made aware of the fact that we’d be serving the page up through SSL. Internet Explorer 8 prompted users about the insecure content before rendering the page. In their infinite wisdom, Microsoft decided to implement a new workflow for insecure content where the content is ignored and the page renders immediately with the unsecured content ignored. Since jQuery was used on multiple parts of the form, the site essentially broke. Google Chrome and Firefox seem to recognize the CDN as a trusted source and render the page as expected.
To fix the site, I added a javascript check to set the appropriate prefix to the CDN call:
<script>// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
// ]]></script>