Develop Reference

Mouse scroll key not working in Chrome & Firefox on website

Check this website - https://www.eviltech.in/
The mouse scroll key is not working in Google Chrome & Mozilla Firefox but it's working fine in Microsoft Edge.
My webpage won't scroll down
As suggested above the scroll key might not work if the CSS has overflow:hidden to body or html but that's not the case here. The scrollbar is visible in all browsers and the website can be scrolled by dragging the scrollbar.
Is there any other case where this might happen? What is the solution for that?
UPDATE:
The problem has been found in a javascript file wow.js by #ChrisHappy
I can't remove the entire wow.js from the website as it performs crucial animations required on the website.
Here are the wow.js codes:
(function() {
var MutationObserver, Util, WeakMap, __bind = function(fn, me) {
return function() {
return fn.apply(me, arguments)
}
},
__indexOf = [].indexOf || function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item) return i
}
return -1
};
Util = (function() {
function Util() {}
Util.prototype.extend = function(custom, defaults) {
var key, value;
for (key in custom) {
value = custom[key];
if (value != null) {
defaults[key] = value
}
}
return defaults
};
Util.prototype.isMobile = function(agent) {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
};
return Util
})();
WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
function WeakMap() {
this.keys = [];
this.values = []
}
WeakMap.prototype.get = function(key) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
if (item === key) {
return this.values[i]
}
}
};
WeakMap.prototype.set = function(key, value) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
if (item === key) {
this.values[i] = value;
return
}
}
this.keys.push(key);
return this.values.push(value)
};
return WeakMap
})());
MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
function MutationObserver() {
console.warn('MutationObserver is not supported by your browser.');
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.')
}
MutationObserver.notSupported = !0;
MutationObserver.prototype.observe = function() {};
return MutationObserver
})());
this.WOW = (function() {
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: !0,
live: !0
};
function WOW(options) {
if (options == null) {
options = {}
}
this.scrollCallback = __bind(this.scrollCallback, this);
this.scrollHandler = __bind(this.scrollHandler, this);
this.start = __bind(this.start, this);
this.scrolled = !0;
this.config = this.util().extend(options, this.defaults);
this.animationNameCache = new WeakMap()
}
WOW.prototype.init = function() {
var _ref;
this.element = window.document.documentElement;
if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
this.start()
} else {
document.addEventListener('DOMContentLoaded', this.start)
}
return this.finished = []
};
WOW.prototype.start = function() {
var box, _i, _len, _ref;
this.stopped = !1;
this.boxes = this.element.getElementsByClassName(this.config.boxClass);
this.all = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box)
}
return _results
}).call(this);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle()
} else {
_ref = this.boxes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
this.applyStyle(box, !0)
}
window.addEventListener('scroll', this.scrollHandler, !1);
window.addEventListener('resize', this.scrollHandler, !1);
this.interval = setInterval(this.scrollCallback, 50)
}
}
if (this.config.live) {
return new MutationObserver((function(_this) {
return function(records) {
var node, record, _j, _len1, _results;
_results = [];
for (_j = 0, _len1 = records.length; _j < _len1; _j++) {
record = records[_j];
_results.push((function() {
var _k, _len2, _ref1, _results1;
_ref1 = record.addedNodes || [];
_results1 = [];
for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
node = _ref1[_k];
_results1.push(this.doSync(node))
}
return _results1
}).call(_this))
}
return _results
}
})(this)).observe(document.body, {
childList: !0,
subtree: !0
})
}
};
WOW.prototype.stop = function() {
this.stopped = !0;
window.removeEventListener('scroll', this.scrollHandler, !1);
window.removeEventListener('resize', this.scrollHandler, !1);
if (this.interval != null) {
return clearInterval(this.interval)
}
};
WOW.prototype.sync = function(element) {
if (MutationObserver.notSupported) {
return this.doSync(this.element)
}
};
WOW.prototype.doSync = function(element) {
var box, _i, _len, _ref, _results;
if (!this.stopped) {
element || (element = this.element);
element = element.parentNode || element;
_ref = element.getElementsByClassName(this.config.boxClass);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (__indexOf.call(this.all, box) < 0) {
this.applyStyle(box, !0);
this.boxes.push(box);
this.all.push(box);
_results.push(this.scrolled = !0)
} else {
_results.push(void 0)
}
}
return _results
}
};
WOW.prototype.show = function(box) {
this.applyStyle(box);
return box.className = "" + box.className + " " + this.config.animateClass
};
WOW.prototype.applyStyle = function(box, hidden) {
var delay, duration, iteration;
duration = box.getAttribute('data-wow-duration');
delay = box.getAttribute('data-wow-delay');
iteration = box.getAttribute('data-wow-iteration');
return this.animate((function(_this) {
return function() {
return _this.customStyle(box, hidden, duration, delay, iteration)
}
})(this))
};
WOW.prototype.animate = (function() {
if ('requestAnimationFrame' in window) {
return function(callback) {
return window.requestAnimationFrame(callback)
}
} else {
return function(callback) {
return callback()
}
}
})();
WOW.prototype.resetStyle = function() {
var box, _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box.setAttribute('style', 'visibility: visible;'))
}
return _results
};
WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
if (hidden) {
this.cacheAnimationName(box)
}
box.style.visibility = hidden ? 'hidden' : 'visible';
if (duration) {
this.vendorSet(box.style, {
animationDuration: duration
})
}
if (delay) {
this.vendorSet(box.style, {
animationDelay: delay
})
}
if (iteration) {
this.vendorSet(box.style, {
animationIterationCount: iteration
})
}
this.vendorSet(box.style, {
animationName: hidden ? 'none' : this.cachedAnimationName(box)
});
return box
};
WOW.prototype.vendors = ["moz", "webkit"];
WOW.prototype.vendorSet = function(elem, properties) {
var name, value, vendor, _results;
_results = [];
for (name in properties) {
value = properties[name];
elem["" + name] = value;
_results.push((function() {
var _i, _len, _ref, _results1;
_ref = this.vendors;
_results1 = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
_results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value)
}
return _results1
}).call(this))
}
return _results
};
WOW.prototype.vendorCSS = function(elem, property) {
var result, style, vendor, _i, _len, _ref;
style = window.getComputedStyle(elem);
result = style.getPropertyCSSValue(property);
_ref = this.vendors;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property)
}
return result
};
WOW.prototype.animationName = function(box) {
var animationName;
try {
animationName = this.vendorCSS(box, 'animation-name').cssText
} catch (_error) {
animationName = window.getComputedStyle(box).getPropertyValue('animation-name')
}
if (animationName === 'none') {
return ''
} else {
return animationName
}
};
WOW.prototype.cacheAnimationName = function(box) {
return this.animationNameCache.set(box, this.animationName(box))
};
WOW.prototype.cachedAnimationName = function(box) {
return this.animationNameCache.get(box)
};
WOW.prototype.scrollHandler = function() {
return this.scrolled = !0
};
WOW.prototype.scrollCallback = function() {
var box;
if (this.scrolled) {
this.scrolled = !1;
this.boxes = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (!(box)) {
continue
}
if (this.isVisible(box)) {
this.show(box);
continue
}
_results.push(box)
}
return _results
}).call(this);
if (!(this.boxes.length || this.config.live)) {
return this.stop()
}
}
};
WOW.prototype.offsetTop = function(element) {
var top;
while (element.offsetTop === void 0) {
element = element.parentNode
}
top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop
}
return top
};
WOW.prototype.isVisible = function(box) {
var bottom, offset, top, viewBottom, viewTop;
offset = box.getAttribute('data-wow-offset') || this.config.offset;
viewTop = window.pageYOffset;
viewBottom = viewTop + this.element.clientHeight - offset;
top = this.offsetTop(box);
bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop
};
WOW.prototype.util = function() {
return this._util || (this._util = new Util())
};
WOW.prototype.disabled = function() {
return !this.config.mobile && this.util().isMobile(navigator.userAgent)
};
return WOW
})()
}).call(this)
Is it possible to remove the lines of codes which are affecting the scrolling without affecting other functionalities here?
UPDATE 2: I tried removing entire wow.js but still the scrolling was not fixed and lots of vital functions stopped working.
That means the issue is not with the wow.js file.
Is there anything else that might be causing this issue?

