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>
Related
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>
Trigger the image when i click submt button and in current active tab
<form name="myform" onsubmit="return onsubmitform();">
<input type="submit" name="operation" onclick="document.pressed=this.value" value="GetCATHY"/>
</form>
<script type="text/javascript">
function onsubmitform()
{
if(document.pressed=='GetCATHY')
{
document.pressed.action="img src=a.jpg";
}
}
You can easily do this using jQuery.
However this is pretty simple stuff so I suggest doing a bit of reading and practice on basic html.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#hidden").show();
});
});
</script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<form><input type="submit" id="submit"></form>
<div id="hidden" class="hidden">IMAGE</div>
</body>
</html>
When I clicked print button, the print preview was failed only Google chrome. Other browsers are working fine. I couldn't find out this problem. Why print preview is failed?
<!doctype HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function PrintImage() {
var x = window.open('','_blank','location=0');
x.document.body.style.margin = '0';
x.document.body.innerHTML = '';
x.document.write("<!DOCTYPE html>");
x.document.write("<html style='margin:0px;'><head></head><body onload='printpage()' style='margin:0px;'>");
x.document.write("<img src='http://10.78.129.248:8080" + $('#imgFront').attr('src') + "' style='margin:0px;border:0px;display:block;height:100%;width:100%;" /* + $('#imgFront').css('height') + "; width:" + $('#imgFront').css('width') + */ + "'/>");
x.document.write("</body></html>");
x.document.close();
x.focus();
x.print();
x.close();
}
</script>
</head>
<body>
<img id="imgFront" src="/badgeimagehandler.jpg" align="middle" border="0" style="width: 80mm; height: 50mm" />
<form>
<input type="submit" name="btnPrint" value="Print" onclick="javascript:PrintImage();" language="javascript" id="btnPrint" /> <!-- -->
</form>
</input>
</body>
</html>
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 want to print a div with css. Its working with me when I apply inline css but in external and internal css its not working. Below is my code,
<script src="jquery.jqprint.0.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#PrintButton").click( function() {
$('#divToPrint').jqprint();
return false;
});
});
</script>
<style type="text/css">
#media screen,print
{
.test {background:#0F0; width:500px; height:200px;}
}
</style>
<input id="PrintButton" type="button" name="Print" value="Print" />
<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
I have tried your code, it seems to be working fine with external CSS.
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqprint-0.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="test.css">
<script language="javascript" type="text/javascript">
$(function() {
$("#PrintButton").click( function() {
$('#divToPrint').jqprint();
return false;
});
});
</script>
</head>
<body>
<input id="PrintButton" type="button" name="Print" value="Print" />
<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
<body>
</html>
and external css file name : test.css
#media screen,print
{
.test {
background:#0F0; width:500px; height:200px;
}
}