Related
I would like to load my fancybiox iframe when the page is loaded:
<script type="text/javascript">
$(document).ready(function(){
$("a.various2").fancybox({
padding: 0,
margin: 0,
width: 400,
height: 350,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</head>
<body>
<a class="various2" data-fancybox-type="iframe" href="nlpumc.html">Iframe</a>
This script works by clicking on the link. But how does it work with document ready? I testet:
$("a.various2").fancybox.open({
That's not correct?
Thank you!
Here's the HTML...
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
And here's the JS...
// Activate fancyBox
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
// Launch fancyBox on first element
$(".fancybox").eq(0).trigger('click');
And now the JSFiddle...
Click here.
Works like a charm!
I need to load fancybox with inside php file, when I will click on textarea.
My code:
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox({
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8 }); });</script>
<textarea rows="4" cols="50" onfocus="#mypop" ></textarea>
Why this is not working ?
You need to change your textarea tag: remove onfocus="#mypop" and add id="mypop". The $("#mypop") function-call will search for an element with id="mypop", and the click(function(){...}) function will add the event-listener. This function-call also makes the onfocus=-attribute unnecessary.
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox("<iframe src='file.php' frameborder='0'></iframe>",{
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '50%',
height : '50%',
autoSize : true,
closeClick: false
});
});
</script>
<textarea rows="4" cols="50" id="mypop" ></textarea>
By: Jose ALfredo Cocom Chan
I have list of textareas. For textareas I use tinyMCE Editor. When I start sorting this list of textareas, inside these textareas everything disappears. I mean the iframes do not refresh their content.
<ul id="sortable">
<li class="ui-state-default"><br />
<textarea id="1"></textarea>
</li>
<li class="ui-state-default"><br />
<textarea name="2" id="2"></textarea>
</li></ul>
my.js file
tinyMCE.init({
mode : 'textareas',
theme : 'advanced',
theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_statusbar_location : 'bottom',
theme_advanced_resizing : false
});
$( "#sortable" ).sortable({
});
TinyMCE works perfect till I drag the <li> where this textarea is placed. Code inside <iframe> disappeared.
Can I somehow prevent refreshing the iframe content?
Problem here is that you cannot move the editor in the dom easily.
The solution is to first shut down the tinymce instance (id needed!)
tinymce.execCommand('mceRemoveControl',true,'editor_id');
then do the DOM action and reinit the tinymce instance
tinymce.execCommand('mceAddControl',true,'editor_id');
I have an instance of TinyMCE running on a page that enables me to edit existing posts. I query the db, and populate the variable $content with the stored text. I then have the following HTML:
<label for="content">Content:</label>
<textarea name="content" class="post-content" rows="<?php echo $settings_rows; ?>" ><?php echo $content; ?></textarea>
TinyMCE is displaying as an editor, no problem, but is not displaying the text stored in $content. There are no outlying <p> tags, and the $content variable is being populated (I echo'd it outside of the textarea to be sure, and Firebug shows the hidden textarea also being populated).
The editor init is as follows:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "advimage",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,image,hr,removeformat,visualaid,charmap,code",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
editor_selector : "post-content"
});
Can anyone advise me why this isn't working? I've used it on other pages, using this exact system, without a hitch.
EDIT
As a P.S. the relevant CSS is as follows:
.post-content {
padding: 3px 10px;
width: 90%;
}
Try the following. Give your textarea the id "editor1", use mode: "exact", instead of mode: "textareas",
and initialize your editor the following way (keep the tinymce init where it is for now, but before the following lines)
$(document).ready(function() {
tinyMCE.execCommand('mceAddControl', false, 'editor1');
}
In case someone uses HTML5 and is experiencing TinyMCE behaving similar or as described in the title: Try disabling autocomplete.
<textarea autocomplete="off">Hello, World!</textarea>
If you change/clear the textarea content on the page, your browser will copy those changes every time you reload the page (with autocomplete enabled).
This can make it look as if TinyMCE isn't processing the textarea content.
There is a previous question to this issue but it has no posted solution. This is for a backend I didn't programmed but I'm mantaining right now and there's this issue. TinyMCE is initialized this way:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "style,paste",
theme_advanced_buttons3_add : "pasteword",
paste_auto_cleanup_on_paste: true,
paste_remove_spans: true
});
And now we found an error for one of our sites with a JS error in IE: 'tinyMCE is undefined' on line 1 of file "themes/advanced/langs/en.js". This is the code we found in one of the texts edited with TinyMCE:
<p style="text-align: left;">
<script src="../../../../js/kicms/tiny_mce/themes/advanced/langs/en.js" type="text/javascript"></script>
Como resultado de las actividades del sector en el mes de Julio de 2010, se registró una variación en los precios relevados en el canal SPM de
(...)
(The rest of the text is normal/OK.)
Why is that tag in there? Any clue about this?
Thanks a lot!
It appears there is a problem for IE when using certain types of compressed JavaScripts.
I suspect that js/kicms/tiny_mce/themes/advanced/langs/en.js is a compressed file (open in a text editor to see if it is jumbled). Try using an uncompressed version (human readable).
Your call to TinyMCE should look something like this:
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>
Plus, you may want to try downloading the latest version of TinyMCE code and try it with the uncompressed files:
http://tinymce.moxiecode.com/download.php
EDIT:
Sorry, I misunderstood. Just remove the script tag and your error should go away. I suspect a developer was in a hurry and forgot to remove the tag.