There was problem in the JS file rd-smoothscroll.min.js
Removing the entire JS files has solved the problem.
! function(t, i, o) {
"use strict";
var e = "ontouchstart" in t,
r = ("undefined" != typeof InstallTrigger, "webkitTransform" in i.documentElement.style);
t.requestAnimFrame = function() {
return t.requestAnimationFrame || t.webkitRequestAnimationFrame || t.mozRequestAnimationFrame || t.oRequestAnimationFrame || t.msRequestAnimationFrame || function(i) {
t.setTimeout(i, 1e3 / 60)
}
}(), t.RDSmoothScroll = function() {
this.options = RDSmoothScroll.Defaults, this.animators = [], this.initialize()
}, RDSmoothScroll.Defaults = {
friction: .95,
step: 2,
minDistance: .1
}, RDSmoothScroll.Animator = function(t) {
var i = "html" === t.nodeName.toLowerCase() && r ? t.children[t.children.length - 1] : t;
this.target = t, this.originalTarget = i, this.direction = o, this.currentY = i.scrollTop, this.targetY = i.scrollTop, this.lastY = i.scrollTop, this.delta = 0, this.minY = 0, this.maxY = o, this.isPlaying = !1, this.speed = 0
}, RDSmoothScroll.Animator.prototype.update = function(i) {
var o = t.RDSmoothScroll.instance,
e = i.detail ? -1 * i.detail : i.wheelDelta / 40,
r = 0 > e ? -1 : 1;
r != this.direction && (this.speed = 0, this.direction = r), this.currentY = -this.originalTarget.scrollTop, this.delta = e, this.targetY += e, this.speed += (this.targetY - this.lastY) * o.options.step, this.lastY = this.targetY, this.start()
}, RDSmoothScroll.Animator.prototype.start = function() {
this.isPlaying || (this.isPlaying = !0, t.jQuery && t.jQuery(this.originalTarget).stop(), this.play())
}, RDSmoothScroll.Animator.prototype.play = function() {
var t = this;
this.isPlaying && (requestAnimFrame(function() {
t.play()
}), this.render())
}, RDSmoothScroll.Animator.prototype.stop = function() {
this.isPlaying && (this.speed = 0, this.isPlaying = !1)
}, RDSmoothScroll.Animator.prototype.render = function() {
var i = t.RDSmoothScroll.instance;
Math.abs(this.originalTarget.scrollTop - -this.currentY) > Math.abs(this.delta) && Math.abs(this.originalTarget.scrollTop - -this.currentY) > 1 && this.stop(), this.speed < -i.options.minDistance || this.speed > i.options.minDistance ? (this.currentY = this.currentY + this.speed, this.currentY > this.minY ? this.currentY = this.speed = 0 : this.currentY < this.maxY && (this.speed = 0, this.currentY = this.maxY), this.originalTarget.scrollTop = -this.currentY, this.speed *= i.options.friction) : this.stop()
}, RDSmoothScroll.prototype.initialize = function() {
t.addEventListener("mousewheel", this.onWheel), t.addEventListener("DOMMouseScroll", this.onWheel)
}, RDSmoothScroll.prototype.onWheel = function(i) {
if (!i.ctrlKey) {
var o, e, r = t.RDSmoothScroll.instance;
for (i.preventDefault(), o = i.target; null !== o && "html" != o.nodeName.toLocaleLowerCase() && !(("auto" == t.getComputedStyle(o).getPropertyValue("overflow") || "scroll" == t.getComputedStyle(o).getPropertyValue("overflow")) && o.scrollHeight > o.clientHeight && o.clientHeight > 0);) o = o.parentNode;
if (null != o) {
e = r.isAnimator(o) ? r.getAnimator(o) : r.createAnimator(o);
for (var n in r.animators) r.animators[n] !== e && r.animators[n].stop && r.animators[n].stop();
e.update(i)
}
}
}, RDSmoothScroll.prototype.createAnimator = function(t) {
return this.animators[this.animators.push(new RDSmoothScroll.Animator(t)) - 1]
}, RDSmoothScroll.prototype.isAnimator = function(t) {
for (var i in this.animators)
if (this.animators[i].target === t) return !0;
return !1
}, RDSmoothScroll.prototype.getAnimator = function(t) {
for (var i in this.animators)
if (this.animators[i].target === t) return this.animators[i];
return o
}, e || (t.RDSmoothScroll.instance = new RDSmoothScroll)
}(window, document)

