This topic contains 4 replies, has 2 voices, and was last updated by polly.woodhouse@agile.co.nz 9 years, 8 months ago.
-
Hi,
I would be very pleased if you would please help me.I have put the HTML Editor inside the Window jqWidget dialog box.
However, I get strange behaviour, and would be grateful if you would please have a look at it. I have included my project for you which shows this behaviour.
1/ In Chrome v43 – Pasting Content > View Source –
Freezes Editor
When I paste content into the Editor and then press the View Source tool button, everything is frozen.2/ In Chrome v43 – Deselection Occurs with Drop Downs
I select a portion of text, then select the Font Size drop down and set the text say to 14 pt
I then select a completely different portion of text, and select the Font Size drop down to set the text to say 18pt.
Result: my selection is deselected and my 1st selection is now selected.This same behaviour occurs with all the drop down boxes.
3/ In FF v 39 – I can’t write anything in the HTML Editor at all
4/ In IE 11 – the HTML Editor doesn’t function at all
I have a copy of my project code below, and if you would like me to send you the package please let me know how I can send it.
Looking forward to hearing from you,
Regards,
Polly
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ /><title>HTML Editor</title>
<link rel=”stylesheet” href=”scripts/jqwidgets/styles/jqx.base.css” />
<!–<script type=”text/javascript” src=”/scripts/jquery-2.1.3.min.js”></script>–>
<!– <script type=”text/javascript” src=”scripts/jquery-2.1.3.min.js”></script>–>
<script type=”text/javascript” src=”scripts/jquery-2.1.4.min.js” ></script>
<!– doesn’t work with this library
<script type=”text/javascript” src=”/scripts/jquery-1.11.1.min.js”></script>–>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxcore.js”></script> <!–ok–>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxlistbox.js”></script><script type=”text/javascript” src=”scripts/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxdropdownbutton.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxcolorpicker.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”scripts/jqwidgets/jqxcheckbox.js”></script><script type=”text/javascript” src=”scripts/jquery-ui-1.10.4.custom.min.js” ></script>
<style>
.header{
background-color:#0099FF;
width:800px;
height: 40px;
padding: 20px;
border-top-style:solid;
border-top-width:thick;
border-top-color:#0033CC;
border-right-style:solid;
border-right-width:thick;
border-right-color:#009966;
border-left-style:solid;
border-left-width:thick;
border-left-color:#009966;
font-size:18px;
font-weight:bold;}
.theBody{
background-color:#33FFCC;
width:800px;
height: 300px;
padding:20px;
border-bottom-style:solid;
border-bottom-width:thick;
border-bottom-color:#0033CC;
border-right-style:solid;
border-right-width:thick;
border-right-color:#009966;
border-left-style:solid;
border-left-width:thick;
border-left-color:#009966;
}#buttonArea{
float: right;
margin-top: 20px;}
.marginRight{
margin-right:10px;
}.theButtons{
width:90px;
height: 40px;
color:#000000;
margin:10px;border-top-style:solid;
border-top-width:thick;
border-top-color:#0066FF;border-bottom-style:solid;
border-bottom-width:thick;
border-bottom-color:#009966;border-right-style:solid;
border-right-width:thick;
border-right-color:#0066FF;border-left-style:solid;
border-left-width:thick;
border-left-color:#009966;
}</style>
</head>
<body>
<div id=”jqxWidget” style=”display:none;”>
<div id=”anotherDialog” >
<div class=”header”>
Your Opinion Matters – to us
</div> <!– end of header div –><div class=”theBody”>
Let us put the editor in here
<textarea id=”theEditor”> </textarea><div id=”buttonArea”>
<input type=”button” id=”okBtn” value=”OK” class=”marginRight theButtons” />
<input type=”button” id=”cancelBtn” value=”Cancel” class=”theButtons” />
</div></div> <!– end of theBody div –>
</div> <!– end of another Dialog div –>
</div> <!– end of jqxWidget div –>
<!–<input type=”button” value=”Start Editor” onClick=”openDialog()” ></input>
–><input type=”button” value=”Show Dialog” autofocus onClick=”showTheDialog()”></input>
</body>
<script type=”text/javascript”>
$(document).ready(function () {
debugger;
//setUpEditor();
//setUpDialog();
});
function setUpEditor(){
debugger;
$(‘#theEditor’).jqxEditor({
height: “400px”,
width: ‘800px’
});}
function setUpDialog(){
debugger;
// let us call the setUpEditor method
setUpEditor();$(‘#anotherDialog’).jqxWindow({
height: 650,
width: 900,resizable: false,
// these are important if we set resizable to true
maxHeight: 1000,
maxWidth: 1200,
minHeight: 80,
minWidth: 100,// i.e. it blocks the rest of the page from user interaction
isModal: true,// when this is set to 1 the background window is pitch black
modalOpacity: 0.3,
//link to your OK and Cancel buttons
okButton: $(‘#okBtn’),
cancelButton: $(‘#cancelBtn’),
initContent: function () {this.focus(); // set the focus to the modal window
// OR
// $(‘#cancelBtn’).focus(); // set the focus to the cancel button
}
});}
function showTheDialog(){
debugger;
setUpDialog();
$(‘#anotherDialog’).jqxWindow(‘open’);
}
</script>
</html>
You must be logged in to reply to this topic.