Related
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>
I'm trying to create several groups. Each of the group will get a custom attribute to indicate its position. Depending on this attribute I want to set different images as a group members. This part doesn't work and I cannot figure it out. image header.png is added twice and shows in content-footer area. in the header area there is no image at all.
Also when I try to log the output
console.log(JSON.stringify(canvasBuild)
there is no content inside the "objects" property of a group. When I try to log stringified group - it does show the image objects.
This is the simplified code so far
var hasHeader = false;
var hasFooter = false;
// users choice of layout
var customPosition = [];
$(this).siblings('.layoutOptions').children('input:checked').each(function(i)
{
customPosition[i] = $(this).val();
if ( customPosition[i]=='content-header'){
hasHeader = true;
}else if (customPosition[i]=='content-footer'){
hasFooter = true;
}
});
$(this).siblings('.contentOptions').children('input:checked').val();
for (i = 0; i< customPosition.length; i++){
console.log(i);
console.log(customPosition[i]);
var canvField = (canvasBHeight - shadowBVal*2) - strokeBWidth*2;
if (customPosition[i] == 'content-header'){
//header positioning
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: '#ccc',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
//height: canvasBHeight/5 - strokeBWidth,
height: canvField/5,
top: strokeBWidth,
ry: 0,
rx: 20,
//originX: 'center',
//originY: 'center'
});
//add dummy content
fabric.Image.fromURL('image/bordenconfigurator/dummies/header.png', function(oImg) {
oImg.set({
});
group.add(oImg);
console.log('group '+i+' '+customPosition[i]+':');
console.log(JSON.stringify(group));
//console.log(group);
});
}else if(customPosition[i] == 'content-footer') {
console.log(customPosition[i]);
//footer positioning
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: '#ccc',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
//height: canvasBHeight/5 - strokeBWidth,
height: canvField/5,
top: strokeBWidth + canvField*4/5 + 10,
ry: 0,
rx: 20,
//originX: 'center',
//originY: 'center'
});
//add dummy content
fabric.Image.fromURL('image/bordenconfigurator/dummies/footer.png', function(oImg) {
oImg.set({
top: canvasBHeight- strokeBWidth-shadowBVal,
});
group.add(oImg);
canvasBuild.centerObjectH(oImg);
console.log('group '+i+' '+customPosition[i]+':');
console.log(JSON.stringify(group));
});
}else{
console.log(customPosition[i]);
//body positioning
var height,top;
if (hasHeader === true && hasFooter === true){
height = canvField*3/5 + 5;
top = strokeBWidth + canvField/5 + 5;
}else if(hasHeader ===true && hasFooter === false){
height = canvField*4/5 + 5;
top = strokeBWidth + canvField/5 + 5;
}else if(hasHeader ===false && hasFooter === true){
height = canvField*4/5;
top = strokeBWidth + 5;
}
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: 'rgba(255,255,255,0)',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
height: height,
//top: strokeBWidth + canvField/5 + 5,
top: top,
ry: 20,
rx: 20
});
}
group.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
customPosition: this.customPosition,
label: this.label,
id: this.id
});
};
})(group.toObject);
group.customPosition = customPosition[i];
group.id = posB;
canvasBuild.add(group);
group.length = 0;
posB++;
}
//addOrientationLines();
//canvasBuild.renderAll();
//console.log(JSON.stringify(canvasBuild));
});
I am trying to generate name badges/ text avater in an angular JS, ionic app.
.controller("myCtrl",function($scope, userService){
userService.getUsers().then(function(users){
$scope.users = users.data;
$(function(){
$('.name').nameBadge({
// boder options
border: {
color: '#ddd',
width: 3
},
// an array of background colors.
colors: ['#a3a948', '#edb92e', '#f85931', '#ce1836', '#009989'],
// text color
text: '#fff',
// avatar size
size: 48,
// avatar margin
margin: 5,
// disable middle name
middlename: true,
// force uppercase
uppercase: false
});
});
});
})
my view looks like this :
<ion-item class="item-avatar " collection-repeat="item in users">
<div class="name">{{item.username}}</div>
</ion-item>
The problem is, It is showing iu which is the initials of item and username, rather than returning extracting the initials of the real username.
The Jquery namebadge Plugin is :
(function ($) {
$.fn.nameBadge = function (options) {
var settings = $.extend({
border: {
color: '#ddd',
width: 3
},
colors: ['#a3a948', '#edb92e', '#f85931', '#ce1836', '#009989'],
text: '#fff',
size: 72,
margin: 5,
middlename: true,
uppercase: false
}, options);
return this.each(function () {
var elementText = $(this).text();
var initialLetters = elementText.match(settings.middlename ? /\b(\w)/g : /^\w|\b\w(?=\S+$)/g);
var initials = initialLetters.join('');
$(this).text(initials);
$(this).css({
'color': settings.text,
'background-color': settings.colors[Math.floor(Math.random() * settings.colors.length)],
'border': settings.border.width + 'px solid ' + settings.border.color,
'display': 'inline-block',
'font-family': 'Arial, \'Helvetica Neue\', Helvetica, sans-serif',
'font-size': settings.size * 0.4,
'border-radius': settings.size + 'px',
'width': settings.size + 'px',
'height': settings.size + 'px',
'line-height': settings.size + 'px',
'margin': settings.margin + 'px',
'text-align': 'center',
'text-transform' : settings.uppercase ? 'uppercase' : ''
});
});
};
}(jQuery));
Any help will be appreciated . Thanks
Try this: Move your plugin code into and angular directive (look here for how to do that https://docs.angularjs.org/guide/directive).
Then use this angular dependency ( https://docs.angularjs.org/api/ng/service/$interpolate ), $interpolate, to get the value of what is inside the divs. Use it on this line of the plugin: var elementText = $(this).text();
Do not forget to inject $interpolate inside your directive.
I am new to titanium appcelerator and getting an error while creating a form with textfields and buttons..In this page there are 3 textfields and a button
Here is my code
var win1 = Titanium.UI.currentWindow;
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor:'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom: 40,
text:'Registration',
color:'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Username',
color:'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text:'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40, color:'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Password',
color: '#336699',
keyboardType: Titanium.UI.KEYBOARD_PHONE_PAD,// This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType: Ti.UI.RETURNKEY_DONE,
passwordMask:true,//This makes the letter display in ***** format
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text:'Fullname',
color:'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: '#336699',
text:'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title: 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click',function(e)
{
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url:'page2.js'
});
win2.open();
});
aview.add(buttons);
and these are the errors which I get when running the application,please help
Errors:
[ERROR] : TiExceptionHandler: (main) [235,235] ----- Titanium Javascript Runtime Error -----
[ERROR] : TiExceptionHandler: (main) [0,235] - In app.js:1,69
[ERROR] : TiExceptionHandler: (main) [0,235] - Message: Uncaught TypeError: Cannot call method 'add' of null
[ERROR] : TiExceptionHandler: (main) [0,235] - Source: h:Titanium.UI.FILL,height:Titanium.UI.FILL,layout:"vertical"});win1.add(aview)
[ERROR] : V8Exception: Exception occurred at app.js:1: Uncaught TypeError: Cannot call method 'add' of null
Check this out : I think this is your app.js, if yes it will work.
var win1 = Titanium.UI.createWindow({backgroundColor: "#ffffff"});
win1.open();
var aview = Titanium.UI.createView({
borderRadius : 10,
backgroundColor : 'Red',
width : Titanium.UI.FILL,
height : Titanium.UI.FILL,
layout : 'vertical'
});
win1.add(aview);
var headings = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 100,
right : 40,
bottom : 40,
text : 'Registration',
color : 'White'
});
aview.add(headings);
var usern = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Username',
color : 'black'
});
aview.add(usern);
var user = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Username',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(user);
var passn = Ti.UI.createLabel({
text : 'Password',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
color : 'black'
});
aview.add(passn);
var pass = Ti.UI.createTextField({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Password',
color : '#336699',
keyboardType : Titanium.UI.KEYBOARD_PHONE_PAD, // This has varities of keyboard and I choose PHONE_PAD as layout and it displays number pad when we click on the edit box of the date
returnKeyType : Ti.UI.RETURNKEY_DONE,
passwordMask : true, //This makes the letter display in ***** format
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
aview.add(pass);
var fname = Ti.UI.createLabel({
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40,
text : 'Fullname',
color : 'black'
});
aview.add(fname);
var fn = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
text : 'Fullname',
height : 'auto',
width : Titanium.UI.FILL,
top : 10,
left : 40,
right : 40
});
aview.add(fn);
var buttons = Ti.UI.createButton({
title : 'Submit',
height : 'auto',
width : 'auto',
top : 10,
left : '40%',
bottom : 10,
padding : '20%'
});
buttons.addEventListener('click', function(e) {
Ti.API.info("You clicked the button");
var win2 = Ti.UI.createWindow({
url : 'page2.js'
});
win2.open();
});
aview.add(buttons);
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.