Tested in:
Google Chrome
Firefox
Safari
All of those browsers mentioned above work fine.

ASP.NET referencing a javascript function

I have an ASP.NET page, written in VB.NET, that I'm trying to use javascript on. The script takes the value from one listbox and inserts it into another list box. I'm using a master page, which I'm pretty sure is the issue.
Here's the javascript:
function OT_transferLeft() { moveSelectedOptions(this.right, this.left, this.autoSort, this.staticOptionRegex); this.update(); }
function OT_transferRight() { moveSelectedOptions(this.left, this.right, this.autoSort, this.staticOptionRegex); this.update(); }
function OT_transferAllLeft() { moveAllOptions(this.right, this.left, this.autoSort, this.staticOptionRegex); this.update(); }
function OT_transferAllRight() { moveAllOptions(this.left, this.right, this.autoSort, this.staticOptionRegex); this.update(); }
function OT_saveRemovedLeftOptions(f) { this.removedLeftField = f; }
function OT_saveRemovedRightOptions(f) { this.removedRightField = f; }
function OT_saveAddedLeftOptions(f) { this.addedLeftField = f; }
function OT_saveAddedRightOptions(f) { this.addedRightField = f; }
function OT_saveNewLeftOptions(f) { this.newLeftField = f; }
function OT_saveNewRightOptions(f) { this.newRightField = f; }
function OT_update() {
var removedLeft = new Object();
var removedRight = new Object();
var addedLeft = new Object();
var addedRight = new Object();
var newLeft = new Object();
var newRight = new Object();
for (var i = 0; i < this.left.options.length; i++) {
var o = this.left.options[i];
newLeft[o.value] = 1;
if (typeof (this.originalLeftValues[o.value]) == "undefined") {
addedLeft[o.value] = 1;
removedRight[o.value] = 1;
}
}
for (var i = 0; i < this.right.options.length; i++) {
var o = this.right.options[i];
newRight[o.value] = 1;
if (typeof (this.originalRightValues[o.value]) == "undefined") {
addedRight[o.value] = 1;
removedLeft[o.value] = 1;
}
}
if (this.removedLeftField != null) { this.removedLeftField.value = OT_join(removedLeft, this.delimiter); }
if (this.removedRightField != null) { this.removedRightField.value = OT_join(removedRight, this.delimiter); }
if (this.addedLeftField != null) { this.addedLeftField.value = OT_join(addedLeft, this.delimiter); }
if (this.addedRightField != null) { this.addedRightField.value = OT_join(addedRight, this.delimiter); }
if (this.newLeftField != null) { this.newLeftField.value = OT_join(newLeft, this.delimiter); }
if (this.newRightField != null) { this.newRightField.value = OT_join(newRight, this.delimiter); }
}
function OT_join(o, delimiter) {
var val; var str = "";
for (val in o) {
if (str.length > 0) { str = str + delimiter; }
str = str + val;
}
return str;
}
function OT_setDelimiter(val) { this.delimiter = val; }
function OT_setAutoSort(val) { this.autoSort = val; }
function OT_setStaticOptionRegex(val) { this.staticOptionRegex = val; }
function OT_init(theform) {
this.form = theform;
if (!theform[this.left]) { alert("OptionTransfer init(): Left select list does not exist in form!"); return false; }
if (!theform[this.right]) { alert("OptionTransfer init(): Right select list does not exist in form!"); return false; }
this.left = theform[this.left];
this.right = theform[this.right];
for (var i = 0; i < this.left.options.length; i++) {
this.originalLeftValues[this.left.options[i].value] = 1;
}
for (var i = 0; i < this.right.options.length; i++) {
this.originalRightValues[this.right.options[i].value] = 1;
}
if (this.removedLeftField != null) { this.removedLeftField = theform[this.removedLeftField]; }
if (this.removedRightField != null) { this.removedRightField = theform[this.removedRightField]; }
if (this.addedLeftField != null) { this.addedLeftField = theform[this.addedLeftField]; }
if (this.addedRightField != null) { this.addedRightField = theform[this.addedRightField]; }
if (this.newLeftField != null) { this.newLeftField = theform[this.newLeftField]; }
if (this.newRightField != null) { this.newRightField = theform[this.newRightField]; }
this.update();
}
// -------------------------------------------------------------------
// OptionTransfer()
// This is the object interface.
// -------------------------------------------------------------------
function OptionTransfer(l, r) {
this.form = null;
this.left = l;
this.right = r;
this.autoSort = true;
this.delimiter = ",";
this.staticOptionRegex = "";
this.originalLeftValues = new Object();
this.originalRightValues = new Object();
this.removedLeftField = null;
this.removedRightField = null;
this.addedLeftField = null;
this.addedRightField = null;
this.newLeftField = null;
this.newRightField = null;
this.transferLeft = OT_transferLeft;
this.transferRight = OT_transferRight;
this.transferAllLeft = OT_transferAllLeft;
this.transferAllRight = OT_transferAllRight;
this.saveRemovedLeftOptions = OT_saveRemovedLeftOptions;
this.saveRemovedRightOptions = OT_saveRemovedRightOptions;
this.saveAddedLeftOptions = OT_saveAddedLeftOptions;
this.saveAddedRightOptions = OT_saveAddedRightOptions;
this.saveNewLeftOptions = OT_saveNewLeftOptions;
this.saveNewRightOptions = OT_saveNewRightOptions;
this.setDelimiter = OT_setDelimiter;
this.setAutoSort = OT_setAutoSort;
this.setStaticOptionRegex = OT_setStaticOptionRegex;
this.init = OT_init;
this.update = OT_update;
}
var lb1 = document.getElementById("<%=lbSiteType.ClientID%>");
var lb2 = document.getElementById("<%=lbSelectedSiteType.ClientID%>");
var opt = new OptionTransfer(lb1, lb2);
alert(opt);
opt.setAutoSort(true);
opt.setDelimiter(",");
opt.setStaticOptionRegex("^(Bill|Bob|Matt)$");
opt.saveRemovedLeftOptions("removedLeft");
opt.saveRemovedRightOptions("removedRight");
opt.saveAddedLeftOptions("addedLeft");
opt.saveAddedRightOptions("addedRight");
opt.saveNewLeftOptions("newLeft");
opt.saveNewRightOptions("newRight");
and here's the code from the control:
<asp:Button ID="btnMoveAll" Text=" >> " CssClass="button7" CausesValidation="false"
ONCLICK="opt.transferRight()"
runat="server" /><br />
In short, it doesn't work. I keep getting an 'opt' is not a member of the page. Can someone explain how I can properly call this code?

