I am in process of learning.I wanted to try an qrcode generator project.The project works fine.I have two small doubts.Can someone suggest me anything,It would be very helpful.Thank you guys.
1.How can I save my generated QR code image ?
2.How to set a limit for data entry ? (i mean to set a limit for the value to be entered in the code)
<!DOCTYPE html>
<html lang="en">
<head>
<title>QRCode generator </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="string" value={"foo":"35"}; style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:20px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 150,
height: 150,
colorDark: "#1b1076",
colorLight: "#ffffff",
});
function makeCode() {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text,#color").
on("blur", function() {
makeCode();
}).
on("keydown", function(e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>
Related
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
Hi, Folks! My goal is create HTML file without external Javascript.
Everything works in https://jsfiddle.net. But, when I open the HTML file the search script is no longer available.
What should I fix on the below code?
Thanks for any help
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
//--><!]]>
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
You have included Jquery after your js code, which is wrong jQuery must be loaded before any other code related to jQuery and cdata is irrelevant here thats not required anymore
https://jsbin.com/lubowovani/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
</script>
</head>
<body>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
The code in your head is running before you import jQuery (which you do in the body). That code utilizes jQuery, so it will not be able to find jQuery when it tries to use it (since it's not loaded yet).
Move your jQuery script tag to the head above the code that needs it.
For future reference simple errors like this can be solved easily by using the dev tools of most browsers. For example, in chrome the console is showing Uncaught ReferenceError: $ is not defined, which can easily be interpreted as jQuery not being present for a script that is trying to use it. You can open them up by hitting F12.
You have to include jQuery file before you use it.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<!-- === HERE === -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- === HERE === -->
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
//--><!]]>
</script>
</head>
<body>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
I have two javascript files, js1 and js2.
js1 is defined in index.jsp. and inside js1 i'm using js2. once i'm executing js2 i want to take some values from index.jsp. (js2 can't define in ndex.jsp file)
so,
How can i access html using this external js file (js2)
this is my index.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js1.js"></script>
</head>
<body>
<h1>test</h1>
<span id="up"></span>test<br><br><span id="down"></span>
<br><br>
Time : <span id="foo"></span>
<br><br>
<div id="uid" >this is the value i want to access</div>
<button onclick="start()">Start sync</button>
</body>
this is js1.js
navigator.serviceWorker.register('js2.js', { scope: '/login/' }).then(function(reg) {
if(reg.installing) {
console.log('Service worker installing');
} else if(reg.waiting) {
console.log('Service worker installed');
} else if(reg.active) {
console.log('Service worker active');
}
//setTimeout(refresh, 10000);
}).catch(function(error){
console.log('Registration failed with ' + error);
});
this is js2.js
var eventSource2 = new EventSource("HelloServlet");
eventSource2.addEventListener('down_vote',function(event){
console.log("data from down" , event.data);
var MyDiv1 = document.getElementById('uid'); //this is not working
var val = MyDiv1.innerHTML; //this is not working
console.log(val + "ddddd 2"); //this is not working
console.log("down");
});
There is a mystery variable index
var MyDiv1 = index.getElementById('uid'); //this is not working
should probably be
var MyDiv1 = document.getElementById('uid');
You are including js1.js at the beggining of you main page, so it can't find the DOM elements of index.jsp
You should include js1.js at the end of index.jsp
or include it in document.ready() of index.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>test</h1>
<span id="up"></span>test<br><br><span id="down"></span>
<br><br>
Time : <span id="foo"></span>
<br><br>
<div id="uid" >this is the value i want to access</div>
<button onclick="start()">Start sync</button>
<script type="text/javascript" src="js1.js"></script>
</body>
Hi i ve got a problem with my phonegap application
so here is my html code
<body>
<script>
window.onload = function() {
document.getElementById("a_next").onclick = function(e) {
e = e || window.event;
var els = document.getElementsByTagName("input"),
i;
for (i=0; i < els.length; i++) {
if (!els[i].checked) {
alert("Not all points on your checklist, are checked!");
return false;
}
}
};
};
</script>
<div id="topbar">
<div id="title">
Walk Around Check</div>
<div id="leftnav">
HomeOverview</div>
<div id="rightnav">
Next</div>
</div>
<div id="content">
<ul class="pageitem">
<li class="radiobutton"><span class="name">Electronic List - check all items</span>
<input name="1" type="radio" value="other" /></li>
</ul>
</div>
<div id="footer">
<!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) -->
<a class="noeffect" href="katana_checklist_walaroundcheck.html">Reset Checklist</a><br /><br />
<a class="noeffect" href="http://www.aerosoft.com">Aerosoft</a></div>
</body>
So i want to add or replace the javascript alert with a phonegap alert
document.getElementById("a_next").onclick = function(e) {
e = e || window.event;
var els = document.getElementsByTagName("input"),
i;
for (i=0; i < els.length; i++) {
if (!els[i].checked) {
alert("Not all points on your checklist, are checked!");
return false;
}
}
};
So i would in
<head>
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</head>
And let the alert appeal next to the javascript alert
<body>
<script>
window.onload = function() {
document.getElementById("a_next").onclick = function(e) {
e = e || window.event;
var els = document.getElementsByTagName("input"),
i;
for (i=0; i < els.length; i++) {
if (!els[i].checked) {
alert("Not all points on your checklist, are checked!");
showAlert();
return false;
}
}
};
};
</script>
This dont work and crashs my hole check for "all are checked" anyone could help?
window.onload = function() {
document.getElementById("a_next").onclick = function() {
document.getElementsByTagName("input").each(function () {
if (!jQuery(this).checked) {
alert("Not all points on your checklist, are checked!");
showAlert();
return false;
}
});
};
};
Versuchs mal damit
Nein der andere Code sollte da nichts blocken.
Here it works:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alertDismissed
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</script>
</head>
<body>
<p>Show Alert</p>
</body>
</html>
Here it dont works:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alertDismissed
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</script>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="pics/iosIcon.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
</head>
<body>
<p>Show Alert</p>
</body>
</html>
Any of my other includes maybe blockes the alert?^^
UPDATE
Oki i see if i exclude the function.js it works
var iWebkit;if(!iWebkit){iWebkit=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a.length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hideURLbar()};iWebkit.init()}}
I am working on a clipboard functionality...
I am facing mouse-events issues... In below code, when I remove label tag and style="display:none" class="hide" , my clipboard functionality is working, but clipboard functionality is not working..
Please kindly check below code: what changes I need to make so that it works perfectly?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
<link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('texter');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var clip = new ZeroClipboard.Client();
clip.setText('');
jQuery('#copy-button').click(function(){
clip.setText(jQuery('#texter').val());
});
});
$(document).ready(function () {
var clip = new ZeroClipboard.Client();
clip.setText(''); // will be set later on mouseDown
clip.addEventListener('mouseDown', function (client) {
// set text to copy here
clip.setText(jQuery('#texter').val());
// alert("mouse down");
});
clip.glue('copy-button');
});
</script>
</head>
<body>
<label onmouseover="myfunc2()">Click here</label>
<textarea name="texter" id="texter" style="display:none" class="hide" readonly>sdfdsfsdfgdfdfg</textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />
</body>
</html>