Develop Reference

Move 'toggle size' button fancybox

I am currently using a combination of fancybox thumbnails and buttons (only the toggle size button). By default, the buttons appear in the centre of the viewport, I would like to move this to the bottom right hand corner of the image, essentially appearing attached in the same way the close button is or just below the right corner would also be fine.
I have tried space it relative to the viewport width but it doesn't work. Is there a way to position it relative to the image?
I apologise for the abundance of code - I have no idea what to include and what to disregard, so I've put it all in.
If you look at my website (unfinished but I've uploaded it to help) you can see the issue on gallery one.
Shereewalker.com
Any help would be very much appreciated.
Here is my css
#fancybox-buttons {
position: fixed;
left: 0;
width: 100%;
z-index: 8050;}
#fancybox-buttons.top {top: 10px;}
#fancybox-buttons.bottom {bottom: 10px;}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040; }
#fancybox-buttons ul {
width: 36px;
height: 36px;
cursor: pointer;
margin: 0 auto;
list-style: none;}
#fancybox-buttons ul li {
float: left;
margin: 0;
padding: 0;}
And my javascript
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
prevEffect : 'none',
nextEffect : 'none',
// API options
helpers : {
title : {
type: 'outside'
},
buttons: {},
thumbs: {
width : 10,
height : 10
}
}
}); // fancybox
}); // ready
And even more javascript
(function ($) {
//Shortcut for fancyBox object
var F = $.fancybox;
//Add helper object
F.helpers.buttons = {
defaults : {
skipSingle : false, // disables if gallery contains single image
position : 'top', // 'top' or 'bottom'
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li></ul></div>'
},
list : null,
buttons: null,
beforeLoad: function (opts, obj) {
//Remove self if gallery do not have at least two items
if (opts.skipSingle && obj.group.length < 2) {
obj.helpers.buttons = false;
obj.closeBtn = true;
return;
}
//Increase top margin to give space for buttons
obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
},
onPlayStart: function () {
if (this.buttons) {
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
}
},
onPlayEnd: function () {
if (this.buttons) {
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
}
},
afterShow: function (opts, obj) {
var buttons = this.buttons;
if (!buttons) {
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
buttons = {
prev : this.list.find('.btnPrev').click( F.prev ),
next : this.list.find('.btnNext').click( F.next ),
play : this.list.find('.btnPlay').click( F.play ),
toggle : this.list.find('.btnToggle').click( F.toggle ),
close : this.list.find('.btnClose').click( F.close )
}
}
//Prev
if (obj.index > 0 || obj.loop) {
buttons.prev.removeClass('btnDisabled');
} else {
buttons.prev.addClass('btnDisabled');
}
//Next / Play
if (obj.loop || obj.index < obj.group.length - 1) {
buttons.next.removeClass('btnDisabled');
buttons.play.removeClass('btnDisabled');
} else {
buttons.next.addClass('btnDisabled');
buttons.play.addClass('btnDisabled');
}
this.buttons = buttons;
this.onUpdate(opts, obj);
},
onUpdate: function (opts, obj) {
var toggle;
if (!this.buttons) {
return;
}
toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
//Size toggle button
if (obj.canShrink) {
toggle.addClass('btnToggleOn');
} else if (!obj.canExpand) {
toggle.addClass('btnDisabled');
}
},
beforeClose: function () {
if (this.list) {
this.list.remove();
}
this.list = null;
this.buttons = null;
}
};
}(jQuery));

