Below is my JSP code:
<tr>
<td colspan="2">custEmail</td>
<td colspan="5"><div id= "custEmail"><p><strong>Test</strong></p></div></td>
</tr>
Below is the code attaching the div with TinyMCE Editor
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
width : "640",
mode : "exact",
elements : "custEmail",
theme : "advanced",
plugins : "preview",
readonly : true,
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
</script>
But on my HTML page, I see the content as:
<p><strong>Test</strong></p>
Instead of Bold Test. As soon as I change the following:
div id="custEmail" tag to textarea id="custEmail"
It works fine. Not sure if I need to have some setting for div tag?
All you need to do is to set forced_root_block to 'div' :
tinyMCE.init({
...
forced_root_block : 'div'
});
Related
I have a jquery ui dialog which is defined as this:
$('#processPosition').dialog({
autoOpen : false,
open: function ()
{
dialogProps.originalContent = $("#processPosition").html(),
dialogProps.type = $(this).data('type');
$('#' + dialogProps.type).appendTo($(this));
$('#rejectPosition').appendTo($(this));
$("#processPosition .template").removeClass("template");
},
show : "blind",
modal : true,
resizable : false,
scrollbar : false
});
This is how i open it:
$('#processOrderPosition').dialog({width: 800})
.dialog('option', 'position', 'center')
.dialog("open");
This is the only css of the template class:
.template
{
display: none;
}
Html template divs:
<div id="SAP-flst-Dialog" class="template">
<h4>Header</h4>
<div class="row">
<span>Some text</span>
</div>
</div>
<div id="rejectOrderPosition" class="template">
<h4>second Header</h4>
<span>Some more Text</span>
</div>
I also tried to set the position attribute after opening it, but with no effect. In the dev tools of my browser i can see, that a div is generated by jquery and this div has a wrong value for the css top attribute. The div has the following classes: ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable
What is causing the wrong top value?
https://jsfiddle.net/c85fo36u/6
$(document).ready(function(){
$('#processPosition').dialog({
autoOpen : false,
open: function ()
{
dialogProps.originalContent = $("#processPosition").html(),
dialogProps.type = $(this).data('type');
$('#' + dialogProps.type).appendTo($(this));
$('#rejectPosition').appendTo($(this));
$("#processPosition .template").removeClass("template");
},
show : "blind",
modal : true,
resizable : false,
scrollbar : false
});
$('#processPosition').dialog().dialog("open");
})
Look at this fiddle, i have added border to div to see that is centered.
$.fancybox({
content: '<button>prev</button><button>next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
I simply open images in fancybox. I want to add some html button in fancybox but problem is that it is override the image. but I don't want to override the image so I want to add button outside the image.
Any help?
How about you try having z-index?
<style>
.btn1 {z-index: 5;}
</style>
<html>
...
<html>
<script>
$.fancybox({
content: '<button class="btn1">prev</button><button class="btn1">next</button>',
href: src,
'autoScale': false,
'transitoinIn': 'none',
'transitionOut': 'none',
.......
});
Or you can try having your buttons in the html and position it to absolute.
I am opening fancybox automatic when page load and for this, I am using trigger method with a hidden link inside the page, The problem is fancybox popup loading but its missing overlay, just that overlay is not opening.
I am using fancyBox v2.1.5
This is the code I am using
$(".login_signup_lb").fancybox({
maxWidth: 450,
autoSize: true,
fitToView: true,
openEffect: 'none',
closeEffect: 'none',
closeBtn: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.6)'
}
}
}
}).trigger("click");
This is the html code which is hidden in the page
<a id="login_signup" class="login_signup_lb fancybox.ajax" href="fileurl.html" style="display:none;">
Lightbox
</a>
Try to trigger after creating fancybox
$(".fancybox.ajax").eq(0).trigger('click');
Here is jsfiddle
I am trying to popup the url using the lightbox, when i click the button, the lightbox call has been made, but the given url is not pop-up in the light box.
when i click the button it is showing popup with just small white screen
here is code i have used
code:
<a class="example-image-link" href="uitab/index.html" data-lightbox="example-1"><input class="buton" type="button" value="View details" name="View details"></a> </td>
how can i solve this?
try to use something like that may be it helps
<a class="various fancybox.ajax" href="uitab/index.html">Ajax</a>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
and read the example url here
http://fancyapps.com/fancybox/
Attempting to implement fancybox2 which will open a hidden div(maybe where the user clicks or predefined location).
The div
<div class="catSelections" style="display:none"><ol class="selectable ui-selectable"><div class="ui-selectee"><p class="ui-selectee">Dwelling Pictures</p><p class="ui-selectee"></p><li parentid="1" id="3" class="ui-widget-content ui-selectee">Front of Risk</li><li parentid="1" id="8" class="ui-widget-content ui-selectee">Right side of risk</li><li parentid="1" id="9" class="ui-widget-content ui-selectee">Left side of risk</li></div></ol></div>
The method I am invoking on a specific action(when user clicks on a photo div)
function addFancy(div){
$(".catSelections").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
}
Am I approaching this in the wrong way?
Error message
Uncaught TypeError: Object [object Object] has no method 'fancybox'
js loaded at bottom of page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
..
..
..
Ended up using jquery UI dialog to accomplish this. Seemed like a better fit.
$(".catSelections").dialog({
width: 450,
height: 400,
}
);