Been using FancyBox to display a swf player. What I would like to do is have an if statement that, when false adds the flash vars to 'swf': {...}, which I have working. And when true displays some inline markup.
if (true) {
$.fancybox({
'type': inline
//can I ref markup here???
});
} else {
$.fancybox({
'href' : somepath,
'type': 'swf',
'swf': {..}
});
}
Would someone be able to advise on how I can either reference the markup using the approach above. Or if I can even add dynamic html here, which would be a nicer approach.
Thanks in advance
Eddie
Solved this.
I needed to use the key content, which forces FancyBox to load the html content:
if(true){
var content = $('#someHtml').html();
$.fancybox({
'content': content,
'padding' : 20
});
}else{...}
Related
i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});
Found several similar questions, but not the answer to this specific one..
Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?
I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.
Thanks to all in advance..
You can modify the default fancybox template to add some extra HTML in. Like so:
Your HTML:
Click
Javascript:
$(".fancybox").fancybox({
type: 'iframe',
beforeLoad: function() {
var caption = this.element.attr('data-caption');
this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'
},
helpers: {
title : {
type : 'inside',
position: 'top'
}
}
});
I've used an iFrame as an example, but this should work for any Fancybox type.
JS Fiddle here:
http://jsfiddle.net/WillDonohoe/thy0om73/
Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs
Okay. So I hope this is specific enough.
I'm, kind of new to mustache, but see it has great potential, so why not use it.
I'm making a quite big form, and want to have the form built with mustache. So i have started to make the form in mustache and, then i realized i want to template the form-elements. One template for how i want every narrow input, wide input, select etc. to look like. because now i'm repeating myself.
My template and partials are provided through $.ajax get, where the main form template are defined as a mustache file, with html content, and the partials are defined as a mustache file with every template inside -tags.
Variables for mustache to use. This object is somewhat subject for change.
var jsonForm = {
oneInputField: {
value:'put your title here',
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
}
},
oneSelect: {
options: [
{value: '- Pick one -', helper: 'helper', select_options: {disable_search: true}},
{value: 'option1', selected: true},
{value: 'option2'},
{value: 'option3'},
{value: 'option4'}
],
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
}
}
};
How i fetch the data
$.ajax({
url: 'myForm.mustache',
type: 'get',
success: function(template) {
$.ajax({
url: 'myFormElements.mustache',
type: 'get',
success: function(partials) {
var $html = Mustache.render(template, jsonForm.fields, partials);
$('div#formContent').html($html);
$('div#formContent select').chosen();
if (jsonForm.fields.title.length > 1) {
$('div#header').html(jsonForm.fields.title);
}
}
});
}
});
Partials. Would actually like to have it all in separate files, but it doesn't seem to be possible without making a ton of ajax calls, so I keep with my current two mustache templates.
<script type="text/html" id="inputNarrow">
<label>{{label}}:</label><input value="{{value}}">
{{#rule_set.required}}<div class="required">*</div>{{/rule_set.required}}
{{^rule_set.required}}<div class="not-required"> </div>{{/rule_set.required}}
<div class="clearfix"></div>
</script>
and my form-template
<div id="formContainer" class="border-box">
<div class="group-box">
<p>Fields marked with <span class="required">*</span> are required to complete the form</p>
</div>
<div class="group-box">
<h2>Partial element test</h2>
<div class="form-container">
{{>partials.inputNarrow}} <-- I have to be able to specify what data I want to enter here.
</div>
<div class="form-container">
{{>partials.selectNarrow}} <-- I have to be able to specify what data I want to enter here.
</div>
</div>
So my question is is it possible for a bigger one big unique mustache-template to use "element"-templates (also in mustache), for rendering?
I am not very open to adding additional libraries to my project, like ICanHaz or similar, since this is for work.
Really sorry if this question is answered before, but I couldn't find it
I found an alternative way of doing what I tried to do.
I'm not sure if it's any good, but it does the job.
I used the possibility of making functions inside the object sent to the main-tempalte "form-template".
wich looks like this:
var smallRender = function(url, containerId, objData) {
$.ajax({
url: url,
type: 'get',
success: function(template) {
var $html = Mustache.render(template, objData);
var $objContainer = $('div#' + containerId);
$objContainer.append($html);
}
});
};
the actual object
oneInputField: {
value:'put your title here',
rule_set: {
required: {
strName: 'required',
strErrorMsg: 'error message'
}
},
getRendered: function() { // I would like to cache this somehow
smallRender(templateUrl.input.narrow, jsonForm.fields.title.containerId, {
label: jsonForm.labels.title,
field: jsonForm.fields.title,
required: isRequired(jsonForm.fields.title)
});
}
},
So basicly i send an ajax call to get the main template, and for each element in the form I want to present, i call on the getRendered in main-tamplate mustache, and it basicly renders the content with the smaller template.
tempalte url is basicly a collections with the urls to all the templates. so if I specify templateUrl.input.narrow i will get the narrow input element and so on.
Not sure as I mentioned if this is the "correct" way of doing it, or how good it will scale in a big environment, but it works.
I will mark my this as the correct answer (if I'm even allowed), since there are no other answers that solves my problem.
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});
I want to use TinyMCE editor in a overlay dialog.. Is that possible?
I have latest version TinyMCE and Jquery Tools Overlay.
JQuery Tools Overlay: http://flowplayer.org/tools/demos/overlay/index.html
I ran into a few issues with this, apparently tinymce doesn't play nicely with hidden elements, and gets confused when you write over elements it's attached to. Anyway, got it to work by using overlay's hooks, making a synchronous js call (this is the crucial part), and detaching tinymce before closing it. Code:
$(".overlayed").overlay({
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
var url = this.getTrigger().attr("href");
$.ajax({
url: url,
async: false,
dataType: "html",
type: "GET",
success: function(data){
wrap.html(data);
}
})
},
onLoad: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceAddControl', false, $('.mceEditor').attr('id'));
}
},
onBeforeClose: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceFocus', false, $('.mceEditor').attr('id'));
tinyMCE.execCommand('mceRemoveControl', false, $('.mceEditor').attr('id'));
}
this.getOverlay().find(".contentWrap").html("");
}
});
Code could be more elegant but works 100% of the time ;)
Hope this helps someone!