If you want to move the toggle button only, you actually need to clone it rather than moving it.
Based on this answer https://stackoverflow.com/a/17888534/1055987, we could tweak it into this :
CSS
/* hide the actual buttons helper */
#fancybox-buttons {
display: none;
}
/* position the clone : notice the class "clone" */
.clone {
position: absolute;
top: 5px;
right: 0;
}
.btnToggle.clone {
background-position: 3px -60px;
border-left: 1px solid #111;
border-right: 1px solid #3e3e3e;
width: 35px;
height: 35px;
background-image: url("{your path}/helpers/fancybox_buttons.png");
background-color: #333;
}
.clone.btnToggleOn {
background-position: -27px -60px;
}
Then the jQuery code :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
helpers: {
title: {
type: 'inside'
},
buttons: {} // we need this to clone
},
afterLoad: function () {
// make sure we have a title
this.title = this.title ? this.title : " ";
},
afterShow: function () {
// wait for the buttons helper
setTimeout(function () {
$("#fancybox-buttons")
.find(".btnToggle")
.clone(true, true) // clone with data and events
.addClass("clone") // add class "clone"
.appendTo(".fancybox-title") // append it to the title
.fadeIn(); // show it nicely
}, 100); //setTimeout
}, // afterShow
onUpdate: function () {
var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
if (this.canShrink) {
toggle.addClass('btnToggleOn');
} else if (!this.canExpand) {
toggle.addClass('btnDisabled');
}
}
}); // fancybox
}); // ready
See JSFIDDLE

The toggle size button (and thumbnails) and hard to align because they are in separate full-width containers. This markup is generated by FancyBox for the gallery slideshow.
It looks like this:
<body>
<div class="fancybox-wrap">
<div class="fancybox-overlay">
<div id="fancybox-buttons">
<div id="fancybox-thumbs">
The .fancybox-wrap contains the gallery image and #fancybox-buttons contains the toggle size button.
Luckily, the OP was creating a template (tpl) for the toggle size button... but was injecting it into the <body> so it was unaware of the content of the .fancybox-wrap.
To fix this just change this line:
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
To this:
this.list = $(opts.tpl).addClass(opts.position).appendTo('.fancybox-wrap');
This just puts the buttons inside the same container as the gallery image (which is what we want to align too).

how to return animation to it's original size and position on a click

