I have a page that is pulling in a Facebook RSS feed. Unfortunately, the feed contains both relative and absolute paths. I want to give users the ability to click on any given story and read it on Facebook. One of the generated links is relative, so what should be:
http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1
is converted to
http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I tried the following:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("/ShannonBaumGraphics/photos/","http://www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
But ended up with
http://www.shannonbaumsigns.comhttp//www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
I know it's something simple, but I'm not strong enough with Javascript to pinpoint the problem.
you can simply assigning new url.try using this :
aEl.href ="http://www.facebook.com/ShannonBaumGraphics/photos/";
aaEl.href = aEl.href.replace('http://www.shannonbaumsigns.com/ShannonBaumGraphics/photos/','http://www.facebook.com/ShannonBaumGraphics/photos/');
// http://www.facebook.com/ShannonBaumGraphics/photos/a.253345034707618.56302.102938249748298/805807439461372/?type=1&relevant_count=1
Thanks for your help. It pointed me in the right direction. Part of the problem is that the site uses multiple domain names (I should have mentioned that). So I added some PHP to grab the domain name to search for the address, and then replaced it with the Facebook link.
Here's what it looks like now:
<script type="text/javascript">
window.onload = function() {
var aEls = document.getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.href = aEl.href.replace("<?php echo $_SERVER['SERVER_NAME']; ?>/ShannonBaumGraphics/photos/","www.facebook.com/ShannonBaumGraphics/photos/");
}
};
</script>
Maybe there are better approaches, but this seems to work.
Related
I'm new to javascript & i want to do this simple thing.
I want to make a script which goes to coded url's & clicks on a button each time the script is executed.
Suppose,i have these links -
I want the javascript to to go on these links after running it & trigger another small js for both links after they are fully loaded.
Here's what i tried
var linkArray = ('https://facebook.com/user1','https://facebook.com/user2');
for (var i = 0; i < linkArray.length; i++) { window.open({
url: linkArray[i]
});
}
linkArray.onload="blabla();"
function blabla()
{
var inputs = document.getElementsByClassName('_42ft _4jy0 _63_s _4jy4 _517h _51sy');for(var i=1; i<inputs.length;i++) {inputs[i].click();}
}
Can anyone please help?
Thanks in advance! :-)
Please change to this, this would works
var linkarray = ('https://facebook.com/user1', 'https://facebook.com/user2');
var linkArray = [https://facebook.com/user1,https://facebook.com/user2];
isn't valid, please set your array like this:
var linkArray = ['https://facebook.com/user1', 'https://facebook.com/user2'];
I added this to the head, but it's not working:
<script>
var xpathname = (window.location.pathname);
if (xpathname ==('/')) {
$('body').addClass('home');
}
</script>
The site is here: http://xotdr.unxpr.servertrust.com/
Volusion doesn't allow developers to code freely so there are a lot of workarounds that I need to implement, unfortunately.
Edit: I want the class to show only on the home page body.
Since you added this to the head you need to execute this snippet when body tag is available:
$(function() {
var xpathname = window.location.pathname;
if (xpathname == '/') {
$('body').addClass('home');
}
});
<script>
var bodyclass=document.createAttribute("class");
bodyclass.value="home";
document.getElementsByTagName("body")[0].setAttributeNode(bodyclass);
</script>
Give this a try
var b = document.getElementsByTagName('body')[0];
b.className += 'home';
I know it's a old post, but the question will remain useful.
var xpathname = (window.location.pathname);
var ndeBody = document.getElementsByTagName("body")[0];
if (xpathname ==('/')) {
ndeBody.classList.toggle("home");
}
else{
ndeBody.classList.toggle("home");
}
When I go to that URL you have syntax error:
Uncaught ReferenceError: x$ is not defined
e.g. you want to delete the x in x$('body').addClass('home');
I have a page in a CMS that I can only edit parts of. I want to change the images it displays to larger ones. The system automatically created multiple sizes and stores them so all I would need to do is change it from /location/image-1.jpg to /location/image-2.jpg
I tried the following code unsuccessfully
<body onload="replaceScript();">
<script type="text/javascript">
function replaceScript() {
var toReplace = '-1.jpg';
var replaceWith ='-2.jpg';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>
Any ideas?
My guess is you've got a series of images that you want changed and its only changing one for you. A general innerHTML replace probably isn't the best way to go about changing image sources.
Try something like this:
function replaceScript() {
var images = document.querySelectorAll('img');
for(var i = 0, l = images.length; i < l; i++){
images[i].src = images[i].src.replace("-1.jpg", "-2.jpg");
}
}
Hi People and thanks for reading.
I am building a small (one-page) site for my friends band, and am using a tumblr feed instead of news section. The only thing is, I'm a total novice at JS / JQuery.
I've managed to get the posts showing fine, but at the moment the feed pulls the post title, some blurb, and the date (in that order). Because I want to display the date before the title, I'm crudely using some CSS to move the date above the title (position: relative).
So far I have this in the header:
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
And this in the body just before the closing body tag:
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feedControl = new google.feeds.FeedControl();
feedControl.setNumEntries(3);
feedControl.addFeed("http://xxxxxxxxxx.tumblr.com/rss");
feedControl.draw(document.getElementById("recentPosts"));
}
google.setOnLoadCallback(OnLoad);
</script>
Does anyone know how I can customise the output so that the date comes before the title?
Thanks,
John
I think you need to hack the html rendered by Google' script; you could try to use jquery in order to make things easier. Just remember to apply your changes after the
google.setOnLoadCallback(OnLoad);
Could be something like this (not tested):
<script language="Javascript">
google.load("feeds", "1");
function loadFeeds()
{
var feedControl = new google.feeds.FeedControl();
feedControl.setNumEntries(3);
var html;
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html+=entry.date+"<p>"+entry.title+"</p>"+entry.description+"<br>";
document.getElementById("feed").innerHTML =html;
}
}
});
}
google.setOnLoadCallback(loadFeeds);
</script>
Please take a look at this screenshot first:
I would like to move the highlighted block in the image, i.e. the the 'Result Info' (the "About 5 results (0.40 seconds) text)" and the 'powered by Google Custom Search', to the bottom of the search results.
Removing them maybe against Google's terms, but moving them to the bottom doesn't appear to be so, as many websites are doing it.
Here's the javascript code that I use for the search results page:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var googleAnalyticsOptions = {};
googleAnalyticsOptions['queryParameter'] = 'q';
googleAnalyticsOptions['categoryParameter'] = '';
customSearchOptions['googleAnalyticsOptions'] = googleAnalyticsOptions;
customSearchOptions['adoptions'] = {'layout': 'noTop'};
var customSearchControl = new google.search.CustomSearchControl(
'XXXXCANTGIVEITAWAYXXXXX', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('\x26');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = "q";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
Can someone who knows JavaScript and/or has used Google Custom Search Engine, modify the aforementioned JS code accordingly?
PS: I don't know JavaScript, so some kind of spoon-feeding will help. Thanks.
Are you already using jQuery on that page? If so, you can move that section around by doing this:
$( '.gsc-result-info' ).appendTo( '.gsc-control-cse' );
That will be fragile and could break anytime Google changes things.
I'm not sure sure that is quite moving the part you want moved (and your layout might be a little different than the demo. Just replace gsc-result-info with the class of the div you want to move gsc-control-cse with the div you want to move it to.
Google has some documentation about changing the look and feel of the results page. It looks like you can do a lot more than just mvoe the header down to the bottom.
I think you might want to look at the Setting the Search Element Layout section. There is an option called "Results Only" that may be close to what you are looking for.