I am using blogger. And I want to add the number of comments to my codes. I will share the code I use below. There is a code similar to this and I am adding this too.
I want to add the number of comments to my codes below. The example I found has the number of comments.
<div id='artikel-terbaru'>
<ol>
<script>
var jumlahnewpost = 5; //jumlah post yang ingin ditampilkan
var create = true;
</script>
<script>
//<![CDATA[
function showrecentposts(e) {
for (var t = 0; t < jumlahnewpost; t++) {
var r, n = e.feed.entry[t],
i = n.title.$t;
if (t == e.feed.entry.length) break;
for (var l = 0; l < n.link.length; l++)
if ("alternate" == n.link[l].rel) {
r = n.link[l].href;
break
}
i = i.link(r), create && document.write("<li>"), document.write(i)
}
create && document.write("</li>");
}
//]]>
</script>
<script src='/feeds/posts/summary/-/Mavi?alt=json-in-script&callback=showrecentposts'/>
</ol>
</div>
Example I found.
function labelthumbs(json) {
document.write('<ul class="label_with_thumbs">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = 'http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "June";
monthnames[7] = "July";
monthnames[8] = "Aug";
monthnames[9] = "Sept";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="clearfix">');
if (showpostthumbnails == true)
document.write('<img width="56" height="46" class="label_thumb" src="' + thumburl + '" alt="' + posttitle + '" title="' + posttitle + '"/>');
document.write('<div class="title-label">' + posttitle + '</div>');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
var towrite = '';
var flag = 0;
document.write('<br>');
if (showpostdate == true) {
towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear;
flag = 1;
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' | ';
}
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<a class="comment-label" href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
towrite = towrite + commenttext;
flag = 1;;
}
if (displaymore == true) {
if (flag == 1) towrite = towrite + ' | ';
towrite = towrite + '<a class="more-label" href="' + posturl + '" class="url" target ="_top">More ยป</a>';
flag = 1;;
}
document.write(towrite);
document.write('</li>');
if (displayseparator == true)
if (i != (numposts - 1))
document.write('');
}
document.write('</ul>');
}
Above is the example I found.
I am not really sure the question, just simple thought, it may be what do you want, by adding the index i as
i = i.link(r), create && document.write("<li>" + i + ". "), document.write(i)
Related
I use this script in Blogger to show labeled posts via JSON,
as you see through this code I can retrieve posts' titles, thumbnails and dates, etc
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
document.write('<ul id="label_with_thumbs">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = 'https://1.bp.blogspot.com/-etyXYLaEXP8/WrmiznwRzXI/AAAAAAAAAnQ/Pu4OVqzx_4kmgwnmxJGDuf6j-l6ARuHbgCLcBGAs/s1600/nothumbnailimage.png';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "January";
monthnames[2] = "February";
monthnames[3] = "March";
monthnames[4] = "April";
monthnames[5] = "May";
monthnames[6] = "June";
monthnames[7] = "July";
monthnames[8] = "August";
monthnames[9] = "September";
monthnames[10] = "October";
monthnames[11] = "November";
monthnames[12] = "December";
document.write('<li>');
if (showpostthumbnails == true)
document.write('<a class="posturl" href="' + posturl + '" target ="_top"><img class="label_thumb" src="' + thumburl + '"/></a>');
document.write('<a class="posturl" href="' + posturl + '" target ="_blank"><h3 class="posttitle">' + posttitle + '</h3><span class="dateposted">' + monthnames[parseInt(cdmonth, 10)] + ' ' + cdday + ', ' + cdyear + '></span></a>');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
var towrite = '';
var flag = 0;
if (showpostdate == true) {
flag = 1;
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' | ';
}
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '' + commenttext + '';
towrite = towrite + commenttext;
flag = 1;;
}
if (displaymore == true) {
if (flag == 1) flag = 1;
}
document.write(towrite);
document.write('</li>');
if (displayseparator == true)
if (i != (numposts - 1))
document.write('');
}
document.write('</ul>');
}
//]]>
</script>
My question is that in every post in my blog does have Location Name that I can specify optionally eg: USA,etc.
So how can I retrieve the location as well via JSON?
P.S This is the HTML of location Name that appears in my blogger template
<span class='published-location' expr:title='data:post.location.name'><data:post.location.name/></span>
The location data entered via the post editor is available in the JSON feed via the key georss$featurename. You will have to include that in your code
..
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var location = entry.georss$featurename.$t;
var posturl;
..
And then you print it on the page via the document.write statement in the above code -
document.write('Location: ' + location + '<br/><a class="posturl" href="' + posturl + '" target ="_blank"><h3 class="posttitle">' + posttitle + '</h3><span class="dateposted">' + monthnames[parseInt(cdmonth, 10)] + ' ' + cdday + ', ' + cdyear + '></span></a>');
I am working on a blog with custom template which includes this numbered page navigation script below. Script is working in all pages except search results for queries and labels!!! I tried some changes but as I am not a javascript expert and I couldn't make it work... So, any kind of help would be really appreciated!!!
var pageCount = 9;
var displayPageNum = 3;
var upPageWord = "<i class='fa fa-angle-left'></i>";
var downPageWord = "<i class='fa fa-angle-right'></i>";
function showpageCount(x) {
var C = home_page_url;
var E = new Array();
var y = 1;
var H = 1;
var v = 0;
var p = 0;
var G = 0;
var F = "";
var J = "";
var w = "";
for (var z = 0, A; A = x.feed.entry[z]; z++) {
var u = A.published.$t.substring(0, 19) + A.published.$t.substring(23, 29);
timestamp = encodeURIComponent(u);
var i = A.title.$t;
if (i != "") {
if (v == 0 || (v % pageCount == (pageCount - 1))) {
if (C.indexOf(timestamp) != -1) {
y = H
}
if (i != "") {
H++
}
E[E.length] = "/search?updated-max=" + timestamp + "&max-results=" + pageCount
}
}
v++
}
for (var D = 0; D < E.length; D++) {
if (D >= (y - displayPageNum - 1) && D < (y + displayPageNum)) {
if (p == 0 && D == y - 2) {
if (y == 2) {
J = '<span class="showpage">' + upPageWord + "</span>"
} else {
J = '<span class="showpage">' + upPageWord + "</span>"
}
p++
}
if (D == (y - 1)) {
F += '<span class="showpagePoint">' + y + "</span>"
} else {
if (D == 0) {
F += '<span class="showpageNum">1</span>'
} else {
F += '<span class="showpageNum">' + (D + 1) + "</span>"
}
}
if (G == 0 && D == y) {
w = '<span class="showpage"> ' + downPageWord + "</span>";
G++
}
}
}
if (y > 1) {
F = "" + J + " " + F + " "
}
F = '<div class="showpageArea">' + F;
if (y < (H - 1)) {
F += w
}
if (H == 1) {
H++
}
F += "</div>";
var I = document.getElementsByName("pageArea");
var B = document.getElementById("blog-pager");
if (H <= 2) {
F = ""
}
for (var D = 0; D < I.length; D++) {
I[D].innerHTML = F
}
if (I && I.length > 0) {
F = ""
}
if (B) {
B.innerHTML = F
}
}
function showpageCount2(A) {
var F = home_page_url;
var G = new Array();
var J = F.indexOf("/search/label/") != -1;
var M = J ? F.substr(F.indexOf("/search/label/") + 14, F.length) : "";
M = M.indexOf("?") != -1 ? M.substr(0, M.indexOf("?")) : M;
var B = 1;
var L = 1;
var y = 0;
var p = 0;
var K = 0;
var I = "";
var P = "";
var z = "";
var N = '<span class="showpageNum"><a href="/search/label/' + M + "?&max-results=" + pageCount + '">';
var F = home_page_url;
for (var C = 0, D; D = A.feed.entry[C]; C++) {
var x = D.published.$t.substring(0, 19) + D.published.$t.substring(23, 29);
timestamp = encodeURIComponent(x);
var i = D.title.$t;
if (i != "") {
if (y == 0 || (y % pageCount == (pageCount - 1))) {
if (F.indexOf(timestamp) != -1) {
B = L
}
if (i != "") {
L++
}
G[G.length] = "/search/label/" + M + "?updated-max=" + timestamp + "&max-results=" + pageCount
}
}
y++
}
for (var H = 0; H < G.length; H++) {
if (H >= (B - displayPageNum - 1) && H < (B + displayPageNum)) {
if (p == 0 && H == B - 2) {
if (B == 2) {
P = N + upPageWord + "</a></span>"
} else {
P = '<span class="showpage">' + upPageWord + "</span>"
}
p++
}
if (H == (B - 1)) {
I += '<span class="showpagePoint">' + B + "</span>"
} else {
if (H == 0) {
I = N + "1</a></span>"
} else {
I += '<span class="showpageNum">' + (H + 1) + "</span>"
}
}
if (K == 0 && H == B) {
z = '<span class="showpage"> ' + downPageWord + "</span>";
K++
}
}
}
if (B > 1) {
if (!J) {
I = "" + P + " " + I + " "
} else {
I = "" + P + " " + I + " "
}
}
I = '<div class="showpageArea">' + I;
if (B < (L - 1)) {
I += z
}
if (L == 1) {
L++
}
I += "</div>";
var O = document.getElementsByName("pageArea");
var E = document.getElementById("blog-pager");
if (L <= 2) {
I = ""
}
for (var H = 0; H < O.length; H++) {
O[H].innerHTML = I
}
if (O && O.length > 0) {
I = ""
}
if (E) {
E.innerHTML = I
}
}
var home_page_url = location.href;
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/") != -1) {
if (thisUrl.indexOf("?updated-max") != -1) {
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
} else {
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=") == -1) {
if (thisUrl.indexOf("/search/label/") == -1) {
document.write('<script src="' + home_page + 'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
} else {
document.write('<script src="' + home_page + "feeds/posts/full/-/" + lblname1 + '?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
};
We are currently facing the same problem. The pagination links are good for even pages, but not for off pages. The whole script seems quite buggy, but only for 'search keywords'. Will post results if we achieve any progress.
I'm not sure how I am supposed to work around this Invalid calling object error in IE. It appears as though IE won't allow me to use the global emoticon in other functions?
var emoticon = new Array();
var emote_page;
var emote_pages;
getPaginateEmoticons(1);
function navigateEmoticons(page){
var i = ((page - 1) * 37);
var p_emotes = page * 37;
var emotes_div = document.getElementById('emoticons');
if(page == 1){
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page > 1 && page < emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page == emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'none';
}
emotes_div.innerHTML = '';
while(i < p_emotes && i <= emoticon.length){
i++;
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
emote_page = page;
}
function getPaginateEmoticons(page){
var emotes_div = document.getElementById('emoticons');
var emote_pages_sel = document.getElementById('emote_page');
var i;
function handler(){
if(this.status == 200 && this.responseXML != null){
emoticon = this.responseXML.getElementsByTagName('file');
emote_pages = Math.floor(emoticon.length / 37);
emote_page = page;
for(i = 0; i < 37; i++){
if(i == 1)
emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '" selected="selected">Page ' + i + '</option>');
else if(i <= emote_pages && i > 1)
emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '">Page ' + i + '</option>');
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('loadingIcon').style.display = 'none';
}
else{
// something went wrong
}
}
var client = new XMLHttpRequest();
client.onload = handler;
client.open("GET", "resources/emo_catalog.xml");
client.send();
}
The Invalid calling object error occurs at the while(i < p_emotes && i <= emoticon.length){ line. Any help would be greatly appreciated.
I do not know about IE 11 but lower versions not support var client = new XMLHttpRequest(); but need to write some think like this ActiveXObject.
This can be 1 of problem.
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
The possible problem number 2
document.addEventListener("DOMContentLoaded", function() {
getPaginateEmoticons(1);
});
IE 8 say Object not support this property
Code is here. I do not know if it work because no file to download and parse. Let me know if it work
var emoticon = new Array();
var emote_page;
var emote_pages;
/*
document.addEventListener("DOMContentLoaded", function() { // show error addEventListener is not supported
getPaginateEmoticons(1);
});
*/
/* Cahge here *****************************************/
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", function() {
getPaginateEmoticons(1); });
}
else if (document.attachEvent){
document.attachEvent("DOMContentLoaded", function() {
getPaginateEmoticons(1); });
}
/****************************************************/
function navigateEmoticons(page){
var i = ((page - 1) * 37);
var p_emotes = page * 37;
var emotes_div = document.getElementById('emoticons');
if(page == 1){
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page > 1 && page < emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page == emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'none';
}
emotes_div.innerHTML = '';
while(i < p_emotes && i <= emoticon.length){
i++;
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
emote_page = page;
}
function getPaginateEmoticons(page){
var emotes_div = document.getElementById('emoticons');
var emote_pages_sel = document.getElementById('emote_page');
var i;
function handler(){
if(this.status == 200 && this.responseXML != null){
emoticon = this.responseXML.getElementsByTagName('file');
emote_pages = Math.floor(emoticon.length / 37);
emote_page = page;
for(i = 0; i < 37; i++){
if(i == 1)
emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '" selected="selected">Page ' + i + '</option>');
else if(i <= emote_pages && i > 1)
emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '">Page ' + i + '</option>');
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('loadingIcon').style.display = 'none';
}
else{
// something went wrong
}
}
/* Cahge here *****************************************/
var client = new XMLHttpRequest(); /*I think bad, but no error show*/
/****************************************************
client.onload = handler;
client.open("GET", "resources/emo_catalog.xml");
client.send();
}
This code receive xml document in IE8.
var emoticon = new Array();
var emote_page;
var emote_pages;
function getPaginateEmoticons(page){
var emotes_div = document.getElementById('emoticons');
var emote_pages_sel = document.getElementById('emote_page');
var i;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "http://victoria.ru/a.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML; alert(xmlDoc);
emoticon = xmlDoc.getElementsByTagName("file")[0].childNodes[0].nodeValue;
emote_pages = Math.floor(emoticon.length / 37);
emote_page = page;
for(i = 0; i < 37; i++){
/* ... HERE ALSO ERRORS */
/*
if(i == 1) emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '" selected="selected">Page ' + i + '</option>');
else if(i <= emote_pages && i > 1) emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option value="' + i + '">Page ' + i + '</option>');
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
*/
}
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('loadingIcon').style.display = 'none';
}
}
I ultimately had to put the contents into a string and store it in a hidden division element, then I had to convert the string back into an array every time I iterate. Kind of defeats the whole purpose of using an XML file though :(
var emoticon = new Array();
var emote_page;
var emote_pages;
function navigateEmoticons(page){
page = page - 1;
page = page + 1;
if(!page)
page = 1;
var i = (page - 1) * 37;
var p_emotes = page * 37;
var emotes_div = document.getElementById('emoticons');
var emote_pages_sel = document.getElementById('emote_page');
var page_num = "";
//IE11
if(window.location.hash = !!window.MSInputMethodContext && !!document.documentMode){
var it = 0;
var ie11_shit = document.getElementById('ie11_shit');
var tmp = "";
var ie11_tmp = "";
var emoticon11 = new Array();
ie11_tmp = ie11_shit.innerHTML;
if(page == 1){
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page > 1 && page < emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page == emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'none';
}
emotes_div.innerHTML = '';
while(it < ie11_tmp.length){
if(ie11_tmp.charAt(it) == ','){
emoticon11.push(tmp);
tmp = "";
}
else
tmp = tmp.concat(ie11_tmp.charAt(it));
it++;
}
while(i < p_emotes && i <= emoticon11.length){
i++;
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon11[i].split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon11[i] + '"></button>');
}
emotes_div.innerHTML = emotes_div.innerHTML.concat('<div id="ie11_shit" style="display: none;">').concat(ie11_tmp).concat('</div>');
emote_page = page;
page_num = page + '_page';
document.getElementById(page_num).selected = true;
}
else{
if(page == 1){
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page > 1 && page < emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'inline';
}
else if(page == emote_pages){
document.getElementById('previous_emo_p').style.display = 'inline';
document.getElementById('next_emo_p').style.display = 'none';
}
emotes_div.innerHTML = '';
if(document.selection){//IE8
while(i < p_emotes && i <= emoticon.length){
i++;
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].getElementsByTagName('file')[0].childNodes[0].nodeValue.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' +
emoticon[i].getElementsByTagName('file')[0].childNodes[0].nodeValue + '"></button>');
}
emote_page = page;
emote_pages_sel.selectedIndex = page;
}
else{
while(i < p_emotes && i <= emoticon.length){
i++;
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
emote_page = page;
page_num = page + '_page';
document.getElementById(page_num).selected = true;
}
}
}
function getPaginateEmoticons(page){
var emotes_div = document.getElementById('emoticons');
var emote_pages_sel = document.getElementById('emote_page');
var i;
if(document.selection){//IE8
if(window.XMLHttpRequest)//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
else//IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", "resources/emo_catalog.xml", false);
xmlhttp.send();
xmlDocument = xmlhttp.responseXML;
emoticon = xmlDocument.getElementsByTagName('emoticon');
emote_pages = Math.floor(emoticon.length / 37);
emote_page = page;
for(i = 0; i < 37; i++){
if(i <= emote_pages)
emote_pages_sel.options[emote_pages_sel.options.length] = new Option('Page ' + i, i);
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].getElementsByTagName('file')[0].childNodes[0].nodeValue.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].getElementsByTagName('file')[0].childNodes[0].nodeValue + '"></button>');
}
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('loadingIcon').style.display = 'none';
}
else{
function handler(){
if(this.status == 200 && this.responseXML != null){
//IE11
if(window.location.hash = !!window.MSInputMethodContext && !!document.documentMode){
emotes_div.innerHTML = '<div id="ie11_shit"></div>';
var ie11_shit = document.getElementById('ie11_shit');
ie11_shit.style.display = "none";
emoticon = this.responseXML.getElementsByTagName('file');
for(i = 0; i < emoticon.length; i++){
ie11_shit.innerHTML = ie11_shit.innerHTML.concat(emoticon[i].textContent).concat(',');
}
}
else
emoticon = this.responseXML.getElementsByTagName('file');
emote_pages = Math.floor(emoticon.length / 37);
emote_page = page;
for(i = 0; i < 37; i++){
if(i <= emote_pages && i >= 1)
emote_pages_sel.innerHTML = emote_pages_sel.innerHTML.concat('<option id="' + i + '_page" value="' + i + '">Page ' + i + '</option>');
emotes_div.innerHTML = emotes_div.innerHTML.concat('<button class="emobutton" onclick="insertEmote(document.getElementById(' + i + ').alt);"><img id="' + i + '" alt=":' +
emoticon[i].textContent.split('\\').pop().split('/').pop().split('.').shift() + ':" src="' + emoticon[i].textContent + '"></button>');
}
document.getElementById('previous_emo_p').style.display = 'none';
document.getElementById('loadingIcon').style.display = 'none';
}
else{
// something went wrong
}
}
var client = new XMLHttpRequest();
client.onload = handler;
client.open("GET", "resources/emo_catalog.xml");
client.send();
}
}
Can somebody please tell me what is wrong with the JavaScript in this code? It said "Unexpected end of input", but I do not see any errors. All my statements seem to be ended at some point, and every syntax checker says that no errors were detected.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Slide Editor</title>
<style>
#font-face {
font-family: SegoeUILight;
src: url(Segoe_UI_Light.ttf);
}
* {
font-family: SegoeUILight;
}
</style>
<script src="Slide/RevealJS/lib/js/html5shiv.js"></script>
<script src="Slide/RevealJS/lib/js/head.min.js"></script>
</head>
<body onload="editSlideshow()">
<div id="sl">
<span id="sls"></span>
</div>
<span id="slt"></span>
<div id="editor">
</div>
<script>
function getURLParameters(paramName) {
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0) {
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i < arrURLParams.length; i++) {
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i = 0; i < arrURLParams.length; i++) {
if (arrParamNames[i] == paramName) {
//alert("Parameter:" + arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
var name = getURLParameters("show");
var slideCount = 1;
function editSlideshow() {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
$("#sls").append('<button onclick = "loadSlide\'1\')" id = "slide_1">Slide 1</button>');
$("#sl").append('button onclick = "newSlide()">New Slide</button>');
slideCount = 1;
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
slideCount = textArray.length;
var slideCnt = textArray.length - 1;
for (var i = 0; i <= slideCnt; i++) {
$("#sls").append('<button onclick = "loadSlide\'' + (i + 1) + '\')" id = "slide_' + (i + 1) + '">Slide ' + (i + 1) + '</button>');
};
$("sl").append('<button onclick = "newSlide()">New Slide</button>');
};
};
function loadSlide(num) {
var array = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
if (array == null) {
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
} else if (array[num - 1] == null) {
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
} else {
var slideArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
var text = slideArray[num - 1];
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("editTxt").value = text;
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
};
};
function saveSlide(num) {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
var text = document.getElementById("editTxt").value;
var textArray = new Array();
textArray[num - 1] = text;
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
var text = document.getElementById("editTxt").value;
textArray[num - 1] = text;
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
};
};
function newSlide() {
var nextSlide = slideCount + 1;
$("#sls").append('<button onclick = "loadSlide(\'' + nextSlide + '\')" id = "slide_' + nextSlide.toString() + '">Slide ' + nextSlide.toString() + '</button>');
slideCount = nextSlide;
};
function deleteSlide(num) {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
if (num !== "1") {
$("#slide_" + num).remove();
document.getElementById("editor").innerHTML = "";
document.getElementById("slt").innerHTML = "";
slideCount = slideCount - 1;
location.reload();
} else {
alert("The first slide cannot be deleted.");
};
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
if (num !== "1") {
$("#slide_" + num).remove();
document.getElementById("editor").innerHTML = "";
document.getElementById("slt").innerHTML = "";
slideCount = slideCount - 1;
textArray.splice((num - 1), 1);
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
location.reload();
} else {
alert("The first slide cannot be deleted.");
};
};
};
</script>
</body>
</html>
You've gotten the punctuation wrong in more than one of your onclick attributes, for instance here:
$("#sls").append('<button onclick = "loadSlide\'1\')" id = "slide_1">Slide 1</button>');
It's missing the opening parenthesis. The reason syntax checks don't immediately catch this is because you're putting code inside a string. Which you should not do.
Since you're using jQuery, how about using .click(function() { ... }) instead of inline attributes? Just be careful to get your captured variables correct.
The problem at line 63
$("#sl").append('button onclick = "newSlide()">New Slide</button>');
Should be:
$("#sl").append('<button onclick = "newSlide()">New Slide</button>');
I have developed the following user script which will show the html element under mouse on mouseover in the tooltip.
Earlier I was using the same script as a content script in a Chrome Extension and it is working absolutely fine there.
I am getting the following error:
Uncaught TypeError: Cannot read property 'timer' of undefined
// ==UserScript==
// #name Tooltip
// #author Saurabh Saxena
// #version 1.0
// ==/UserScript==
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;
document.onmouseover = function(e,w)
{
var link = document.location.toString();
link = link.split('.');
if(!link[1].match(/facebook/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/))
{
if (tt == null) {
tt = document.createElement('div');
tt.setAttribute('id', id);
t = document.createElement('div');
t.setAttribute('id', id + 'top');
c = document.createElement('div');
c.setAttribute('id', id + 'cont');
b = document.createElement('div');
b.setAttribute('id', id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = function(e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';};
}
tt.style.display = 'block';
var str = "";
var currenttag = "";
var parenttag = "";
var tooltip = "";
var flag = 0;
var chk = e.srcElement.parentNode;
/*creating contents of parent tag if it exists*/
if(chk != null)
{
var parenttag = "<" + chk.nodeName;
for (var i = 0; i < chk.attributes.length; i++) {
var attrib = chk.attributes[i];
if(attrib.value == "")
parenttag = parenttag + " " + attrib.name;
else
parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
parenttag = parenttag + " ";
}
parenttag = trim(parenttag);
tooltip = parenttag + ">" + "\n\n";
}
/*creating contents of current tag*/
currenttag = "<" + e.srcElement.nodeName;
if(e.srcElement.attributes.length == 0)
flag = 0;
for (var i = 0; i < e.srcElement.attributes.length; i++)
{
var attrib = e.srcElement.attributes[i];
if(attrib.value == "")
currenttag = currenttag + " " + attrib.name;
else
{
flag = 1;
currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
currenttag = currenttag + " ";
}
}
currenttag = trim(currenttag);
currenttag = currenttag + ">";
currenttag = currenttag + e.srcElement.innerHTML;
currenttag = currenttag + "</" ;
currenttag = currenttag + e.srcElement.nodeName;
currenttag = currenttag + ">";
tooltip = tooltip + currenttag;
tooltip = tooltip.toLowerCase();
if(currenttag == "" || flag == 0)
return;
c.innerText = tooltip;
tt.style.width = w ? w + 'px' : 'auto';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
h = parseInt(tt.offsetHeight);
clearInterval(tt.timer);
tt.timer = setInterval(function ()
{
var a = alpha;
var d = 1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none' }
} }, timer);
}
}//end onmousedown
document.onmouseout = function()
{
clearInterval(tt.timer);
tt.timer = setInterval(function () {
var a = alpha;
var d = -1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none'; }
} }, timer);
}
function trim(s) {
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s;
}
// ==UserScript==
// name Tooltip
// author Saurabh Saxena
// version 1.0.0
// description Show Google Rich Snippet Markup Tooltip
// ==/UserScript==
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;
document.onmouseover = function(e,w)
{
var link = document.location.toString();
link = link.split('.');
if(!link[1].match(/facebook/) && !link[0].match(/workflow/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/) && !link[0].match(/eveforeval/) && !link[0].match(/trax/) && !link[0].match(/b/))
{
if (tt == null) {
tt = document.createElement('div');
tt.setAttribute('id', id);
tt.style.position = 'absolute';
tt.style.display = 'block';
t = document.createElement('div');
t.setAttribute('id', id + 'top');
t.style.display = 'block';
t.style.height = '5px';
t.style.marginLeft = '5px';
t.style.overflow = 'hidden';
c = document.createElement('div');
c.setAttribute('id', id + 'cont');
c.style.display = 'block';
c.style.padding = '2px 12px 3px 7px';
c.style.marginLeft = '5px';
c.style.background = '#666';
c.style.color = '#FFF';
b = document.createElement('div');
b.setAttribute('id', id + 'bot');
b.style.display = 'block';
b.style.height = '5px';
b.style.marginLeft = '5px';
b.style.overflow = 'hidden';
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = function(e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';};
}
tt.style.display = 'block';
var str = "";
var currenttag = "";
var parenttag = "";
var tooltip = "";
var flag = 0;
// var chk = getRootElement(e.srcElement.parentNode);
var chk = e.srcElement.parentNode;
/*creating contents of parent tag if it exists*/
if(chk != null)
{
var parenttag = "<" + chk.nodeName;
for (var i = 0; i < chk.attributes.length; i++) {
var attrib = chk.attributes[i];
if(attrib.value == "")
parenttag = parenttag + " " + attrib.name;
else
parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
parenttag = parenttag + " ";
}
parenttag = trim(parenttag);
tooltip = parenttag + ">" + "\n\n";
}
/*creating contents of current tag*/
currenttag = "<" + e.srcElement.nodeName;
if(e.srcElement.attributes.length == 0)
flag = 0;
for (var i = 0; i < e.srcElement.attributes.length; i++)
{
var attrib = e.srcElement.attributes[i];
if(attrib.value == "")
currenttag = currenttag + " " + attrib.name;
else
{
flag = 1;
currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
currenttag = currenttag + " ";
}
}
currenttag = trim(currenttag);
currenttag = currenttag + ">";
currenttag = currenttag + e.srcElement.innerHTML;
currenttag = currenttag + "</" ;
currenttag = currenttag + e.srcElement.nodeName;
currenttag = currenttag + ">";
tooltip = tooltip + currenttag;
tooltip = tooltip.toLowerCase();
if(currenttag == "" || flag == 0)
return;
c.innerText = tooltip;
tt.style.width = w ? w + 'px' : 'auto';
if (!w && ie) {
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
h = parseInt(tt.offsetHeight);
clearInterval(tt.timer);
tt.timer = setInterval(function ()
{ var a = alpha;
var d = 1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none' }
} }, timer);
}
}//end onmousedown
document.onmouseout = function()
{
clearInterval(tt.timer);
tt.timer = setInterval(function () {
var a = alpha;
var d = -1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none'; }
} }, timer);
}
function trim(s) {
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s;
}