JavaScript TouchEvent did not work - javascript

Recently I started play with TouchEvent.
I would like to ask why this code does not work.
Why DIV "coords" does not display any result.
I used the code from:https://mobiforge.com/design-development/html5-mobile-web-touch-events
<!DOCTYPE html>
<html lang ="pl-PL">
<head>
<meta charset="utf-8"/>
<style>
#touchzone{
width:300px;
height:300px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="coords"></div>
<div id="touchzone"></div>
<script type="text/javascript">
window.onload=function(){
function init() {
var touchzone = document.getElementById("touchzone");
touchzone.addEventListener("touchstart", touchHandler, false);
}
}
function touchHandler(event) {
var coords = document.getElementById("coords");
coords.innerHTML = 'x: ' + event.touches[0].pageX + ', y: ' + event.touches[0].pageY;
}
</script>
</body>
</html>

Related

How to get mouse position from a iframe that contains a page?

I want to get mouse position from an IFRAME that contains a HTML page .
But before Iframe HTML page load , this code work nice .
After loading Iframe HTML page , this code don't work !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<style>
#divid {
height: 600px;
width: 300px;
border: 2px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<iframe id="iframe" src="http://www.google.com/" >
</iframe>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
</script>
</body>
</html>
can you help me please ?

Missing Images on print

I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>

Javascript can't acces to HTML(moving object left-right)

my file:
index.html
client
css
style.css
js
javascript.js
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
<script type="text/javascript" src="client/js/javascript.js"></script>
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
</body>
</html>
javascript.js
var guy=document.getElementById('guy');
var container=document.getElementById('container');
var guyLeft=0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
}
document.onkeydown =anim;
style.css
#container{
height:400px;
width:600px;
outline:1px solid black;
position: relative;
}
#guy{
position: absolute;
height:50px;
width:50px;
outline:1px solid black;
background-color:red;
left:0;
}
1)So guys pls help.. I just want to move object left and right .. when i put that code between in index.html it works but in seperate javascript.js class doesn't work. Thx for help.
1) You have to load the JavaScript at the bottom of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
<script type="text/javascript" src="client/js/javascript.js"></script>
</body>
</html>
2) Move up and down:
var guy = document.getElementById('guy');
var container = document.getElementById('container');
var guyLeft = 0;
var guyTop = 0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
// UP
if(e.keyCode==38) {
guyTop -=2;
guy.style.top = guyTop + 'px';
}
// DOWN
if(e.keyCode==40) {
guyTop +=2;
guy.style.top = guyTop + 'px';
}
}
document.onkeydown = anim;
You should use the console if you want to catch bugs and errors in JavaScript.

How to center text with dynamic length at a give point?

I have the following function which needs to print dynamically generated text(txt) centered at a given point(x,y)
function printText(x,y,txt) {
var s = "";
s = "<b style=???>"+txt+"</b>";
document.getElementById("some_div").innerHTML = s;
}
How can I do this?
Make the position of the div relative and use absolute positioning on the inner element, something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
#some_div {
postion:relative;
height:300px;
}
#some_div b {
position:absolute;
}
</style>
<script>
function printText(x, y, txt) {
var s = "<b style=\"left:" + x + "px;top:" + y + "px;\">"+txt+"</b>";
document.getElementById("some_div").innerHTML = s;
}
</script>
</head>
<body>
<div id="some_div"></div>
<button onclick="printText(100, 40, 'This is a test');">Click Me</button>
</body>
</html>

Javascript function subtract from div not working.

I want to subtract 50px from a div with a javascript function when it is called. Why isnt this working?
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id)
{
obj.style.height = ( parseFloat( obj.style.height ) - 50 ) + 'px';
}
</script>
<style type="text/css">
#divId{
background:blue;
width:300px;
height:100px;
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>
You do not define obj or a style property for height, and missed a bracket in the css:
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id){
var obj=document.getElementById(id);
if(obj){
obj.style.height= (obj.offsetHeight- 50)+ 'px';
}
}
</script>
<style type= "text/css">
#divId{
background:blue;
width:300px;
height:100px;
}
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>

Categories