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
Related
I'm using blade pagination for my project.
The pagination is working fine.
Now I want to make like,
The data-page should start from 0,1,2,3... And the label should
starts from 1,2,3,4...
Jquery script
$.fn.bladePagination = function(options) {
if(typeof(options) === 'object' || typeof(options) === 'undefined') {
var settings = $.extend({}, $.fn.bladePagination.defaults, options);
return this.each(function() {
var jqPagination = $(this);
if(jqPagination.hasClass('slice-pagination')) {
createPagination(jqPagination, settings);
initPageClick(jqPagination, settings);
}
});
}
};
/*==============================================
* default options
*==============================================
*/
$.fn.bladePagination.defaults = {
maxPageNum: 5,
firstLabel: '|<', // |<
prevLabel: '<', // <
nextLabel: '>', // >
lastLabel: '>|', // >|
moreLabel: '...',
rebuildAfterClick: false,
clickPage: function(page, jqPagination) {}
};
/*==============================================
* private functions
*==============================================
*/
var createPagination = function(jqPagination, settings) {
var currPage = Number(jqPagination.attr('data-current'));
var totalPage = Number(jqPagination.attr('data-total'));
var pageShowArray = new Array();
//first page number changed into zero
pageShowArray.push({
type: 'page first' + ((1 == currPage) ? ' disabled' : '')
, page: 1
, show: settings.firstLabel
});
//previous page
pageShowArray.push({
type: 'page prev' + ((1 == currPage) ? ' disabled' : '')
, page: (currPage <= 1) ? 1 : (currPage - 1)
, show: settings.prevLabel
});
//page number
var pageNumArray = new Array();
var leftPageNum = (settings.maxPageNum - 1) / 2;
var rightPageNum = settings.maxPageNum - 1 - leftPageNum;
if(currPage - leftPageNum < 1) {
for(var i = leftPageNum; i > 0; i --) {
var page = currPage - i;
if(page < 1) {
rightPageNum ++;
} else {
pageNumArray.push(page);
}
}
pageNumArray.push(currPage);
for(var i = 1; i <= rightPageNum; i ++) {
var page = currPage + i;
if(page > totalPage) break;
pageNumArray.push(page);
}
} else {
for(var i = rightPageNum; i > 0; i --) {
var page = currPage + i;
if(page > totalPage) {
leftPageNum ++;
} else {
pageNumArray.unshift(page);
}
}
pageNumArray.unshift(currPage);
for(var i = 1; i <= leftPageNum; i ++) {
var page = currPage - i;
if(page < 1) break;
pageNumArray.unshift(page);
}
}
if(pageNumArray[0] > 1) {
pageShowArray.push({
type: 'more'
, page: -1
, show: settings.moreLabel
});
}
for(var i = 0; i < pageNumArray.length; i ++) {
var pageNum = pageNumArray[i];
pageShowArray.push({
type: 'page' + ((pageNum == currPage) ? ' active' : '')
, page: pageNum
, show: pageNum
});
}
if(pageNumArray[pageNumArray.length - 1] < totalPage) {
pageShowArray.push({
type: 'more'
, page: -1
, show: settings.moreLabel
});
}
//next page
pageShowArray.push({
type: 'page next' + ((totalPage == currPage) ? ' disabled' : '')
, page: (currPage >= totalPage) ? totalPage : (currPage + 1)
, show: settings.nextLabel
});
//last page
pageShowArray.push({
type: 'page last' + ((totalPage == currPage) ? ' disabled' : '')
, page: totalPage
, show: settings.lastLabel
});
//create page
jqPagination.empty();
for(var i = 0; i < pageShowArray.length; i ++) {
var pageShow = pageShowArray[i];
var html = '<li class="' + pageShow.type + '" data-page="' + pageShow.page + '">' + pageShow.show + '</li>';
jqPagination.append(html);
}
}
var initPageClick = function(jqPagination, settings) {
var jqPageSet = jqPagination.find('li.page');
//event handler
jqPageSet.off('click');
jqPageSet.click(function() {
var jqPage = $(this);
if(! (jqPage.hasClass('active') || jqPage.hasClass('disabled'))) {
var page = jqPage.data('page');
settings.clickPage(page, jqPagination);
if(settings.rebuildAfterClick) {
//rebuild
createPagination(jqPagination, settings);
initPageClick(jqPagination, settings);
}
}
});
}
I want to change something here
var html = '<li class="' + pageShow.type + '" data-page="' + pageShow.page + '">' + pageShow.show + '</li>';
I'm using some other library to get images, there the image value start from 0, In that library i can't able to make changes.
i want like this to start like this below
<li data-page='0'>1</li>
<li data-page='1'>2</li>
<li data-page='2'>3</li>
Try this:
var html = '<li class="' + pageShow.type + '" data-page="' + pageShow.page + '">' + (parseInt(pageShow.page)+1) + '</li>';
May be it will work for you.
i want to display TravelTimeHoursDiff and TravelTimeMinutesDiff in double digit now my time is shown as 7:0 i want to display like 07:00
if ($scope.DispatchStatus.ArrivalTime != undefined){
var today = $rootScope.getSysDate().split(" ");
var timeArrival = new Date(today[0] + ' ' + $scope.DispatchStatus.ArrivalTime);
var TravelTime = new Date(today[0] + ' ' + $scope.Route.TravelTime);
var timeArrivalHours = timeArrival.getHours();
var TravelTimeHoursDiff = timeArrivalHours - TravelTime.getHours() ;
var TravelTimeMinutesDiff = (timeArrival.getMinutes() - TravelTime.getMinutes());
if(TravelTimeHoursDiff < 0 || (TravelTimeHoursDiff <= 0 && TravelTimeMinutesDiff < 0) || (TravelTimeHoursDiff == 0 && TravelTimeMinutesDiff == 0)){
$scope.formvalidationbit = $scope.DispatchStatusAddForm[fieldName].$invalid = true;
angular.element('#' + fieldName).addClass('ng-invalid');
angular.element('#' + fieldName).removeClass('ng-valid');
$scope.DispatchStatusAddForm.$valid = false;
var errorbit = 1;
}else{
if (isNaN(TravelTimeHoursDiff)) {
TravelTimeHoursDiff = '--';
}
if (isNaN(TravelTimeMinutesDiff)) {
TravelTimeMinutesDiff = '--';
}
if(TravelTimeMinutesDiff <0){
TravelTimeMinutesDiff = TravelTimeMinutesDiff * (-1);
}
$scope.TravelTime = TravelTimeHoursDiff + ':' + TravelTimeMinutesDiff;
}
}
Just add leading 0 to values smaller then 10, something like:
let addLeadingZero(v){
return v < 10 ? ("0" + v) : v;
}
$scope.TravelTime = addLeadingZero(TravelTimeHoursDiff) + ':' + addLeadingZero(TravelTimeMinutesDiff);
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;
}