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.
Related
$(document).ready(function () {
var youTubeUrl = $('.note-video-clip').attr('src');
$('#stop-video').click(function () {
$('.note-video-clip').each(function () {
$(this).attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
});
});
Im using the above script to solve the issue, however its working only for the first page but not the second page on next function
by using the below code we were able to solve the issue
allNextChapter.click(function () {
var sectionkey = $(this).attr("data-section");
var chapterkey = $(this).attr("data-chapter");
var youTubeUrl = $('.note-video-clip').attr('src');
$("#stop-videoSection" + sectionkey + "Chapter" + chapterkey).find('.note-video-clip').attr('src', '');
$('.note-video-clip').attr('src', youTubeUrl);
});
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.
Concerning the following site
Pretty simple, but none the less I seem to be falling at the first hurdle on this.
Using the following code currently to try and obtain a track name and artist from the currently active soundcloud player (of which there are 4 ,with the class SCiframe)
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget(iframeElement);
widgets.bind(SC.Widget.Events.READY, function () {
widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
for one, the console is registering 'iframeElement is not defined' as an inital error.
But all in all, I cant seem to get any useful data out of this to process.
Where am i going wrong here?
Kindest regards to the community.
You have the variable names incorrect, they have "$" at the begining,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
EDIT:
getElementsByClassName returns an array of results. So if there is only one iframe with "SCiframe" classname, you should pass first index of $iframeElement as paramater in SC.Widget, try this,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement[0]);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
Hey guys I'm getting a syntax error on my var url line but I can't seem to figure out
what or why it is, help appreciated
SW.wmode = {
init: function() {
$('iframe').each(function()
var url = $(this).attr("src")
$(this).attr("src",url+"?wmode=transparent")
);
}
}
You're missing semicolons after each line's expression, and some braces.
SW.wmode = {
init: function() {
$('iframe').each(function() {
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
}
};
You are missing the opening and closing braces of the function argument to each. Your code should be:
SW.wmode = {
init: function() {
$('iframe').each(function(){
var url = $(this).attr("src")
$(this).attr("src",url+"?wmode=transparent")
});
}
}
try this:
SW.wmode = {
init: function() {
$('iframe').each(function() { //you were missing the brackets
var url = $(this).attr("src")
$(this).attr("src",url+"?wmode=transparent")
});
}
}
Well, you're missing some curly braces... Try running your code through a javascript validator like jshint or jslint to help you catch these things.
Most reasonable text editors will have a plugin that can point out any validation errors on save, so that you don't have to do weird troubleshooting in the browser.. or here! ;)
Here's the valid code:
SW.wmode = {
init: function () {
$('iframe').each( function() {
var url = $(this).attr('src');
$(this).attr('src', url+"?wmode=transparent");
});
}
}
I refactored your code a bit:
SW.wmode = {
init: function () {
$( 'iframe' ).attr( 'src', function ( i, url ) {
return url + '?wmode=transparent';
});
}
};
I want to create a Javascript file to do these operations:
Pass the current link to the other page
Click on hypertext or image that is created dynamically in JavaScript file to redirect
Just I want to have a Javascript link in the html body and not other thing same this :
<div>
<script type="text/javascript" src="JScript.js"></script>
</div>
And in the JavaScript file I have these:
var DivTag = document.createElement("Div");
DivTag.setAttribute('ID', 'MyDivTagID');
$(document).ready(function () {
$("$MyDivTagID").click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + window.location;
});
});
This is not working. Please help me.
Several issues
you never added the div to the page
you used $ instead of # to access the div by ID
you do not consistently use jQuery
Plain JS: DEMO HERE
window.onload=function () {
var DivTag = document.createElement("div");
DivTag.setAttribute('id', 'MyDivTagID');
DivTag.innerHTML="Click";
DivTag.onclick = function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
}
document.body.appendChild(DivTag);
}
Using linked image:
window.onload=function () {
var DivTag = document.createElement("div");
DivTag.setAttribute('id', 'MyDivTagID');
var anchor = document.createElement("a");
anchor.href="#";
anchor.onclick = function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
}
var img = document.createElement("img");
img.src="image.gif";
img.style.border="0";
anchor.appendChild(img);
DivTag.appendChild(anchor);
document.body.appendChild(DivTag);
}
jQuery: DEMO HERE
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>');
$("#MyDivTagID").click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
A small change to the jQuery code from mplungjan:
Change:
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>').click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
To:
$(document).ready(function () {
$('body').append('<div id="MyDivTagID">Click</div>').find('#MyDivTagID').click(function(e) {
window.location = "http://www.MyLink.com/?Url=" + escape(window.location.href);
});
});
If you output e.currentTarget from the anonymous click handler function you get body since the event handler was attached to the body in mplungjan's solution. All I did was add .find('#MyDivTagID') directly after the .append() function so the click handler gets attached to the div and not the body.