I'm trying to display the window size, whenever I resize my window. but I'm not able to until I refresh the window, I want to see the window size on the fly while I'm resizing the window.
window.onload = init();
window.onresize = init();
function init() {
var status = document.querySelector("#pagesize");
status.innerHTML = "" + window.innerHeight + " " + window.innerWidth;
}
#pagesize {
border: 1px solid red;
padding: 2px;
color: red;
}
html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>window resize</title>
</head>
<body>
<p>PAGE WINDOW SIZE <span id="pagesize">NOT LOADED YET</span></p>
<script src="script.js"></script>
</body>
</html>
You need to add a reference to the function to the event handler. Or even better use addEventListener() so you don't overwrite existing handlers. You stored the result of the init() function in the event handler.
window.onload = init;
window.onresize = init;
/* or better use this */
//window.addEventListener('load', init);
//window.addEventListener('resize', init);
function init() {
var status = document.querySelector("#pagesize");
status.innerHTML = "" + window.innerHeight + " " + window.innerWidth;
}
#pagesize {
border: 1px solid red;
padding: 2px;
color: red;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>window resize</title>
</head>
<body>
<p>PAGE WINDOW SIZE <span id="pagesize">NOT LOADED YET</span></p>
<script src="script.js"></script>
</body>
Related
Hi i tried to make the div smaller wqhen scrolling. however i found some article that the div is small then when scroll it make bigger. i wanted the opposite. when run the image is 100% then when scroll it will be smaller. can someone help me please? i am new to this
This is the code:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
min-width: 20%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
var scrollSlow = scrollVal / 4;
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I did it with my math logic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
width: 100%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
Made this example: https://jsfiddle.net/d8ak0edq/2/
document.getElementById('outer').oncontextmenu = function() { return false; };
outer = document.getElementById('outer');
outer.addEventListener('mousedown', foo);
function foo(evt) {
if (evt.which === 1) {
evt.target.style.backgroundColor = 'red';
} else if (evt.which === 3) {
evt.target.style.backgroundColor = 'blue';
}
}
/*
$outer = $('#outer');
$outer.on('mousedown', 'div', foo);
function foo(evt) {
if (evt.which === 1) {
$(this).css('background-color', 'red');
} else if (evt.which === 3) {
$(this).css('background-color', 'blue');
}
} */
#outer {
border: 2px solid black;
width: 300px;
height: 300px;
}
#inner {
position: relative;
left: 25%;
top: 25%;
border: 2px solid black;
width: 150px;
height: 150px;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
As you can see the jQuery has a nice way to do it, the 2nd parameter sets the 'target' and 'this' and if you click on the outer div nothing will happen even the event handler is on the outer div.
How do I make this without jQuery?
So by making the event handler on inner would obviously "fix" the problem, but I want that the event stays on the outer div but targets only inner, how to make this work (and not by adding && !(evt.target===outer))?
The basic technique for delegation is: set a selectorable attribute on the inner, then attach event handler to the outer, then check for whether the event came from inner:
document.getElementById('outer').addEventListener('mousedown' function(outer_evt) {
if (outer_evt.target.id == 'inner') {
// I mousedowned on inner
}
});
If you have other events attached to outer (this includes events attached to any ancestor of outer), and don't want them fired when you fire the inner event, use outer_evt.stopImmediatePropagation() and/or outer_evt.stopPropagation() (respectively).
If you want to refer to the element that the event bubbled up to, that's .currentTarget. (that is, above, outer_evt.currentTarget === document.getElementById('outer'))
See also EventTarget.addEventListener()
when use the hammer.js default 'doubletap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('tap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
when I double tap, it print 'tap' twice, and 'doubletap' once, but I want it just print 'doubletap', don't fire the 'tap'.
I try requreFailure http://hammerjs.github.io/require-failure/ and Hammer.js : How to handle / set tap and doubletap on same elements
so I write this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
hammer.add([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure([doubleTap]);
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('singletap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
But it doesn't console.log anything(even error message), it's really weird. The hammer's version is 2.0.8. sorry for my poor English, hope that's clear.
Try using
var hammer = new Hammer.Manager(myElement);
instead of
hammer = new Hammer(myElement).
Ciao.
try this code:
var timeInMs = 0;
hammer.on('tap', function(e) {
if((Date.now()-timeInMs)<300){
//doubleTap
}else{
//tap
}
timeInMs = Date.now();
});
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Girl! Fly and eat the yogurt!</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/sketch.js"></script>
<script src="jquery-1.11.3.min"></script>
<link rel="stylesheet" href="css/particles.css">
<style type="text/css">
#frame {
position: relative;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id = "frame">
<canvas class=" sketch" height="385" width="1440"></canvas>
</div>
<script src="js/particles.js"></script>
<script>
var canvas = $("#frame").get(0);
canvas.id = "gameView";
</script>
<script src="js/app.js"></script>
</body>
</html>
Would you please tell me how to get the canvas inside the div using either jQuery or vanilla JS in this specific case? And how to set an id for the captured canvas element?
var canvas = document.querySelector('canvas');