I am relatively new to all this so if you see anything I am doing wrong, or anyways to simplify any code please do not hesitate to say.
I have the following code to enlarge the div element:
var profilePostsClick = function () {
$('.largeBox, .smallBox, .longBox').click(function () {
$(this).animate({
width: '100%',
height: '40%'
}, 200);
$('.closePost', this).removeClass('closePostHide');
});
};
$(document).ready(profilePostsClick);
https://jsfiddle.net/jvkhmpbt/
I am wanting to close each div when the cross is clicked, returning it to it's original size and positioning (with height: auto if feasible).
Aslo is there a way to make it so each div opens above the smaller ones? (like the top left div does, i am aware this is because of it's positioning)
Thanks

You can do like following way by adding and removing class
JQuery:
$('.largeBox, .smallBox, .longBox').click(function (e) {
e.preventDefault();
$(this).addClass('increaseSize');
$('.closePost', this).removeClass('closePostHide');
});
$('.glyphicon-remove').click(function (e) {
e.stopPropagation()
$('.glyphicon-remove').parent().parent().removeClass('increaseSize');
$('.closePost', this).addClass('closePostHide');
});
CSS:
.increaseSize{
width: 100%;
height: 40%;
}
Check Fiddle Here.

You could save the animation properties/values in an cache-object and restore them after your animation.
http://jsfiddle.net/jvkhmpbt/4/
var animationResetCache = [];
var saveValues = function (node) {
animationResetCache.push({
node: node,
width: node.css('width'),
height: node.css('height')
});
};
var restoreValues = function (node) {
for (var i = 0; i < animationResetCache.length; ++i) {
var item = animationResetCache[i];
if (item.node.is(node)) {
return item;
}
}
};
var profilePostsClick = function () {
$('.largeBox, .smallBox, .longBox').click(function (e) {
var $this = $(this);
if ($this.hasClass('open')) return;
saveValues($this);
$this.addClass('open').animate({
width: '100%',
height: '40%'
}, 200);
$this.find('.closePost').removeClass('closePostHide');
});
$('.closePost').click(function () {
var $parent = $(this).parent('.largeBox, .smallBox, .longBox');
if ($parent.hasClass('open')) {
var cachedValues = restoreValues($parent);
$parent.animate({
width: cachedValues.width,
height: cachedValues.height
}, function () {
$parent.removeClass('open');
});
$parent.find('.closePost').addClass('closePostHide');
}
});
};
$(document).ready(profilePostsClick);

I think it's easier to use a toggle and do the animation in CSS3
$("img").click(function(){
$(this).toggleClass('expanded');
});

I would suggest to add one more identical class to each of smallBox,largeBox and longBox which will be called parentd to identify parent div and animate it back and add below js:
DEMO
$('.closePost').on('click',function(e)
{
$(this).closest('.parentd')
.animate({
width: '40%',
height: 'auto'
},200).removeAttr('style');
$(this).addClass('closePostHide');
e.stopPropagation();
});

If we continue on Rover his answer, we can use the switchClass function in jQuery Ui. (source)
This function let's you switch the classes of an object, creating an animation in the difference between those classes.
Example code: jsFiddle
<div class="large"></div>
CSS:
.large{
width: 100%;
height: 200px;
background-color: red;
}
.small {
width: 10%;
height: 50px;
background-color:green;
}
JS:
$("div").switchClass("large","small",500);

Issue on removal of joint js node on click of its custom html click

I am using joint.js in my angular.js application , I have joint.js node in which I am using html
<button class="delete">x</button>
( you can see this in my backbone view template) whenever user clicks on this button, I want to remove the node which works absolutely fine but what I want to improve is that button should appear only when user clicks on its node and when user clicks on paper other than node that cross button should disappear just like
http://jointjs.com/rappid#a3e927c4-9c6b-4159-b14e-920299be8f87
my logic which I thought is to have a class in button's parent div
.html-element button.delete{
display: none;
}
.html-element.showButton button.delete{
display: block;
}
which will be added when user will click on the node and removed when user will click on the paper. but when I do this logic of adding and removing class it works but the functionality of removal of node on cross button stops.
By whole day debugging and altering the code, I have come to this ,that somehow when this function is called
f2:function(){
var self=this;
var elementDiv = $(self.$box).find('button');
elementDiv.parent().removeClass("showButton")
}
the removal of node on cross button click stops.it means the binding of icon to removal function of model is removed. this is the binding
this.$box.find('.delete').on('click', function()
self.model.remove();
});
I hope that this explanation makes some sense. Below is complete code
var graph = new joint.dia.Graph;
var element1=false;
var paper = new joint.dia.Paper({
el: $('#workFlow'),
width: '100%',
height: '98%',
model: graph,
gridSize: 1
});
paper.on('cell:pointerdown',
function(cellView, evt, x, y) {
$scope.cellView=cellView;
cellView.f1();
}
);
paper.on('blank:pointerdown', function(cell) {
$scope.cellView.f2();
});
Backbone View for extending shapes
joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({
type: 'html.Element',
attrs: {
rect: { stroke: 'none', 'fill-opacity': 0,stageType: dataSourceType}
}
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.ElementView = joint.dia.ElementView.extend({
template: [
'<span class="glyphicons '+icon+' html-element">',
'<button class="delete">x</button>',
'</span>'
].join(''),
initialize: function() {
var self=this;
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
// this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
this.$box.find('.delete').on('click', function(event){
self.model.remove();
});
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);
this.updateBox();
}
,
render: function() {
var self=this;
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
this.updateBox();
return this;
},
updateBox: function() {
// Set the position and dimension of the box so that it covers the JointJS element.
var bbox = this.model.getBBox();
// Example of updating the HTML with a data stored in the cell model.
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
},
removeBox: function(evt) {
this.$box.remove();
},
f1:function(){
var self=this;
var elementDiv = $(self.$box).find('button');
elementDiv.parent().addClass("showButton");
},
f2:function(){
var self=this;
var elementDiv = $(self.$box).find('button');
elementDiv.parent().removeClass("showButton")
}
});
var el1 = new joint.shapes.html.Element({ position: { x: $scope.shapeX, y: $scope.shapeY }, size: { width: 40, height: 40 }, label: 'I am HTML', select: 'one' });
graph.addCells([el1]);

If you haven't solved your problem: there is a very simple solution for what you want to do. You just need to use the hover function in css styling and change the opacity from 0 to 1 when you hover over the box (in your css file) :
.html-element button.delete {
color: white;
border: none;
background-color: gray;
border-radius: 20px;
width: 15px;
height: 15px;
line-height: 15px;
text-align: middle;
position: absolute;
top: -5px;
left: -5px;
padding: 0;
margin: 0;
font-weight: bold;
cursor: pointer;
opacity:0;
}
.html-element button.delete:hover {
/*width: 20px;
height: 20px;
line-height: 20px;*/
opacity:1;
}

ExtJS 4.1 - Override css of Ext.LoadMask

I have a requirement to override the default background color of Ext.LoadMask from white to grey. How can I achieve this? Also adding the screenshot of the image and the code that I am using to load the mask.
var feestore = this.getBillingFeePanelStoreStore();
feestore.on({
beforeload: this.beforeFeestoreLoad,
scope: this
});
beforeFeestoreLoad: function(store, operation, eOpts){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait.... Your request is being processed"});
myMask.show();
Any help is appreciated.

Use 'maskCls' to define your own style, then add appropriate css
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait.... Your request is being processed", maskCls:'customLoadMask'});
CSS:
.customLoadMask {
filter: alpha(opacity=70);
opacity: .7;
background: grey !important;
}

The following worked for me on extjs 4.2:
msgCls instead of maskCls
var loadingMask = new Ext.LoadMask(Ext.getBody(), {
msg:"Een moment geduld aub ...", msgCls:'msgClsCustomLoadMask'});
CSS:
.msgClsCustomLoadMask{
background-color: #FF0000;
border: solid 2px #A3BAD9;}
.msgClsCustomLoadMask .x-mask-msg-inner{
color: #000066;
font: normal 25px Times new Roman,helvetica,arial,verdana,sans-serif;}
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.LoadMask-cfg-msgCls
Hope this helps.

How can I make a tiny JavaScript form appear as if in a dialog at a location I choose?

I have an HTML5 Canvas. When the user double-clicks in a particular region of that canvas, I want a single-field form to appear at that spot, so that the user can edit some text.
My intended effect is similar to this screenshot from Google Docs. I double-clicked on the shape with the "Hello" text, and the editable text field appeared.
I've worked out how to detect the double-click, the mouse location, and the text. But so far I'm using a javascript "prompt(...)" dialog to edit the text, which is not what I want.
I guess I'm looking for something to put in this function to replace prompt:
// let the user edit the text, by showing a popup-field that appears at (x, y)
function editText(x, y, text) {
return prompt('Text:', text);
}
If it is relevant, I'm using jQuery a little.

Apprise didn't seem to do everything you were asking so I wrote this: http://jsfiddle.net/Qj9QR/12/
CSS
.prompt { position: absolute; background-color: #E0ECFF; border-radius: 3px; width: 200px; height: 50px; border: 1px solid #99C0FF }
.prompt textarea { margin: 4px 0 0 4px }
.prompt .hint { position: absolute; bottom: 1px; left: 5px; font-size: 9px; color: #444466 }
JS uses jQuery see fiddle
function prompt(opts){
this.opts = $.extend({}, this.defaults, opts);
this.init();
this.open();
}
prompt.prototype = {
defaults: { x: 0, y: 0, text: 'Type Here' },
init: function(){
this.create();
this.bind();
this.position();
},
bind: function(){
var self = this;
this.el.click(false).find('textarea').bind('keypress', function(e){
if(e.which === 13) self.close(e);
});
$(document).bind('click.prompt', $.proxy(self.close, self));
},
close: function(e){
if(this.opts.close){
this.opts.close.apply(this, arguments);
}
if(!e.isPropagationStopped()){
$(document).unbind('click', this.close);
this.el.remove();
}
},
create: function(){
this.el = $('<div class="prompt" />')
.append('<textarea></textarea>')
.find('textarea').val(this.opts.text)
.end()
.append('<span class="hint">Hint: use Shift-Enter for multiple lines</span>');
},
position: function(){
this.el.css({top: this.opts.y, left: this.opts.x });
},
open: function(){
this.el.appendTo('body');
this.el.show('fast')
.find('textarea').focus().select();
}
};
// IN USE: when you click an LI update some html
$('li').click(function(){
var li = $(this),
pos = li.position();
new prompt({
text: li.html(),
x: pos.left,
y: pos.top + 17,
close: function(e){
var newText = $(e.target).val();
newText && li.html(newText);
}
});
return false;
});
Updated with position and updating element values