I am trying to open fancybox programmatically. Not through link. Once user click addform and i create form manually and show the form in fancybox. sout variable contains the form html.
$.fancybox({
openEffect : "none",
closeEffect : "none",
autoDimensions : false,
width : 620,
height : "auto",
content : sOut
});
Then call this
$.fancybox.close();
My problem now is when i clcked same button the fancybox not showing up again. if you have done this let me know. How to close properly fancybox so i can reopen.
Probably, you must remove the below command in fancybox code:
'hideOnContentClick': true
I eventually want to create a photo gallery... clicking on a picture will launch a You Tube video. I am using fancybox 2.0.
I have the video opening up inline but I cannot control its dimensions. Could you please take a look at this page for me and see where I am fouling up.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Thank you,
darrell#bytebrothers.com
This is how your script looks like right now
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false,
type : 'swf'
})
and this is how it should look like
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false
});
});
you are missing some closing brackets.
On the other hand, if you are using fancybox-media, you don't need to specify type:'swf'
UPDATE: when targeting youtube videos in embed (youtube iframe mode) mode, add the class fancybox.iframe to your anchor so this
<a class="fancyYouTube" href="http://www.youtube.com/embed/dx6TZgUSquY">
should be this
<a class="fancyYouTube fancybox.iframe" href="http://www.youtube.com/embed/dx6TZgUSquY">
In the examples page when you search (CTRL+F) for image gallery and click the first image, there's this image gallery which you can browse with next/prev arrows. The animation between them is vertical -- the images fly vertically. How does one set them to fly horizontally?
In the help I found:
openMethod / closeMethod / nextMethod / prevMethod
Method from $.fancybox.transitions() that handles transition (you can
add custom effects there)
But I don't know where to go from here.
Also, this seems to be slightly related.
You can create your own custom transitions from here:
http://jsfiddle.net/xZBBS/
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
try this i am sure this will help
I am using TinyMCE . On a Click I am opening an inline popup successfully.But I have no idea how I can pass a value from popup to tinyMCE.Any help highly appreciated.
tinyMCE.activeEditor.windowManager.open({
file : "options.jsp",
title : 'Image Manager',
width : 800,
height : 600,
resizable : "yes",
inline : "yes",
close_previous : "no",
win : window
});
Took me some time to find it out myself. It is not that difficult. To insert HTML to your editor from the popup you may use something like
var my_html_code = 'New phrase!';
tinyMCEPopup.execCommand('mceInsertContent', false, my_html_code);
Using tinyMCEPopup.editor you may address the editor from where you opened the popup.
You could for example set a variable in the editor using
tinyMCEPopup.editor.new_variable = 'blah blah';
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.
When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.
How can I achieve that?
EDITED:- (As it is not working in IE8)
tinyMCE.init({
force_p_newlines : false,
force_br_newlines : false,
forced_root_block : false,
convert_newlines_to_brs: false,
// Not to add br elements.
remove_linebreaks : true,
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
This code is used to disable:
function tinymce_state(id, disable){
var state = (disable==true)? 'Off' : 'On'
tinymce.get(id).getDoc().designMode = state;
tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
tinymce.get(id).controlManager.get('bold').setDisabled(disable);
tinymce.get(id).controlManager.get('italic').setDisabled(disable);
tinymce.get(id).controlManager.get('underline').setDisabled(disable);
tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}
You may use the following to block input in the editor:
// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off
// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);
// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);
EDIT:
You could change the contenteditable property of your rtes iframe body.
Downside will be that you will have to disable the tinymce UI (buttons) seperatly
// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx)
the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
for (editor_id in tinyMCE.editors) {
if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
To disable the editor use:
tinymce.activeEditor.mode.set('readonly');
To enable the editor use:
tinymce.activeEditor.mode.set('design');
Tested on version 5.x
You can cover with a white div opacity .7 and higher z-index.
You can use in 3.x the option
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
In 4.x you can use the option
selector:'textarea.not(.no_mce)'
Hope that helps.
(Oviously you can change the CSS Class to whatever you want)
For old 3 ver you can use:
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");