To invoke client Methods(javascript) use OnClientClick
<asp:Button ID="btnMoveAll" Text="" CssClass="button7" CausesValidation="false"
OnClientClick="opt.transferRight()"
runat="server" />

Cannot read property `attachEvent` of null

I have a JavaScript file using speechSynthesis.
I keep having this error:
"Cannot read property 'attachEvent' of null" in line 129:
Here it is:
speech.bind = function(event, element, callback) {
**if (element.attachEvent) {**
element.attachEvent('on'+event, callback )
} else if (window.addEventListener) {
element.addEventListener(event, callback ,false);
};
};
I will put in here the role code in here so anyone can check the entire JavaScript:
var speech_def = speech_def || {
container: "#glb-materia"
,insert_before: true
,ico: "http://edg-1-1242075393.us-east-1.elb.amazonaws.com/speech/listen_icon.jpg"
,bt_txt: "OUÇA A REPORTAGEM"
,bt_stop: "PARAR!"
,source: ".materia-conteudo"
,ignore: [
".foto-legenda"
,".frase-materia"
,"script"
,"style"
,"#speech"
,".sub-header"
,".chamada-materia"
,".data-autor"
,".box-tags"
,".saibamais"
]
};
var speech = speech || {};
//Polyfill remove()
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for (var i = 0, len = this.length; i < len; i++) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
};
//Polyfill innerText
if ( (!('innerText' in document.createElement('a'))) && ('getSelection' in window) ) {
HTMLElement.prototype.__defineGetter__("innerText", function() {
var selection = window.getSelection(),
ranges = [],
str;
for (var i = 0; i < selection.rangeCount; i++) {
ranges[i] = selection.getRangeAt(i);
}
selection.removeAllRanges();
selection.selectAllChildren(this);
str = selection.toString();
selection.removeAllRanges();
for (var i = 0; i < ranges.length; i++) {
selection.addRange(ranges[i]);
}
return str;
})
}
speech.iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
speech.Android = /(Android)/g.test( navigator.userAgent );
speech.include = function() {
var bt = ""
bt += '<div id="speech" '
+'title="'+speech_def.bt_txt+'" '
+'style="'
+'display: none; '
+'margin: 5px; '
+'font-size: 12px; '
+'font-style: italic; '
+'color: #bbbbbb; '
+'cursor: pointer;"'
+'>';
bt += '<img style="width: 25px; height: 25px;" src="'+speech_def.ico+'"> ';
bt += '<i style="vertical-align: top; line-height: 28px;">'+speech_def.bt_txt+'</i>';
bt += '</div>';
var button = document.createElement("SPAN");
button.innerHTML = bt;
var box = document.querySelectorAll(speech_def.container)[0];
if (speech_def.insert_before) {
box.insertBefore(button,box.firstChild);
} else {
box.appendChild(button)
};
};
speech.stop = function() {
window.speechSynthesis.cancel();
}
speech.stop();
speech.content = function() {
var result = "";
var boxes = speech_def.source.split(",");
boxes.reverse();
for (var n = boxes.length - 1; n >= 0; n--) {
var doc = document.querySelector(boxes[n]);
if (doc) {
doc = doc.cloneNode(true);
for (var i = speech_def.ignore.length - 1; i >= 0; i--) {
var els = doc.querySelectorAll(speech_def.ignore[i]);
for (var j = els.length - 1; j >= 0; j--) {
els[j].remove();
};
};
result += "." + doc.innerText;
};
};
return result;
};
speech.start_speech = function() {
var content = speech.content();
// Note: some voices don't support altering params
if (!speech.Android) speech.msg.voice = speech.voices[0];
// msg.voiceURI = 'native';
speech.msg.volume = speech.iOS?1:1; // 0 to 1
speech.msg.rate = speech.iOS?0.6:1; // 0.1 to 10
speech.msg.pitch = speech.iOS?1:1; // 0 to 2
speech.msg.text = content;
speech.msg.lang = 'pt-BR';
speech.msg.onend = function(e) {
// console.log('Finished in ' + event.elapsedTime + ' seconds.');
};
window.speechSynthesis.speak(speech.msg);
};
speech.read = function(){}; //chrome problem
speech.bind = function(event, element, callback) {
if (element.attachEvent) {
element.attachEvent('on'+event, callback )
} else if (window.addEventListener) {
element.addEventListener(event, callback ,false);
};
};
speech.click = function(e){
event.stopPropagation()
if (window.event) window.event.cancelBubble = true;
var control = document.getElementById("speech");
var label;
if (window.speechSynthesis.speaking) {
label = speech_def.bt_txt;
speech.stop();
} else {
label = speech_def.bt_stop;
speech.start_speech();
};
control.querySelector("i").innerHTML = label;
}
speech.bind_button = function() {
var control = document.getElementById("speech");
speech.bind("click",control,speech.click);
};
speech.show_button = function() {
if (!speech.on_page) {
speech.on_page = true;
speech.include();
speech.bind_button();
};
var control = document.getElementById("speech");
control.style.display="inline-block";
};
speech.test_portuguese = function() {
speech.voices = [];
window.speechSynthesis.getVoices().forEach(function(voice) {
if (voice.lang == "pt-BR") {
speech.voices.push(voice);
};
});
if (speech.Android) {
var control = document.getElementById("speech");
var complement = (speech.voices.length > 0)?"*":"";
// control.querySelector("i").innerHTML = "OUÇA A REPORTAGEM"+complement;
return true;
} else {
return (speech.voices.length > 0);
};
};
speech.start = function() {
if ('speechSynthesis' in window) {
speech.msg = new SpeechSynthesisUtterance();
if (speech.test_portuguese()) {
speech.show_button();
} else {
window.speechSynthesis.onvoiceschanged = function() {
if (speech.test_portuguese()) {
speech.show_button();
};
};
};
speech.bind_button();
};
};
speech.start();
speech.bind("load",window,speech.start)
How can i solve this problem?
Thanks so much.

