Develop Reference

Adding description in Fancybox

I have this fancybox code -->
jsfiddle: http://jsfiddle.net/uZCC6/5192/
CSS:
.hidden {
display: none;
}
JQUERY:
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
I'm trying to add a description to the image popping out using this method provided by JFK Adding a title to fancy box.
<img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
}); // fancybox
}); // ready
However when i try to implement his code, the thumbnails are disappearing, any help on the correct method of applying his answer?

fancybox different close functions

i would like to have different function when my fancy box is closed using the close button and when my fancy is closed when the transaction is successful.
i used parent.$.fancybox.close();
to close the fancy box when the transaction is successful and i want it to display an alert message. while when the fancy is closed using the closed button i don't want the alert message to prompt. is there a way this could happen?
this is my code for the parent screen:
$(document).ready(function() {
$(".popup").fancybox({
'scrolling' : 'no',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'closeClick' : false,
'autoDimensions' : true,
'width' : 1000,
'centerOnScroll' : true,
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
});
},
'onClosed' : function() {alert("Successful!"); }
});
});
but it still shows the alert message whether it is closed using the close button or successful transaction.

Remove this line from your code.
'onClosed' : function() {alert("Successful!"); }
and show alert when you call close function explicitly. May be you can create a function like this and call parent.CloseFancyBox() instead of calling parent.$.fancybox.close()
function CloseFancyBox()
{
$.fancybox.close();
alert("Successful");
}

Extjs 5 listener stop working

I have weird problem with Extjs 5.0.
I have a window :
Ext.define('xxx', {
extend : 'Ext.window.Window',
// ...... //
items : [ {
xtype : 'grid',
reference : 'maingrid',
bind : {
store : '{users}'
},
flex : 1,
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : 'SIMPLE'
}),
listeners : {
selectionchange : 'onSelectionChange'
},
} ]
});
The selectionChange event handler work perfectly for the first time.
But when I close the window and open again - this event handler stop working. What am I doing wrong?

TinyMCE: Text Counter not working on readonly toggle

I have TinyMCE on my website which works fine.
Recently I added the functionality of readonly toggle.
For the readonly toggle I added a field "mytext_readonly".
TinyMCE is initialized in readonly mode, and stays in readonly if the value in "mytext_readonly" is 'readonly', otherwise it becomes editable.
The functionality is working as I want it, except the textcounter isn't working.
The problem is onKeyUp event is not working.
Text counter works if I click on B I U etc on the toolbar(means onExecCommand is working)
I want to know why onKeyUp is not working? And what shall I do to make it work?
tinyMCE.init({
mode : "exact",
elements : "mytext",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
readonly : true,
setupcontent_callback : "myCustomSetupContent",
plugins : "preview",
plugins : "AtD,preview",
atd_button_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/atdbuttontr.gif",
atd_css_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/css/content.css",
tab_focus : ':next',
theme : "advanced",
theme_advanced_buttons1_add : "AtD",
theme_advanced_buttons1 : "bold,italic,separator, justifyfull,bullist,numlist,|,charmap,|,undo,redo,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
/* the URL of proxy file */
atd_rpc_url : "/common-scripts/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/server/proxy.php?url=",
/* set your API key */
atd_rpc_id : "flinstone",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
valid_elements : ""
+"p,"
+"br,"
+"i/em,"
+"ul,"
+"li,"
+"ol,"
+"b/strong,"
+"marquee,"
+"sub,"
+"sup,"
+"table[border|width|height|align],"
+"tr[rowspan|width|height|align|valign],"
+"th,"
+"td[colspan|rowspan|width|height|align|valign]",
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
ed.onExecCommand.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
}
});
function myCustomSetupContent(editor_id, body, doc) {
var desc = document.getElementById('item_description').value;
desc = unescape(desc);
if (desc)
{
desc = desc.replace(/''/ig,"'");
desc = desc.replace(/&/ig,'&');
tinyMCE.get('mytext').setContent(desc);
}
textCounter('mytext','Charcount',4000);
if (document.getElementById('mytext_readonly') && document.getElementById('mytext_readonly').value == 'readonly') {
//do nothing
}
else
tinyMCE.get('mytext').getBody().setAttribute('contenteditable', true);
}

CKEditor Plugin - OK Button Permission Error

Hi i have created the following ckeditor plugin to insert a youtube video:
(function() {
CKEDITOR.plugins.add('youtube', {
requires : ['iframedialog'],
init : function(editor) {
var iframeWindow = null;
CKEDITOR.dialog.add('youtube_dialog', function() {
return {
title : 'YouTube Movie Properties',
minWidth : 550,
minHeight : 200,
contents : [{
id : 'iframe',
label : 'Insert YouTube Movie',
expand : true,
elements : [{
type : 'iframe',
src : me.path + 'dialogs/youtube.html',
width : '100%',
height : '100%',
onContentLoad : function() {
iframeWindow = document.getElementById(this._.frameId).contentWindow;
}
}]
}],
onOk : function() {
this._.editor.insertHtml('<cke:youtube url="' + iframeWindow.document.getElementById('url').value + '">YouTube Video Place Marker</cke:youtube>');
}
};
});
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube_dialog'));
editor.ui.addButton('YouTube', {
label : 'Insert YouTube Movie',
command : 'youtube',
icon : this.path + 'images/icon.gif'
});
}
});
})();
This was working fine but i recently moved my ckeditor files to a CDN. Now when i click the "OK" button i get a permission error. I was looking at the source of the existing plugins to get an idea of how they work but whatever i have tried doesn't seem to work. To get something basic working I tried changing my okOk event to:
onOk : function() {
var hr = new CKEDITOR.dom.element('hr', editor.document );
editor.insertElement(hr);
}
But this gave me a null reference exception.
I'd really appreciate it if someone could show me what i am doing wrong. Thanks

Problem fixed! The solution is to change:
CKEDITOR.dialog.add('youtube_dialog', function()
to:
CKEDITOR.dialog.add('youtube_dialog', function(editor)
and change:
this._.editor
to:
editor
Hope this helps.