We Keep Coding

QuaggaJs: Browser compatibility issue for barcode scanner

I am using QuaggaJs to scan the barcode. Everything is good and smooth for desktop version of scanner. But it gets broken when coming to mobile version of website and that too mainly on iPhone.
I tested in both safari and Chrome and for different phone it behaves differently. For some phone camera gets hang and for some camera didn't start at all.
Also, the canvas size is not setting up in the parent div. camera is getting outside the DOM.
Here is what I did.
HTML
<div class="scanner-box">
<div id="scanner-container" class="main_scanner"></div>
</div>
JS
$(document).ready(function(){
if($(".scanner-box").length > 0){
var canvas_width = $(".scanner-box").width();
var canvas_height = $(".scanner-box").height();
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner(canvas_width,canvas_height);
}
}
}
var _scannerIsRunning = false;
function startScanner(canvasRatio,canvasHeight) {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: "100%",
height: "100%",
facingMode: "environment"
},
},
decoder: {
readers: [
"ean_reader",
"ean_8_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
},
function (err) {
if (err) {
$("#error").text(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
var barcodeResult = $("#result").text(result.codeResult.code);
var barcode = result.codeResult.code;
if(barcode.toString().length < '13'){
}else{
checkBarCode(barcode,canvasRatio,canvasHeight);
if (_scannerIsRunning) {
Quagga.stop();
}
}
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});
}
CSS
.scanner-box{width:480px;height:320px;background-color:#9a9a9a;position:relative;margin-top:10px;}
#scanner-container{position:relative;height:inherit;}

#scanner-container canvas{
position: absolute;
left : 0px;
top: 0px;
}
this css is just like the sample form https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/file_input/
it makes the canvas area which draws windows cover the camera steam area .

Phaser 3 sprite keyboard.isDown acting strange

I'm trying to create a snake game in Phaser 3. The arrow.(key).isDown is acting strangely and I can't figure out why. If you press a key weather it is up, down, left or right it will not change directions if you press the opposite, it just keeps moving. like if I press down it keeps going down even after I press up. I have been trying to debug it for hours. All the examples pretty much have it set up the same way.
This is my code so far
class mainScene {
preload() {
this.load.image("fruit", "images/fruit.png");
this.load.image("snake", "images/snake.png");
}
create() {
this.score = 0;
this.snake = this.physics.add.sprite(20, 20, "snake");
this.fruit = this.physics.add.sprite(
Phaser.Math.Between(10, 590),
Phaser.Math.Between(10, 590),
"fruit"
);
this.scoreText = this.add.text(500, 5, `Score: ${this.score}`);
this.arrow = this.input.keyboard.createCursorKeys();
//debug
}
update() {
if (this.physics.overlap(this.snake, this.fruit)) {
this.hit();
}
this.snake.setVelocity(0);
if (this.arrow.right.isDown) {
this.snake.setVelocityX(50);
if (this.snake.x > 600) {
this.outOfBounds();
}
} else if (this.arrow.left.isDown) {
this.snake.setVelocityX(-50);
if (this.snake.x < 0) {
this.outOfBounds();
}
}
if (this.arrow.down.isDown) {
this.snake.setVelocityY(50);
if (this.snake.y > 600) {
this.outOfBounds();
}
} else if (this.arrow.up.isDown) {
this.snake.setVelocityY(-50);
if (this.snake.y < 0) {
this.outOfBounds();
}
}
}
hit() {
this.fruit.x = Phaser.Math.Between(10, 590);
this.fruit.y = Phaser.Math.Between(10, 590);
this.score += 1;
this.scoreText.setText(`Score: ${this.score}`);
this.tweens.add({
targets: this.snake,
duration: 200,
scaleX: 1.2,
scaleY: 1.2,
yoyo: true,
});
}
outOfBounds() {
this.score = 0;
this.scoreText.setText(`Score: ${this.score}`);
this.gameOverText = this.add.text(
100,
250,
"You went out of bounds.\nGame Over\nPress Space to continue.",
{ fontSize: "24px" }
);
if (this.arrow.space.isDown) {
this.gameOverText.destroy();
this.scene.restart();
}
}
}
const config = {
type: Phaser.CANVAS,
width: 600,
height: 600,
backgroundColor: 0x000040,
scene: mainScene,
physics: {
default: "arcade",
debug: true,
setBounds: { x: 0, y: 0, width: 600, height: 600 },
},
parent: "game",
};
new Phaser.Game(config);

Pause on hover News Slider/Ticker

I know nothing of jquery/js but i applied a News Slider/Ticker script that I found online to my website home page. The script itself works fine. The html and css parts were easy enough but I can't find the proper way to make it PAUSE ON HOVER. The .js file that came with it is lengthy and has much that I suspect isn't even being used, but as I said, I don't know js. Sorry for the long js file but I don't know what parts are even involved. Can somebody help this complete novice?
(function ($) {
$.simpleTicker = function (elem, options) {
var defaults = {
speed: 1000,
delay: 4000,
easing: 'swing',
effectType: 'slide'
};
var param = {
'ul': '',
'li': '',
'initList': '',
'ulWidth': '',
'liHeight': '',
'tickerHook': 'tickerHook',
'effect': {}
};
var plugin = this;
plugin.settings = {};
var $element = $(elem),
element = elem;
plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);
param.ul = element.children('ul');
param.li = element.find('li');
param.initList = element.find('li:first');
param.ulWidth = param.ul.width();
param.liHeight = param.li.height();
element.css({
height: (param.liHeight)
});
param.li.css({
top: '0',
left: '0',
position: 'absolute'
});
//dispatch
switch (plugin.settings.effectType) {
case 'fade':
plugin.effect.fade();
break;
case 'roll':
plugin.effect.roll();
break;
case 'slide':
plugin.effect.slide();
break;
}
plugin.effect.exec();
};
plugin.effect = {};
plugin.effect.exec = function () {
param.initList.css(param.effect.init.css)
.animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook);
if (element.find(param.li).length > 1) {
setInterval(function () {
element.find('.' + param.tickerHook)
.animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
.next()
.css(param.effect.next.css)
.animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook)
.end()
.appendTo(param.ul)
.css(param.effect.end.css)
.removeClass(param.tickerHook);
}, plugin.settings.delay);
}
};
plugin.effect.fade = function () {
param.effect = {
'init': {
'css': {
display: 'block',
opacity: '0'
},
'animate': {
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
opacity: '0'
}
},
'next': {
'css': {
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
opacity: '1'
}
},
'end': {
'css': {
display: 'none',
zIndex: '98'
}
}
};
};
plugin.effect.roll = function () {
param.effect = {
'init': {
'css': {
top: '3em',
display: 'block',
opacity: '0'
},
'animate': {
top: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
top: '-3em',
opacity: '0'
}
},
'next': {
'css': {
top: '3em',
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
top: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.effect.slide = function () {
param.effect = {
'init': {
'css': {
left: (200),
display: 'block',
opacity: '0'
},
'animate': {
left: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
left: (-(200)),
opacity: '0'
}
},
'next': {
'css': {
left: (param.ulWidth),
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
left: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.init();
};
$.fn.simpleTicker = function (options) {
return this.each(function () {
if (undefined == $(this).data('simpleTicker')) {
var plugin = new $.simpleTiecker(this, options);
$(this).data('simpleTicker', plugin);
}
});
};
})(jQuery);

In my opinion, that library is old and very very complicated to work with. I would personally recommend you move to something along the lines of Slick Slider.
Slick: https://kenwheeler.github.io/slick/
You can use the CDN version <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I was able to recreate your use case in about 5min (with hover pause) with Click. Because it's an actual slider, it's better to wrap things in <div> containers, so I've done so in the fiddle I've shown you. You can tweak the CSS opacity animations to taste, but it's basically what you're doing now.
The Fiddle: Slick Slider

Fitting 4 triangles within a background image

I'm trying to fit 4 triangles in a master template using jquery, html5 and canvas,
I can't seem to make them fit...
Here is what I got so far...
https://jsfiddle.net/ax67r91y/
The code I think is wrong:
ctx.drawImage(part.img, // random image
0, 0, part.w, part.h, // source
part.x,part.y,part.trisize.w,part.trisize.h); // destination
All images should be cut down into 2 forms: a " v " and a " ^ ",
I can move images, but shrinking them to the correct size seems unattainable...
I think I'm close, but it's been hours I'm on this, help is welcome!!!
Expected result:

Is this what you are looking for?
function createSVG(name, attributes) {
var svg_node = document.createElementNS("http://www.w3.org/2000/svg", name);
Object.keys(attributes).forEach(function(key) {
if (key == 'textContent') {
svg_node.textContent = attributes[key];
return;
}
svg_node.setAttribute(key, attributes[key]);
});
return svg_node;
}
Element.prototype.appendSVG = function(name, attributes) {
this.appendChild(createSVG(name, attributes));
}
function Polygons() {
this.canvas = createSVG('svg', {
'version': '1.1',
'shape-rendering': 'geometricPrecision',
'viewBox': '0 0 1589 745',
'class': 'svg-content',
});
this.defs = createSVG('defs', {});
this.canvas.appendChild(this.defs);
this.registerPatterns();
this.drawInnerLayer();
this.drawOuterLayer();
}
Polygons.prototype.registerPatterns = function() {
var patternBottom = createSVG('pattern', {
'height': "100%",
'width': "100%",
'patternContentUnits': "objectBoundingBox",
'viewBox': "0 0 1 1",
'preserveAspectRatio': "xMidYMid slice",
});
var imgBottom = createSVG('image', {
'height': "1",
'width': "1",
'preserveAspectRatio': "xMidYMid slice",
});
var imgLeft = imgBottom.cloneNode(true)
imgLeft.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/1.png");
var imgMiddle = imgBottom.cloneNode(true);
imgMiddle.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/2.png");
var imgRight = imgBottom.cloneNode(true);
imgRight.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/3.png");
imgBottom.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/4.png");
var patternLeft = patternBottom.cloneNode(true);
patternLeft.setAttribute('id', "img-left");
patternLeft.appendChild(imgLeft);
var patternRight = patternBottom.cloneNode(true);
patternRight.setAttribute('id', "img-right");
patternRight.appendChild(imgRight);
var patternMiddle = patternBottom.cloneNode(true);
patternMiddle.setAttribute('id', "img-middle");
patternMiddle.appendChild(imgMiddle);
patternBottom.setAttribute('id', "img-bottom");
patternBottom.appendChild(imgBottom);
this.defs.appendChild(patternLeft);
this.defs.appendChild(patternRight);
this.defs.appendChild(patternMiddle);
this.defs.appendChild(patternBottom);
var patternOverlayer = createSVG('pattern', {
'height': "100%",
'width': "100%",
'patternContentUnits': "objectBoundingBox",
'id': "img-overlayer",
});
var imgOverlayer = createSVG('image', {
'height': "1",
'width': "1",
'preserveAspectRatio': "none",
});
imgOverlayer.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/assets/images/frame-all.png");
patternOverlayer.appendChild(imgOverlayer);
this.defs.appendChild(patternOverlayer);
}
Polygons.prototype.drawOuterLayer = function() {
this.canvas.appendSVG('rect', {
'x': '0',
'y': '0',
'width': '100%',
'height': '100%',
'fill': 'url(#img-overlayer)',
'class': 'img-overlayer',
});
}
Polygons.prototype.drawInnerLayer = function() {
this.canvas.appendSVG('polygon', {
'points': '500,55 800,50 643,370',
'class': 'inner-polygon polygon-left',
'fill': 'url(#img-left)',
});
this.canvas.appendSVG('polygon', {
'points': '800,70 665,395 935,395',
'class': 'inner-polygon polygon-middle',
'fill': 'url(#img-middle)',
});
this.canvas.appendSVG('polygon', {
'points': '820,50 1115,45 950,375',
'class': 'inner-polygon polygon-right',
'fill': 'url(#img-right)',
});
this.canvas.appendSVG('polygon', {
'points': '660,415 940,415 805,720',
'class': 'inner-polygon polygon-down',
'fill': 'url(#img-bottom)',
});
}
var polygons = new Polygons();
document.getElementById('svg-container').appendChild(polygons.canvas);
#svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
<div id="svg-container"></div>

Popup should close when i clicked anywhere Jquery

I'm really new on Jquery and I have this code that I'm playing with. I can't find where is the script in this code that lets you close the popup anywhere. If none what and where should I put the code.
(function($) {
var ie6 = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4);
if ($.proxy === undefined)
{
$.extend({
proxy: function( fn, thisObject ) {
if ( fn )
{
proxy = function() { return fn.apply( thisObject || this, arguments ); };
};
return proxy;
}
});
};
$.extend( jQuery.easing,
{
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
});
$.extend($.expr[':'], {
value: function(a) {
return $(a).val();
}
});
$.extend({
MsgBoxObject: {
defaults : {
name : 'jquery-msgbox',
zIndex : 10000,
width : 400,
height : 310,
background : '#FFFFFF',
modal : true,
overlay : {
'background-color' : '#000000',
'opacity' : 0.5
},
showDuration : 200,
closeDuration : 100,
moveDuration : 500,
shake : {
'distance' : 10,
'duration' : 100,
'transition' : 'easeOutBack',
'loops' : 2
},
emergefrom : 'top'
},
options : {},
esqueleto : {
msgbox : [],
wrapper : [],
form : [],
buttons : []
},
visible : false,
i : 0,
animation : false,
overlay : {
create: function(options) {
this.options = options;
this.element = $('<div id="'+new Date().getTime()+'"></div>');
this.element.css($.extend({}, {
'position' : 'fixed',
'top' : 0,
'left' : 0,
'opacity' : 0,
'display' : 'none',
'z-index' : this.options.zIndex
}, this.options.style));
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
inject: function() {
this.target = $(document.body);
this.target.append(this.element);
if(ie6)
{
this.element.css({'position': 'absolute'});
var zIndex = parseInt(this.element.css('zIndex'));
if (!zIndex)
{
zIndex = 1;
var pos = this.element.css('position');
if (pos == 'static' || !pos)
{
this.element.css({'position': 'relative'});
}
this.element.css({'zIndex': zIndex});
}
zIndex = (!!(this.options.zIndex || this.options.zIndex === 0) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;
if (zIndex < 0)
{
zIndex = 1;
}
this.shim = $('<iframe id="IF_'+new Date().getTime()+'" scrolling="no" frameborder=0 src=""></div>');
this.shim.css({
zIndex : zIndex,
position : 'absolute',
top : 0,
left : 0,
border : 'none',
width : 0,
height : 0,
opacity : 0
});
this.shim.insertAfter(this.element);
$('html, body').css({
'height' : '100%',
'width' : '100%',
'margin-left' : 0,
'margin-right': 0
});
}
},
resize: function(x, y) {
this.element.css({ 'height': 0, 'width': 0 });
if (this.shim) this.shim.css({ 'height': 0, 'width': 0 });
var win = { x: $(document).width(), y: $(document).height() };
this.element.css({
'width' : '100%',
'height' : y ? y : win.y
});
if (this.shim)
{
this.shim.css({ 'height': 0, 'width': 0 });
this.shim.css({
'position': 'absolute',
'left' : 0,
'top' : 0,
'width' : this.element.width(),
'height' : y ? y : win.y
});
}
return this;
},
show: function() {
if (!this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.bind('resize', $.proxy(this.resize, this));
this.resize();
if (this.shim) this.shim.css({'display': 'block'});
this.hidden = false;
this.transition = this.element.fadeIn(this.options.showDuration, $.proxy(function(){
this.element.trigger('show');
}, this));
return this;
},
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
},
create: function() {
this.options = $.extend(true, this.defaults, this.options);
this.overlay.create({
style : this.options.overlay,
hideOnClick : !this.options.modal,
zIndex : this.options.zIndex-1,
showDuration : this.options.showDuration,
closeDuration : this.options.closeDuration
});
this.esqueleto.msgbox = $('<div class="'+this.options.name+'"></div>');
this.esqueleto.msgbox.css({
'display' : 'none',
'position' : 'absolute',
'top' : 0,
'left' : 0,
'width' : this.options.width,
'height' : this.options.height,
'z-index' : this.options.zIndex,
'word-wrap' : 'break-word',
'-moz-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-webkit-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-moz-border-radius' : '6px',
'-webkit-border-radius' : '6px',
'border-radius' : '6px',
'background-color' : this.options.background
});
this.esqueleto.wrapper = $('<div class="'+this.options.name+'-wrapper"></div>');
this.esqueleto.msgbox.append(this.esqueleto.wrapper);
this.esqueleto.form = $('<form action="'+this.options.formaction+'" method="post"></form>');
this.esqueleto.wrapper.append(this.esqueleto.form);
this.esqueleto.wrapper.css({
height : (ie6 ? 80 : 'auto'),
'min-height' : 80,
'zoom' : 1
});
$('body').append(this.esqueleto.msgbox);
this.addevents();
return this.esqueleto.msgbox;
},
addevents: function() {
$(window).bind('resize', $.proxy(function() {
if (this.visible)
{
this.overlay.resize();
this.moveBox();
}
}, this));
$(window).bind('scroll', $.proxy(function() {
if (this.visible)
{
this.moveBox();
}
}, this));
this.esqueleto.msgbox.bind('keydown', $.proxy(function(event) {
if (event.keyCode == 27)
{
this.close(false);
}
}, this));
// heredamos los eventos, desde el overlay (Events inherited from the overlay):
this.overlay.element.bind('show', $.proxy(function() { $(this).triggerHandler('show'); }, this));
this.overlay.element.bind('hide', $.proxy(function() { $(this).triggerHandler('close'); }, this));
},
show: function(txt, options, callback) {
var types = ['alert', 'info', 'error', 'prompt', 'confirm'];
this.esqueleto.msgbox.queue(this.options.name, $.proxy(function( next ) {
options = $.extend(true, {
type : 'alert',
form : {
'active' : false
}
}, options || {});
if (typeof options.buttons === "undefined")
{
if (options.type == 'confirm' || options.type == 'prompt')
{
var buttons = [
{type: 'cancel', value: 'Cancel'}
];
}
}
else
{
var buttons = options.buttons;
};
this.callback = $.isFunction(callback) ? callback : function(e) {};
this.esqueleto.buttons = $('<div class="'+this.options.name+'-buttons"></div>');
this.esqueleto.form.append(this.esqueleto.buttons);
if (options.type != 'prompt')
{
$.each(buttons, $.proxy(function(i, button) {
if (button.type == 'cancel')
{
this.esqueleto.buttons.append($('<button type="button">'+button.value+'</button>').bind('click', $.proxy(function(e) { this.close(false); e.preventDefault(); }, this)));
}
}, this));
}
this.esqueleto.form.prepend(txt);
$.each(types, $.proxy(function(i, e) {
this.esqueleto.wrapper.removeClass(this.options.name+'-'+e);
}, this));
this.esqueleto.wrapper.addClass(this.options.name+'-'+options.type);
this.moveBox(); // set initial position
this.visible = true;
this.overlay.show();
this.esqueleto.msgbox.css({
display : 'block',
left : ( ($(document).width() - this.options.width) / 2)
});
this.moveBox();
setTimeout($.proxy(function() { var b = $('input, button', this.esqueleto.msgbox); if (b.length) { b.get(0).focus();} }, this), this.options.moveDuration);
}, this));
this.i++;
if (this.i==1)
{
this.esqueleto.msgbox.dequeue(this.options.name);
}
},
moveBox: function() {
var size = { x: $(window).width(), y: $(window).height() };
var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() };
var height = this.esqueleto.msgbox.outerHeight();
var y = 0;
var x = 0;
// vertically center
y = scroll.x + ((size.x - this.options.width) / 2);
if (this.options.emergefrom == "bottom")
{
x = (scroll.y + size.y + 80);
}
else // top
{
x = (scroll.y - height) - 80;
}
if (this.visible)
{
if (this.animation)
{
this.animation.stop;
}
this.animation = this.esqueleto.msgbox.animate({
left : y,
top : scroll.y + ((size.y - height) / 2)
}, {
duration : this.options.moveDuration,
queue : false,
easing : 'easeOutBack'
});
}
},
close: function(param) {
this.esqueleto.msgbox.css({
display : 'none',
top : 0
});
this.visible = false;
if ($.isFunction(this.callback))
{
this.callback.apply(this, $.makeArray(param));
}
setTimeout($.proxy(function() {
this.i--;
this.esqueleto.msgbox.dequeue(this.options.name);
}, this), this.options.closeDuration);
if (this.i==1)
{
this.overlay.hide();
}
this.moveBox();
this.esqueleto.form.empty();
},
},
msgbox: function(txt, options, callback) {
if (typeof txt == "object")
{
$.MsgBoxObject.config(txt);
}
else
{
return $.MsgBoxObject.show(txt, options, callback);
}
}
});
$(function() {
if (parseFloat($.fn.jquery) > 1.2) {
$.MsgBoxObject.create();
} else {
throw "The jQuery version that was loaded is too old. MsgBox requires jQuery 1.3+";
}
});
})(jQuery);
Every tips and help will be appreciated. Thank you in advance!

this is the method this plugin is using to hide.
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
And this is the place where using this function:
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
So according to this when you click on the overlay popup will hide using this.hide() method.