As the title says, is it possible to embed the latest post of my blogger to the main index.html of the website?
The website main page is https://my-domain.com/index.html and the blog https://blog.my-domain.com. I want to embed the latest blog post to specific place on my website's main page. i.e. main page automatically updates when I post on my blogger.
Is this possible?
You can use jsonp of your blog, create div like this for place of latest post <div id="latest-post"></div>
<script src='http://your-blog.com/feeds/posts/default?alt=json-in-script&callback=latestPost' async='async'></script>
<script>
function latestPost(json) {
var entry = json.feed.entry;
for(var i = 0; i < entry.length; i++) {
var link, title = entry[i].title.$t;
for(var j = 0; j < entry[i].link.length; j++) {
if(entry[i].link[j].rel === "alternate") {
link = entry[i].link[j].href;
}
document.getElementById("latest-post").innerHTML += "<a href='" + link + "'>" + title + "</a>";
}
}
}
</script>
You could use iframes - this would simply embed the page contents in another page. For example:
<iframe src="http://google.com" width="800" height="800" title="Embed google.com"></iframe>
However, iframes present big security risks (for example, cross-site scripting) - avoidable but a better approach would be something like Fajar recommends (i.e grab the content from the Blogger API, decode the JSON and set your content to the values downloaded).
In future, when you ask questions on Stack Overflow, include the code that you've already tried to get you to the solution. If you don't know how to do something, research the subject and use jsfiddle or similar to prototype things.
Related
I'm hoping someone can help a javascript noob with a caching problem. I'm making a site in Wordpress and I've got a caching plugin installed. I need one div (that's on the sidebar of every page) NOT to be cached as it contains an image and text that is randomly generated on each page load. I've done a lot of reading and testing out of various online solutions, but I can't get one to work. I read that the best way to get around this is to give the div a random ID via Date.now(), but I can't get that to work either. So I found something close, yet it, too, doesn't work (posted below). The div doesn't show on screen, yet its contents show up fine in my source code.
Can anyone fix it for me or suggest something? I am a complete noob when it comes to javascript. Thank you for reading! :)
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">[autonav display="images,title, page, excerpt" pics_only="0" postid="11" attachment="1" orderby="rand" count=1]</div>');
</script>
I am trying to scrape data from a news article using HtmlAgilityPackage the link is as follows http://www.ndtv.com/india-news/vyapam-scam-documents-show-chief-minister-shivraj-chouhan-delayed-probe-780528
I have written the following code below to extract all the comments in this articles but for some reason my variable aTags is returning null value
Code:
var getHtmlWeb = new HtmlWeb();
var document = getHtmlWeb.Load(txtinputurl.Text);
var aTags = document.DocumentNode.SelectNodes("//div[#class='com_user_text']");
int counter = 1;
if (aTags != null)
{
foreach (var aTag in aTags)
{
lbloutput.Text += lbloutput.Text + ". " + aTag.InnerHtml + "\t" + "<br />";
counter++;
}
}
I have also used this XPath but still the same result //div[#class='newcomment_list']/ul/li/div[#class='headerwrap']/div[#class='com_user_text']
Please help me with the correct Xpath to Extract all the comments
Searched all over the net but no solution.
Do a 'View Source' on the page and search for com_user_text. The user comments don't appear at all. They are loaded via javascript after the page is loaded. So when you load the page content via getHtmlWeb.Load(), you don't get user comments.
As this answer says, HTML Agility is not a tool capable of emulating a browser and running javascript. Instead, you need something like WatiN that "allows programmatic access to web pages through a given browser engine and will load the full document."
I am building webpage with several pages.i don't want to use links to go to those pages. i have given the page numbers in the bottom of the page. but when i click that page number the page should information of other page should in the same page.how can i achieve this?
If you don't want to redirect to another page you have to use a frame (the easier way, but really uglier) or AJAX. The AJAX code is easy, if you need it I'll post by comment :)
Chris Coyier at CSS-tricks has a great article explaining a non-frame SEO friendly technique for doing just that.
var oXHR = new XMLHttpRequest();
oXHR.open("get", "page.php?num=1", true); // here you get the page you need
oXHR.onreadystatechange = function ()
{
if (oXHR.status != 200)
document.getElementById('page_displayed').innerHTML = "Error: " + oXHR.status + " " + oXHR.statusText;
else
document.getElementById('page_displayed').innerHTML = oXHR.responseText;
// here will be displayed your content
}
oXHR.send(null);
This is the AJAX code. Then in "page.php" you would have to write something like (I'll write in pseudo-code):
<?php
// ipotize you see 10 post for every page
$post = 10;
$page_num = $_GET['num'];
// select from database the content you need
$sql = "SELECT content FROM pages LIMIT 0, ".$post;
// OR (if you have more html contents for different pages)
// if ($page_num == 1)
{
?>
<html code here>
<?php
}
// in each case you must return some text, it will be displayed on your page
?>
Ask if you don't understand :)
Yes frames is going to be the best thing for you.
Is the link for details http://www.w3schools.com/html/html_frames.asp
I used Json to get data off a site build in Wordpress (using the Json API plugin). I'm using jQuery mobile for the layout of the application in Phonegap. Getting the data to display in Phonegap wasn't the hardest thing to find (code below). But, is it possible to make a list of the titles of different posts and linking them to the specific article and loading the content in a page? In PHP you could just use an argument but is there a way to make something like this work in jQuery mobile?
Here's code I used. Also handy if someones happens to come across this post using google.
<script>
$(document).ready(function(){
var url="http://127.0.0.1:8888/wp/api/get_recent_posts";
$.getJSON(url,function(json){
$.each(json.posts,function(i,post){
$("#content").append(
'<div class="post">'+
'<h1>'+post.title+'</h1>'+
'<p>'+post.content+'</p>'+
'</div>'
);
});
});
});
</script>
EDIT:
I'd like to thank shanabus again for helping me with this. This was the code I got it to work
with:
$(document).ready(function() {
var url="http://127.0.0.1:8888/wpjson/api/get_recent_posts";
var buttonHtmlString = "", pageHtmlString = "";
var jsonResults;
$.getJSON(url,function(data){
jsonResults = data.posts;
displayResults();
});
function displayResults() {
for (i = 0; i < jsonResults.length; i++) {
buttonHtmlString += '' + jsonResults[i].title + '';
pageHtmlString += '<div data-role="page" id="' + $.trim(jsonResults[i].title).toLowerCase().replace(/ /g,'') + '">';
pageHtmlString += '<div data-role="header"><h1>' + jsonResults[i].title + '</h1></div>';
pageHtmlString += '<div data-role="content"><p>' + jsonResults[i].content + '</p></div>';
pageHtmlString += '</div>';
}
$("#buttonGroup").append(buttonHtmlString);
$("#buttonGroup a").button();
$("#buttonGroup").controlgroup();
$("#main").after(pageHtmlString);
}
});
Yes, this is possible. Check out this example: http://jsfiddle.net/shanabus/nuWay/1/
There you will see that we take an object array, cycle through it and append new buttons (and jqm styling). Does this do what you are looking to do?
I would also recommend improving your javascript by removing the $.each and substituting it for the basic for loop:
for(i = 0; i < json.posts.length; i++)
This loop structure is known to perform better. Same with the append method. I've heard time and time again that its more efficient to build up a string variable and append it once rather than call append multiple times.
UPDATE
In response to your comment, I have posted a new solution that simulates loading a Json collection of content objects to dynamically add page elements to your application. It also dynamically generates the buttons to link to them.
This works if you do it in $(document).ready() and probably a few other jQM events, but you may have to check the documentation on that or call one of the refresh content methods to make the pages valid.
http://jsfiddle.net/nuWay/4/
Hope this helps!
I was trying to develop a Chrome extension that can display me the last 3 news from a soccer news site (obviously the page is not open in any tab), by refreshing every 5 minutes. My ideea was to load the page inside an iframe and, once the page is loaded, access the page DOM and extract only the text nodes with the news. I've tried in many ways using ready and load functions, I tried to follow this solutions here but i always get warnings. My question is: is there a way I can do that without having troubles with cross-domain security? Are there any simple examples i can use?
Here's how you could do it using JQuery (please keep in mind I dont know JQuery, just saw this approach somewhere and thought it might work for you).
I put this in a popup and it worked....
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function renderNews(newsList){
$('#news').html('');
$(newsList).each(function(i,item){
var link = document.createElement('a');
$(link).attr('href',item.link);
$(link).html(item.description);
$(link).click(function(){
chrome.tabs.create({url:$(this).attr('href')});
});
var linksDate = document.createElement('span');
//$(linksDate).text(item.date);
$(linksDate).text(item.day + '-' + item.month + ' ' + item.hour + ':' + item.minute+' - ');
var listItem = document.createElement('li');
$(listItem).append(linksDate).append(link);
$("#news").append(listItem);
});
}
function getNews() {
$.get("http://www.milannews.it/?action=search§ion=32", null, function(data, textStatus)
{
if(data) {
var news=$(data).find(".list").find('li').slice(0,3) ;
$("#status").text('');
var newsList=[];
$(news).each(function(i, item){
var newsItem={};
newsItem.description=$(item).find('a').html();
newsItem.link='http://www.milannews.it/'+$(item).find('a').attr('href');
newsItem.date=$(item).find('span').first().text();
newsItem.day=newsItem.date.split(' ')[0].split('.')[0];
newsItem.month=newsItem.date.split(' ')[0].split('.')[1];
newsItem.hour=newsItem.date.split(' ')[1].split(':')[0];
newsItem.minute=newsItem.date.split(' ')[1].split(':')[1];
newsList[i]=newsItem;
});
renderNews(newsList);
localStorage.setItem('oldNews',JSON.stringify(newsList));
}
});
}
function onPageLoad(){
if (localStorage["oldNews"]!=null) renderNews(JSON.parse(localStorage["oldNews"]));
getNews();
}
</script>
</head>
<body onload="onPageLoad();" style="width: 700px">
<ul id="news"></ul>
<div id="status">Checking for new news...</div>
</body>
</html>
And dont forget to put the urls your getting with the xhr stuff in the permissions part of your manifest....
http://code.google.com/chrome/extensions/xhr.html
Use xhr to load the page and use jQuery or a regex to parse the raw HTML for the data you are looking for.
Keep in mind that the destination site may not want to you access their site in such an automated fashion. Be respectful of their site and resources.