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;
}
Related
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)
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();
}
}
How can I add a fade effect in this javascript?
I try to make fade or slide effect in this script but not working.
my idea is made slideshow effect in my wordpress page. i don't want use plugin because my page is very slow and a try to make very optimized with this javascript
var ultimateshow = new Array()
//ultimateshow[x]=["#", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0] = ['image1.jpg', '#']
ultimateshow[1] = ['image2.jpg', '#']
var slidewidth = "980px" // width
var slideheight = "250px" // height
var slidecycles = "2" //
var randomorder = "no" //
var preloadimages = "yes" //preload images? "yes" or "no"
var slidebgcolor = 'white'
var slidedelay = 3000
var ie = document.all
var dom = document.getElementById
var curcycle = 0
if (preloadimages == "yes") {
for (i = 0; i < ultimateshow.length; i++) {
var cacheimage = new Image()
cacheimage.src = ultimateshow[i][0]
}
}
var currentslide = 0
function randomize(targetarray) {
ultimateshowCopy = new Array()
var the_one
var z = 0
while (z < targetarray.length) {
the_one = Math.floor(Math.random() * targetarray.length)
if (targetarray[the_one] != "_selected!") {
ultimateshowCopy[z] = targetarray[the_one]
targetarray[the_one] = "_selected!"
z++
}
}
}
if (randomorder == "yes")
randomize(ultimateshow)
else
ultimateshowCopy = ultimateshow
function rotateimages() {
curcycle = (currentslide == 0) ? curcycle + 1 : curcycle
ultcontainer = '<center>'
if (ultimateshowCopy[currentslide][1] != "") ultcontainer += '<a href="' + ultimateshowCopy[currentslide][1] + '" target="' + ultimateshowCopy[currentslide][2] + '">'
ultcontainer += '<img src="' + ultimateshowCopy[currentslide][0] + '" border="0">'
if (ultimateshowCopy[currentslide][1] != "")
ultcontainer += '</a>'
ultcontainer += '</center>'
if (ie || dom)
crossrotateobj.innerHTML = ultcontainer
if (currentslide == ultimateshow.length - 1)
currentslide = 0
else
currentslide++
if (curcycle == parseInt(slidecycles) && currentslide == 0)
return
setTimeout("rotateimages()", slidedelay)
}
if (ie || dom)
document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + '; background-color:' + slidebgcolor + '"></div>')
function start_slider() {
crossrotateobj = dom ? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie || dom)
window.onload = start_slider
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>');