Open tinymce editor upon clicking icon - javascript

Upon loading the page, I wish the tinyMCE editor to be closed. Upon clicking an element (and not the text, thus I don't think I should use inline mode), I wish to open it. I've found a couple ways of doing so. Is there a "right" way, and if so, what is it?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"></script>
<style type="text/css">
#content {height:200px;width:400px;border: 1px solid;}
</style>
<script type="text/javascript">
$(function(){
// Don't want this as I want to edit upon clicking "edit" and not inline
tinymce.init({
selector: '#content',
width : 400,
height: 200,
inline: true,
});
// Don't like this as I think it is ineffient, and the screen flickers
$('#edit').click(function(){
tinymce.init({
selector: '#content',
width : 400,
height: 200
});
});
// Is this how I should do it?
tinymce.init({
selector: '#content',
width : 400,
height: 200,
setup : function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$('#edit').click(function(){
//BOth seem to work. What is the right way?
//tinymce.editors['content'].show();
tinymce.get('content').show();
});
});
</script>
</head>
<body>
<div id="content">Initial content goes here</div>
<button id="edit">Edit</button>
</body>
</html>

Related

Dim background screen when modal popup opens

I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!
Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview

how to add draggable "add image" icon in jquery

I am curious to know how to add add image icon using jquery as in stack overflow. When user clicks it, it increases its size and goes wherever user places it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<image src="/addImage" />
</div>
</body>
</html>
Here I have added simple image on which user should able to place where he wants to place image. I don't know how to increase the size of that div after dragging. Also I want to get the position where user have added it.
I also want it should ask to browse on pc to upload a image
This code will increase the size of the draggable after it is been dragged and will return the position (as offset) of the draggable-element:
$(function () {
$("#draggable").draggable({
stop: function( event, ui ) {
ui.helper.css({
width: '200px',
height: '200px'
});
$('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
}
});
});
Demo
Reference
.draggable()

JavaScript change page effect

Hi by any chance anyone will know how to do the fade in fade out change page effect in JavaScript?
Like this..
http://soulwire.co.uk/hello
I have tried this..
But when fadeout is not linking together..I mean not smooth like the above website.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
</script>
Sorry am just think of....does background slideshow will work??? But on top can I add php/html code?
Another example...http://www.louisebradley.co.uk/portfolio/
Hey try the below code
See its WORKING DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
function Close()
{
$('#div1').animate({ height: 50 });
}
function Open()
{
$('#div1').animate({ height: 100 });
}
</script>
</head>
<body>
<div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>
</html>
Also take a look at these stuffs
Fade in div on page load
JavaScript Fade Tutorial – Fading Elements In/Out
How to: javascript fade in fade out text
.fadeIn() Tutorial

droppable div inside iframe div in jquery ui

our problem :
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
so see code :
inner iframe page (inner_iframe.html):
<body style="cursor: auto;">
<div id="container">
</div>
</body>
main page :
<div id="main">
<iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
<div id="container1">
<div class="drag" style="left: 20px;" id="lable"></div>
</div>
JavaScript code :
$("#containeriframe").load(function () {
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('#container').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$( "#lable" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
iframeFix: true
});
now i use Jquery 1.8 and Jquery UI.
so i load page and try to drop in iframe div but no respond , so how to manage it.
please help me ....
Thanks
This works for me:
Main page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function () {
$("iframe").load(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').draggable();
});
</script>
</head>
<body>
<iframe src="iframe.html"></iframe>
<div style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>
iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>

Javascript: designMode for iframe doesn't work with FF when in jQuery dialog

here's the sample code (fully working - just copy to an empty html file and it will work):
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
function Init()
{
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
}
</script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey">
<iframe id="iView" style="width: 200px; height:70px" frameborder="0"></iframe>
</div>
<script type="text/javascript">
var dlg = null;
jQuery(document).ready(function() {
Init();
dlg = jQuery("#dlgDiv").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 400
})
dlg.dialog('open');
})
</script>
</body>
</html>
Now, when I run this in IE, I can edit contents of iframe; also using IE Developer Toolbar I can see that body of iframe preserves class "some-class" I specified.
But, when running this in FF, iframe is not editable, and when inspecting its DOM with firebug, i see that iframe's body is empty and has no class. So looks like for FF dialog makes a shallow copy of the div instead of using the div itself (dlgDiv) for dialog, or something like that...
Basically that means that NONE of javasript based rich text editors would work in a jQuery dialog in FF (and btw Google Chrome as well) - thats a big bad issue (I have tried two so far and that's how I started looking into this issue)!
Any ideas/comments/suggestions on how I could approach this, are highly appreciated!
Thank you,
Andrey
the init should be after the open
var dlg = null;
jQuery(document).ready(function() {
dlg = jQuery("#dlgDiv").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 400
})
dlg.dialog('open');
Init();
})

Categories

Resources