The problem is that element is null at that point.
Probably, because there is no element with id="speech", so control in null in this code:
speech.bind_button = function() {
var control = document.getElementById("speech");
speech.bind("click",control,speech.click);
};

bootstrap popover by hover in image picker

I'm trying to put Popover and Image Picker together.
The image picker function turn select in html into image and allow users to select.
The problem is that I dont have the code of image in html so I cannot add the popover thing in it.
How do I change javascript of the image picker so that when users hover over the div or the image, bootstrap popover will show? And when I leave the div / image, the popover will disappear.
I have over 10 image and each of them have different text.
The code of image is created by the function, but i do not understand the code in the function
JavaScript of Image Picker:
(function() {
var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
jQuery.fn.extend({
imagepicker: function(opts) {
if (opts == null) {
opts = {};
}
return this.each(function() {
var select;
select = jQuery(this);
if (select.data("picker")) {
select.data("picker").destroy();
}
select.data("picker", new ImagePicker(this, sanitized_options(opts)));
if (opts.initialized != null) {
return opts.initialized.call(select.data("picker"));
}
});
}
});
sanitized_options = function(opts) {
var default_options;
default_options = {
hide_select: true,
show_label: false,
initialized: void 0,
changed: void 0,
clicked: void 0,
selected: void 0,
limit: void 0,
limit_reached: void 0
};
return jQuery.extend(default_options, opts);
};
both_array_are_equal = function(a, b) {
return jQuery(a).not(b).length === 0 && jQuery(b).not(a).length === 0;
};
ImagePicker = (function() {
function ImagePicker(select_element, opts) {
this.opts = opts != null ? opts : {};
this.sync_picker_with_select = __bind(this.sync_picker_with_select, this);
this.select = jQuery(select_element);
this.multiple = this.select.attr("multiple") === "multiple";
if (this.select.data("limit") != null) {
this.opts.limit = parseInt(this.select.data("limit"));
}
this.build_and_append_picker();
}
ImagePicker.prototype.destroy = function() {
var option, _i, _len, _ref;
_ref = this.picker_options;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
option.destroy();
}
this.picker.remove();
this.select.unbind("change");
this.select.removeData("picker");
return this.select.show();
};
ImagePicker.prototype.build_and_append_picker = function() {
var _this = this;
if (this.opts.hide_select) {
this.select.hide();
}
this.select.change(function() {
return _this.sync_picker_with_select();
});
if (this.picker != null) {
this.picker.remove();
}
this.create_picker();
this.select.after(this.picker);
return this.sync_picker_with_select();
};
ImagePicker.prototype.sync_picker_with_select = function() {
var option, _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_selected()) {
_results.push(option.mark_as_selected());
} else {
_results.push(option.unmark_as_selected());
}
}
return _results;
};
ImagePicker.prototype.create_picker = function() {
this.picker = jQuery("<ul class='thumbnails image_picker_selector'></ul>");
this.picker_options = [];
this.recursively_parse_option_groups(this.select, this.picker);
return this.picker;
};
ImagePicker.prototype.recursively_parse_option_groups = function(scoped_dom, target_container) {
var container, option, option_group, _i, _j, _len, _len1, _ref, _ref1, _results;
_ref = scoped_dom.children("optgroup");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option_group = _ref[_i];
option_group = jQuery(option_group);
container = jQuery("<ul></ul>");
container.append(jQuery("<li class='group_title'>" + (option_group.attr("label")) + "</li>"));
target_container.append(jQuery("<li>").append(container));
this.recursively_parse_option_groups(option_group, container);
}
_ref1 = (function() {
var _k, _len1, _ref1, _results1;
_ref1 = scoped_dom.children("option");
_results1 = [];
for (_k = 0, _len1 = _ref1.length; _k < _len1; _k++) {
option = _ref1[_k];
_results1.push(new ImagePickerOption(option, this, this.opts));
}
return _results1;
}).call(this);
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
option = _ref1[_j];
this.picker_options.push(option);
if (!option.has_image()) {
continue;
}
_results.push(target_container.append(option.node));
}
return _results;
};
ImagePicker.prototype.has_implicit_blanks = function() {
var option;
return ((function() {
var _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_blank() && !option.has_image()) {
_results.push(option);
}
}
return _results;
}).call(this)).length > 0;
};
ImagePicker.prototype.selected_values = function() {
if (this.multiple) {
return this.select.val() || [];
} else {
return [this.select.val()];
}
};
ImagePicker.prototype.toggle = function(imagepicker_option) {
var new_values, old_values, selected_value;
old_values = this.selected_values();
selected_value = imagepicker_option.value().toString();
if (this.multiple) {
if (__indexOf.call(this.selected_values(), selected_value) >= 0) {
new_values = this.selected_values();
new_values.splice(jQuery.inArray(selected_value, old_values), 1);
this.select.val([]);
this.select.val(new_values);
} else {
if ((this.opts.limit != null) && this.selected_values().length >= this.opts.limit) {
if (this.opts.limit_reached != null) {
this.opts.limit_reached.call(this.select);
}
} else {
this.select.val(this.selected_values().concat(selected_value));
}
}
} else {
if (this.has_implicit_blanks() && imagepicker_option.is_selected()) {
this.select.val("");
} else {
this.select.val(selected_value);
}
}
if (!both_array_are_equal(old_values, this.selected_values())) {
this.select.change();
if (this.opts.changed != null) {
return this.opts.changed.call(this.select, old_values, this.selected_values());
}
}
};
return ImagePicker;
})();
ImagePickerOption = (function() {
function ImagePickerOption(option_element, picker, opts) {
this.picker = picker;
this.opts = opts != null ? opts : {};
this.clicked = __bind(this.clicked, this);
this.option = jQuery(option_element);
this.create_node();
}
ImagePickerOption.prototype.destroy = function() {
return this.node.find(".thumbnail").unbind();
};
ImagePickerOption.prototype.has_image = function() {
return this.option.data("img-src") != null;
};
ImagePickerOption.prototype.is_blank = function() {
return !((this.value() != null) && this.value() !== "");
};
ImagePickerOption.prototype.is_selected = function() {
var select_value;
select_value = this.picker.select.val();
if (this.picker.multiple) {
return jQuery.inArray(this.value(), select_value) >= 0;
} else {
return this.value() === select_value;
}
};
ImagePickerOption.prototype.mark_as_selected = function() {
return this.node.find(".thumbnail").addClass("selected");
};
ImagePickerOption.prototype.unmark_as_selected = function() {
return this.node.find(".thumbnail").removeClass("selected");
};
ImagePickerOption.prototype.value = function() {
return this.option.val();
};
ImagePickerOption.prototype.label = function() {
if (this.option.data("img-label")) {
return this.option.data("img-label");
} else {
return this.option.text();
}
};
ImagePickerOption.prototype.clicked = function() {
this.picker.toggle(this);
if (this.opts.clicked != null) {
this.opts.clicked.call(this.picker.select, this);
}
if ((this.opts.selected != null) && this.is_selected()) {
return this.opts.selected.call(this.picker.select, this);
}
};
ImagePickerOption.prototype.create_node = function() {
var image, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
thumbnail = jQuery("<div class='thumbnail'>");
thumbnail.click({
option: this
}, function(event) {
return event.data.option.clicked();
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
return ImagePickerOption;
})();
}).call(this);
Thank you for your help!

I understand more what you are looking for. Unfortunately I think you are going to have to use javascript to apply the pop-over because this elements are added to the DOM dynamically.
With one line of code you can add an ID to each image:
...
ImagePickerOption.prototype.create_node = function() {
var image, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
//**ADD THIS LINE**
image.attr("id", this.option.data("img-id"));
//*****************
thumbnail = jQuery("<div class='thumbnail'>");
thumbnail.click({
option: this
}, function(event) {
return event.data.option.clicked();
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
...
In you options tag you can now do:
<option
data-img-src='http://www.example.com/image.jpg'
data-img-id='picture1'>
This will allow you do add the popover through javascript like so:
$('#picture1').popover({ content: 'Picture 1 Message' });
Important Note: Use the I imagepicker initialized callback method to apply your popovers, this will ensure your elements exist on the DOM.

convert prototype script to jquery script

bottom code convert digit in text input to Farsi language digit and mirror .
I need convert prototype to jquery,please help me
String.prototype.toFaDigit = function() {
return this.replace(/\d+/g, function(digit) {
var ret = '';
for (var i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) + 1728);
}
return ret;
});
};
String.prototype.toEnDigit = function() {
return this.replace(/[\u06F0-\u06F9]+/g, function(digit) {
var ret = '';
for (var i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) - 1728);
}
return ret;
});
};
function ChekNumLang_ChekBox(MainTextFieldName) {
var fieldObj = document.getElementById(MainTextFieldName);
if (document.getElementById("FarsiNum").checked) {
fieldObj.value = fieldObj.value.toFaDigit();
}
else {
fieldObj.value = fieldObj.value.toEnDigit();
}

If it is upto me I'll be doing something like
StringUtils = {};
StringUtils.toFaDigit = function(string) {
return string.replace(/\d+/g, function(digit) {
var ret = '';
for (var i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) + 1728);
}
return ret;
});
};
StringUtils.toEnDigit = function(string) {
return string.replace(/[\u06F0-\u06F9]+/g, function(digit) {
var ret = '';
for (var i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) - 1728);
}
return ret;
});
};
function ChekNumLang_ChekBox(MainTextFieldName) {
var fieldObj = $('#' + MainTextFieldName)
if ($('#FarsiNum').is(':checked')) {
fieldObj.val(StringUtils.toFaDigit(fieldObj.val()));
} else {
fieldObj.val(StringUtils.toEnDigit(fieldObj.val()));
}
}