I have used nicEditor in my winforms by loading a web browser and loading the nicEditor inside it. By default when the editor loaded and after that I click in the middle of the editor the focus doe not go to nicEditor. But if I click right at the start of the editor, focus is set to the editor. Following is my HTML file code.
<html>
<head>
<script type="text/javascript">
var myInstance = "";
function GetContent() {
//window.alert(""+myInstance);
//var content = tinyMCE.get('tinyMceEditor').getContent();
//content = content.replace("<body>", "<body style=\"font-size:10px;\">");
//var content = nicEditors.get('area3').getContent();
var content = myInstance.instanceById('editor').getContent();
//window.alert(myInstance.instanceById('editor').getContent());
return content;
}
function SetContent(htmlContent) {
setTimeout(function () {
//window.alert(htmlContent);
//nicEditors.get('area3').setContent(htmlContent);
myInstance.instanceById('editor').setContent(htmlContent);
if (htmlContent == undefined || htmlContent == '')
myInstance.instanceById('editor').setContent('');
//tinyMCE.get('tinyMceEditor').readOnly = true;
}, 100);
}
</script>
<script type="text/javascript" src="jscripts/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Please help.
Its working with this way.
but i am not getting what you are trying to do using below script .
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
here is my simple HTML . Now let me know what exactly you want to do .
<html>
<head>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Looking for something like this,
Just let me know if i am wrong anywhere.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.heightClass {
min-height: 338px !important;
}
</style>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
$(document).on("focus" , ".nicEdit-selected" , function () {
var parentTag = $( this ).css("height" , "338px");
//$( this ).addClass("heightClass");
//alert(parentTag);
});
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Related
This is my HTML code. I need to save the content as pdf, whatever I'm giving in the text area. By this code I'm facing two problems.
I can save the pdf, but there is no content inside the textarea
When I click the as pdf it downloading only once, not again.
Please help me to solve this issue
<!DOCTYPE html>
<html>
<head>
<title>file</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body id="target">
<p> reason:</p>
<div>
<textarea id="content" rows="4" cols="70"></textarea>
</div>
<div id="editor"></div>
<button id="cmd" onclick="save()">as pdf</button>
script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js">
</script>
<script>
var doc= new jsPDF();
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML(
$('#content').html(), 15, 15,
{ 'width': 170, 'elementHandlers': specialElementHandlers });
doc.save('Reason.pdf');
} );
</script>
</body>
</html>
See below
<html>
<head>
<title>file</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body id="target">
<p> reason:</p>
<div>
<textarea id="content" rows="4" cols="70"></textarea>
</div>
<div id="editor"></div>
<button id="cmd">as pdf</button>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<script>
var doc= new jsPDF();
$('#cmd').click(function () {
doc.text($('#content').val(), 10, 10);
doc.save('Reason.pdf');
});
</script>
</body>
</html>
I am trying to override some click event on the following domain but it won't work. After clciking on call button it will open a dialog, where it has a apply button I want to go some other website when click on that button, now it opens another dialog after clicking on that button. I have used the following code to override the click event but it dose not work.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
var soload = {"lang":"en","dir":"LTR","cookieOptions":{"domain":".hellobrokers.com"},
"packages":{"Clock":{},
"RegularPlatform":{"settings":{"selector":"#so_container"}}
}};
/* ]]> */
</script>
<script type='text/javascript' src='//spotplatform.hellobrokers.com/SpotOptionPlugin.js?ver=4.1.1'></script>
<script type="text/javascript">SO.load(soload);
</script>
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6022904954366', {'value':'0.01','currency':'EUR'}]);
</script>
</head>
<body>
<div id="bgbanner">
<div id="index">
<div class="mainContent">
<div id="so_container">
<div align="center" class="please_wait">
<img border="0" src="img/ajax-loader.gif" alt="" /><br />
<br />
Please Wait<br />
<br />
Loading</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.applyApprove').unbind();
$(".applyApprove").click(function() {
window.location = 'http://www.google.com';
});
});
</script>
</body>
</html>
Instead of .unbind(), use .off('click') and it should work:
<script>
$(document).ready(function(){
$("button.applyApprove").off('click');
$("button.applyApprove").click(function(){
window.location = "http://www.google.com";
});
});
</script>
Just use $('.applyApprove') instead of $('button.applyApprove') (notice no button):
<script>
$(document).ready(function() {
$('.applyApprove').unbind();
$(".applyApprove").click(function() {
window.location = 'http://www.google.com';
});
});
</script>
I have a upload-file-form in home.php. When a file is uploaded successfully the home.php loads the upload.php where I have a form there the user can write the information about the mp3 file, info like artist name and things like that. I want to implement the Autocomplete script by jQuery. But the autocomplete don't work when it get loaded through javascript code but it work when I visit the page upload.php. What can be the problem?
Home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
Upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
Script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
You're executing the script before the DOM element is ready.
You can do several different things to solve it, for example:
Load your script at the bottom of the page
Move your script inside document ready event, so the DOM element is available
$(document).ready(function() { -your script here- });
you can use ajax to use auto complete type plug-in..
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>
I am trying to write a code which will take the input from user and create a draggable for the input. I could write HTML and CSS using javascript but when I try to do the same for jquery; its not working. Where am i going wrong ?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function init() {
var op=document.getElementById("inputo").value;
document.write("<style>" + "#" + op + "{color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px; }" +"<br>" + "</style>");
document.write("<h1 id=" + op + ">" + op + "</h1>");
document.write("<script>" "<br>"+ " $(document).ready(function() { #op.draggable();});" +"</script>");
}
</script>
</head>
<body>
Draggable:
<input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>
</body>
</html>
You need to load jquery.min.js BEFORE jquery-ui.min.js, AND *do not nest script*s, so your <head> tag should be:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
function init() {
/*...SOME STUFF HERE*/
}
</script>
</head>
instead of document.write, you can add a tag like this.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp- content/themes/jquery/css/base.css?v=1">
<script>
function init()
{
var op=document.getElementById("inputo").value;
var string = "<h1 class='test' style='color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px;'>" + op + "</h1>";
$("#container").html(string);
$(".test").draggable();
}
</script>
</head>
<body>
Draggable: <input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>
<div id="container"></div>
</body>
</html>
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>