jquery bubblepopup to appear onclick on a textbox - javascript

So what I'm trying to achieve is a popup that shows itself to the user once they click on the textbox. I'm using the jquery bubblepopup plug-in but I can't seem to assign it to click function. There are 2 functions, one roll over and one click I've seperated them if anything.
$(document).ready(function () {
$('#info-header').CreateBubblePopup({
innerHtml: $('#info-pop').html(),
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'right',
align: 'middle',
tail: 'right',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left'
}
});
$('#Password').click(function(){
var popup_button = $(this);
popup_button.CreatebubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
innerHtml: '<p>Password Requirements</p><ul><li>Must be at least 6 characters</li> <li>Must include at least 3 of the 4 following items:<ul><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '0'
}
});
popup_button.FreezeBubblePopup();
$('#Password').click(function(){
$(popup_button).HideBubblePopup();
});
});
});

So i found out the solution, I had a small letter for the id. and I switched from button onclick to focus, and used blur to cancel or take out the effect.
$(document).ready(function () {
$('#Password').focus(function () {
var popup_button = $(this);
popup_button.CreateBubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
mosueOver: 'hide',
innerHtml: '<p style="font-weight:bold;font-size:13px;">Password Requirements</p><ul style="margin-left:-25px;"><li>Must be at least 6 characters</li> <li>Must have 3 of the following:<ul style="margin-left:-25px;"><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '-10px',
'font-size' : '12px',
'padding' : '0 10px'
}
});
popup_button.ShowBubblePopup();
popup_button.FreezeBubblePopup();
$('#Password').blur(function () {
popup_button.UnfreezeBubblePopup();
popup_button.RemoveBubblePopup();
});
});
});

Related

Text height of specific character in Fabric.js

I have a text object in fabric.js that I am creating with:
fbText = new fabric.Textbox('#TEST', {
width: 700,
fill: '#303846',
top: 150,
left: 50,
fontSize: 150,
textAlign: 'left',
fixedWidth: 700,
// fontWeight: 'bold',
editable: false,
originY: 'center',
styles: {
// first word of text i.e Test
0: {
//first letter of first word i.e T
0: { fill: '#21bba6', fontSize: 130}
},
}
})
I would like to make the 1st letter higher than the rest of the word. Any thoughts on how that might be possible?
This is what I want to happen:
This is currently happening:
You can use deltaY negative value. There are more available style properties that can be used, have a look at [http://fabricjs.com/docs/fabric.Textbox.html#_styleProperties][1].
var fbText = new fabric.Textbox('#TEST', {
...,
styles: {
0: {
0: {
fill: '#21bba6',
fontSize: 130,
deltaY: -30
}
},
}
})

Contextmenu on the objects in fabricjs

Can you please help me in creating a context menu on the fabric object. I have googled a lot but couldn't find exact solution. I have created two objects as below on the fabric. How can i bind a context menu to the fabric object?
Fiddle link: http://jsfiddle.net/fabricjs/S9sLu/
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 50,
height: 50,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
canvas.add(new fabric.Circle({
left: 300,
top: 300,
radius: 50,
fill: '#9f9',
originX: 'left',
originY: 'top',
centeredRotation: true
}));
Thanks in advance.
I'm using contextMenu.js, this should get you started:
function contextMenu () {
var ctxTarget = null;
var menu = [{
name: 'Select Object',
img: '',
title: 'Select Object',
fun: function (o, jqEvent) {
canvas.setActiveObject(ctxTarget);
console.log(ctxTarget);
}
}];
$('.upper-canvas').on('contextmenu', function (e) {
e.preventDefault();
ctxTarget = canvas.findTarget(e.originalEvent);
});
$('.upper-canvas').contextMenu(menu, {
triggerOn: 'contextmenu',
closeOnClick: true,
});
}

escClose in simple modal

I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?
$(document).ready(function(){
$("#login_modal").modal({
overlayCss: {
backgroundColor: '#000',
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94,
escClose: false,
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});
Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;
$(document).ready(function(){
$("#login_modal").modal({
escClose: false,
overlayCss: {
backgroundColor: '#000'
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});

Deleting a view from a ScrollView

Developing in Titanium Mobile.
I need to remove a view from a scrollView when a delete button is clicked. I have a custom event firing when my button is clicked, which the scrollView listens for. My question is, how do I reference the view that needs to be deleted? These views are added to the scrollView dynamically, and there is no unique information about the view. I tried passing the view itself when firing the custom event, but this does not work. How do I tell the scrollView which view to delete?
When you have a delete button inside the view - that's a piece of cake :) Just get its' parent and delete it - scrollView.remove(e.source.parent);
Here I created a demo page:
var scrollView = Titanium.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
layout: 'vertical'
});
var colors = ['red', 'green', 'blue', 'orange', 'purple', 'yellow'];
for (var i = 0; i < 6; i++) {
var view = Ti.UI.createView({
backgroundColor: colors[i],
borderRadius: 10,
width: 300,
height: 200,
top: 10,
id: i
});
scrollView.add(view);
var deleteButton = Ti.UI.createButton({
borderRadius: 3,
style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
backgroundGradient: {
type: 'linear',
colors: [ '#c7c7c7', '#686868' ],
startPoint: { x: 0, y: 0 },
endPoint: { x: 0, y: 30 },
backFillStart: false
},
title: 'Delete view ' + i,
font: { fontSize: 12, fontWeight: 'bold' },
color: '#fff',
width: 120,
height: 30
});
view.add(deleteButton);
deleteButton.addEventListener('click', function(e) {
Ti.API.info(e.source.id); // use this ID
scrollView.remove(e.source.parent);
});
}
Ti.UI.currentWindow.add(scrollView);

Jquery popup tooltip

I'm using:
jQuery Bubble Popup v.2.3.1
http://maxvergelli.wordpress.com/jquery-bubble-popup/
You are meant to have this in the document ready:
$('.bubble').CreateBubblePopup({
align: 'center',
innerHtml: 'TEXT GOETH HERE!', // THIS IS THE LINE
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'center'
},
themeName: 'all-black',
themePath: 'plugins/bubble/themes'
});
You have to explicitly set the text of the mouse over... is it possible to set the text to the elements alt atribute? Or even better, a custom attribute on the element? Something like:
innerHtml: this.attr("alt"),
But this doesn't work as 'this' isn't defined
In the document ready function:
$('.bubble').each(function(){
$(this).CreateBubblePopup({
align: 'center',
innerHtml: $(this).attr('mouseoverText'),
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'center'
},
themeName: 'all-black',
themePath: 'plugins/bubble/themes'
});
});

Categories