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>
Related
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.
I have this code to have random background images, I need to make sure that when someone clicks on the picture to open a web page, one for each image. Can you help me please?
this is the code:
</head><body onLoad="LoadRandomBackground(); StartBackgroundRefreshTimer()">
</body>
</head>
<body onLoad="LoadRandomBackground()">
</body>
<script type="text/javascript">
var bgImages = [];
bgImages[1]="/img/sfondi/bg-stanem.jpg";
bgImages[2]="/img/sfondi/booking.jpg";
function LoadRandomBackground()
{
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background = bgImages[randomImageIndex];
}
function StartBackgroundRefreshTimer()
{
var timer = setInterval('LoadRandomBackground()',1000); // millisecondi
}
</script>
thank's
can someone help me?
you could create a second array ...
var bgImagesUrls=[];
then assign the urls to the array using the same indexes for the bgImages
you could then place in LoadRandomBackground
document.<someelement>.href=bgImagesUrls[randomImageIndex];
Here a short possible script http://jsfiddle.net/d2Dmh/3/
bgImages[0]= {url: ...
here you can place the url you want as destination as another parameter (destination : "url")
And with
window.location = "http://www.google.com/";
you can navigate to the new page in the document click function.
You need jquery for my example.
This function is not taking these two website feeds, Only first url is taken
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.tricks10.com/feed","http://liveurlifehere.com/blog/feed/");
feed.setNumEntries(25);
feed.includeHistoricalEntries();
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
The answer is simple, you need 2 feed objects because the constructor for a Feed takes a simple url. Try that:
function loadFeed(url) {
var feed = new google.feeds.Feed(url);
feed.setNumEntries(25);
feed.includeHistoricalEntries();
feed.load(feedLoaded);
}
function OnLoad() {
["http://www.tricks10.com/feed", "http://liveurlifehere.com/blog/feed/"].map(loadFeed);
}
It worked for me. I only had to merge google's code with the answer above.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function loadFeed(url) //for multiple urls
{
var feed = new google.feeds.Feed(url); //for multiple urls
feed.includeHistoricalEntries(); //include old stuff
feed.setNumEntries(15); //number of entries
feed.load(function (result) {
if (!result.error)
{
result.feed.entries.forEach(function(entry)
{
var findImg = entry.content;
var img = $(findImg).find('img').eq(0).attr('src'); //i use jquery to find 1st img src
$('#feed').append('<div>your html here</div>');
});
}
});
}
google.setOnLoadCallback( function OnLoad() {
["http://firstURL.com/category/categoryname/feed/", "http://secondURL.com/category/categoryname/feed/, http://thirdURL.com/category/categoryname/feed/"].map(loadFeed);
});
</script>
as the title says I'm trying to figure out how to call this javascript function in my webpage. It's for my business, and the template is just a basic, free one. I'm sure for someone more experienced than me it's probably just a simple matter of formatting it correctly. Here's what I'm working with.
Code that goes in the HEAD portion of the webpage:
var theImages = new Array()
theImages[0] = 'splash1.jpg'
theImages[1] = 'splash2.jpg'
theImages[2] = 'splash3.jpg'
theImages[3] = 'splash4.jpg'
theImages[4] = 'splash5.jpg'
theImages[5] = 'splash6.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
</script>
Now to call the function I use:
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
Here's the page in which I'm trying to implement it:
http://coloradopp.com/index4.html
Instead of just displaying an image, I would like to call that function. Splash 1-6 are all the same size as the original image.
Here's the code snippet:
<div id="splash">
<img class="pic" src="images/splash1.jpg" width="870" height="374" alt="" />
</div>
As you can tell the page calls on a style sheet (style.css) for all the formatting.
Can anyone offer any tips on how to make this work? From what I've gathered, one cannot implement javascript into css sheets. Thanks in advance.
Do something like this:
showImage() {
var theImages = [ 'splash1.jpg', 'splash2.jpg', 'splash3.jpg', 'splash4.jpg', 'splash4.jpg' ];
var img = theImages[Math.round(Math.random() * (theImages.length - 1))];
document.getElementById('splash').innerHTML = '<img src="' + img + '">');
}
First move your javascript code inside the function something like:
function showImage(){ ...your code goes here...}
And then you can initiate the function on page load like this:
<body onload="showImage()">
You can set the images dynamically as background-image and place something like this
<script>
document.write('<style>#splash{ background-image:url(\'images/splash'+Math.round(Math.random()*5+1)+'.jpg\');}</style>');
</script>
at the head of your page. With this solution you have to set fix dimensions for your div tag (870x374)
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.