Develop Reference

jQuery .load() Messing with Unicode Characters

I have set up a simple AJAX page loading script on my site and so far everything is working except for the Unicode Characters in the <title> get screwed up when loading the new content.
My jQuery setup looks like so:
jQuery(document).ready(function ($) {
"use strict";
var main = $("main");
menuLinks.click(function () {
var href = $(this).attr("href"),
ajaxLoad = function (html) {
document.title = html.match(/<title>(.*?)<\/title>/)[1].trim();
main.fadeIn('slow');
};
history.pushState(null, null, href);
main.fadeOut('slow', function () {
main.load(href + ' main>*', ajaxLoad);
});
return false;
});
});
My <title> have dashes in them and they end up as – when the page titles are loaded. I'm under the impression that this has to do something with jQuery and HTML using different encoding but am not sure how to solve the problem.

jQuery(document).ready(function ($) {
"use strict";
var main = $("main");
menuLinks.click(function () {
var href = $(this).attr("href"),
ajaxLoad = function (html) {
document.title = html.match(/<title>(.*?)<\/title>/)[1].text().trim();
main.fadeIn('slow');
};
history.pushState(null, null, href);
main.fadeOut('slow', function () {
main.load(href + ' main>*', ajaxLoad);
});
return false;
});
});

I ended up using document.title = $(html).filter('title').text(); instead of document.title = html.match(/<title>(.*?)<\/title>/)[1].trim(); and it seemed to do the trick in solving the unicode character issue.

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.

$(...).anchorAnimate is not a function (Javascript)

I have two problems on my website.
There is a menu, and if you click on a link then the browser scrolls to the point (id) of the link. A few days ago everything worked fine, but not now. I didn't work on the webpage, so I don't know where the problem is.
Here is my Code:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1000
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top - 135;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
//window.location.hash = elementClick
});
return false;
})
})
};
$(document).ready(function() {
$("li.anchorLink a").anchorAnimate();
});
Can you help me?

Make sure you load JQuery library first and then your jquery plugin. Basically it doesn't recognize your current file, because Jquery wasn't loaded / wasn't found.

Making all images' sources https:// using *.user.js

EDIT: Why doesn't this work?
#match http://tumblr.com/*
$(document).ready(function() {
$(img).each(function() {
var i = $(this).attr("src");
var n = i.replace("http://", "https://");
$(this).attr("src", function() {
return n;
});
});
});​
EDIT: To be clear, I DO NOT OWN THE WEBSITE. I want to have images on sites like https://facebook.com/ and https://tumblr.com/ be on https.

hey man it's so simple as far i can understand that you want! You want to change all images src?
$(document).ready( function() {
$("img").each( function() {
var i = $(this).attr("src");
var n = i.replace("http://", "https://");
$(this).attr("src", function() {
return n;
});
});
});

The OP was really close, just need to tweak the selector: $(img) to $("img")
$(document).ready(function() {
$("img").each(function() {
var link = $(this).attr("src");
var newLink = link.replace("http://example.com", "//example.com");
$(this).attr("src", function() {
return newLink
});
});
});
jQuery requires the use of quotes around DOM element selectors, the OP script would throw img not defined.

jquery links fade in/out

I am trying to get my wordpress internal links to appear in a content div, instead of doing a normal page reload. The fade in/out is working correctly, but the div content is not changing. Firebug is showing no errors, and all internal links are now only adding "#/" to the page link, how would I make sure the link is correctly being added back in with jquery?
Thanks in advance,
P.S, I am following the "css-tricks: ajaxing a wordpress theme" video if that helps,
$(function() {
$(".home li.home").removeClass("home").addClass("current_page_item");
var $mainContent = $("#content"),
URL = '',
siteURL = "http://" + top.location.host.toString(),
$internalLinks = $("a[href^='"+siteURL+"']"),
hash = window.location.hash,
$el, $allLinks = $("a");
if (hash) {
$mainContent.animate({ opacity: "0.1" });
$(".current_page_item").removeClass("current_page_item");
$("a[href="+hash+"]").addClass("current_link").parent().addClass("current_page_item");
hash = hash.substring(1);
URL = hash + " #content";
$mainContent.load(URL, function() {
$mainContent.animate({ opacity: "1" });
});
}
$internalLinks.each(function() {
$(this).attr("href", "#" + this.pathname);
}).click(function() {
$mainContent.animate({ opacity: "0.1" });
$el = $(this);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
URL = $el.attr("href").substring(1);
URL = URL + " #content";
$mainContent.load(URL, function() {
$el.addClass("current_link").parent().addClass("current_page_item");
$mainContent.animate({ opacity: "1" });
});
});
});

Can you put in console.log(variableName) in your method and see if the output of the variable in firebug is what you expect?