I want to simuate the zoom In and zoom out events of browser using javascript. Like in MAC you use Command + to zoom and in Windows Control +. I want to show the same effect as these commands, so I thought of triggering these using vanilla javascript. But not able to achieve anything till now. Has anyone implemented it?
To simulate the event, I am creating the event of keydown with Command and = (zoomIn in case of Mac), but it is not triggering the zoom event :-
let e = new Event("keydown", {"bubbles": true, "cancelable": true});
e.key = "="; // just enter the char you want to send
e.keyCode = 187;
e.which = e.keyCode;
e.altKey = false;
e.ctrlKey = false;
e.shiftKey = false;
e.metaKey = true;
this.dispatchEvent(e);
To verify, I am listening for the zoom event, the manual browser zoom, and javascript zoom both are going inside the if statement.
document.addEventListener('keydown',function(e) {
if (e.keyCode == 187 && e.metaKey) {
console.log('this is getting triggered');
//debugger;
return true;
}
});
You can try to emulate that behavior with CSS property transform: scale()
<!DOCTYPE html>
<html>
<head>
<style>
#test {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: white;
color: black;
}
</style>
<script>
//TODO: Increase scale value by x each time you press button
function zoomIn () {
document.getElementById("test").style.transform = "scale(1.5)";
}
function zoomOut () {
document.getElementById("test").style.transform = "scale(0.5)";
}
</script>
<head>
<div id="test">
<p>Test</p>
<button onclick="zoomIn()">Zoom IN</button>
<button onclick="zoomOut()">Zoom OUT</button>
</div>
<html>
Related
I would like to combine dragula with HammerJS in a way that dragging only happens in Dragula after a press event in HammerJS. With the current code the user has to lift his finger and touch again to the drag event to begin to happen.
Is there a way that the drag event happens after the long touch without lifting fingers?
Currently I am having a global variable called touch. As long as Touch is true, Dragula drag events are returned. I set HammerJS to make the touch variable false and then let the dragula touch event happen. The issue is that it needs the user to touch again the screen for the Dragula touch event to happen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dragula.min.css">
<style>
body div {
height: 50px;
width: 50px;
background-color: burlywood;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<div>Fifth</div>
<script src="dragula.min.js"></script>
<script src="hammer.min.js"></script>
<script>
var touch = true;
var scrol;
var subjs = document.querySelectorAll("body div");
subjs.forEach(function (entry) {
hammer = new Hammer(entry, {dragLockToAxis: true, dragBlockHorizontal: true}),
hammer.on('press', function(e){
touch = false;
e.target.classList.add("dragging");
document.querySelector('body div').addEventListener('touchmove', function(e) {
e.preventDefault();
console.log(e.changedTouches[0].clientY);
if (e.changedTouches[0].clientY < 80) {
if (scrol == undefined) {
scrol = setInterval(view.pageScroll,100);
}
} else if (e.changedTouches[0].clientY > 80 && e.changedTouches[0].clientY < (window.screen.height - 80)) {
console.log(scrol)
clearInterval(scrol);
scrol = undefined;
} else if (e.changedTouches[0].clientY > (window.screen.height - 80)) {
if (scrol == undefined) {
scrol = setInterval(view.pageScrollDown,100);
}
}
});
});
});
drake = dragula([document.querySelector('body')],{invalid: function (el, handle) {
return touch; // don't prevent any drags from initiating by default
}});
drake.on("drop",function(el, target, source, sibling){
clearInterval(scrol);
});
drake.on("dragend",function(el){
touch = true;
el.classList.remove('dragging')
});
var list = document.querySelector('body').children;
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function(){
if (touch == true) {
drake.destroy();
}
});
}
</script>
</body>
</html>
Is there a way to initiate dragula touch event from HammerJS event?
I want to execute a JS code when user presses ESC key. Please help me how can I do this? My current code is not working. I don't know where I'm doing wrong? I'm just a beginner so please help me out..
function hideModalKeyPress(e)
{
if(e.keyCode == 27)
{
document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden";
}
}
.modalOverlay
{
width: 200px;
height: 200px;
opacity: 0.8;
background-color: black;
visibility: visible;
}
<div class="modalOverlay" onkeydown="hideModalKeyPress(e);">Press ESC to hide me.</div>
/*
* I want to set the div's visibility to hidden
* when user presses ESC key
*/
You could use jQuery and do the following:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".modalOverlay").css('visibility', 'hidden');
}
});
JSFiddle
Or in pure JavaScript:
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
document.getElementById("modal").style.visibility = "hidden";
}
};
JSFiddle
This worked for me:
document.addEventListener("keydown", hideModalKeyPress, false);
function hideModalKeyPress(e) {
if(e.keyCode === 27)
{
document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden";
}
}
Here is the working jsfiddle:
https://jsfiddle.net/7jrfrz26/
I have 2 javascript functions: one of them shows div 'PhotoFull' another hides. 'PhotoFull' is a container Div.. Just black background for another Div inside of it. When the user clicks on black background, PhotoFull dessapears.. but if affects also the Div which is inside of 'PhotoFull' (PhotoFull dessapears while clicking the div which is inside). So For the Div which is inside I use event.stopPropagation();
Both functions work, but I also need to hide Div hideDiv() when "ESC" key is pressed. hideDiv() is executing Div
function showDiv() {
document.getElementById('PhotoFull').style.display = "inherit";
event.stopPropagation();
}
function hideDiv() {
var target = event.target || event.srcElement;
if (event.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
}
window.onload=function() {
document.onkeyup = key_event;
}
function key_event(e) {
if (e.keyCode == 27) hideDiv();
}
And HTML:
<div id="PhotoFull" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.75); display:none; z-index: 999;" onclick="hideDiv()">
<div style="width: 960px; border-radius: 3px; background-color: #ffffff; margin-top: 100px;">
<img id="one_full" src="numbers/1.jpg" style="max-width: 940px; margin: 10px;" />
</div>
</div>
Without event.stopPropagation(); Pressing ESC button executes function hideDiv() but with it, nothing happens. Don't know why.
Thanks for attention
When you press Esc key it goes in hideDiv function but the condition goes worng due to below reason.
See Debug trace in picture.
See watchExpression section in debugger. I have added event object to watch.
You can see full object description in watchExpression in above image.
You have write below condition in hideDiv function
var target = event.target || event.srcElement;
if (event.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
in debug trace you can see that event.currentTarget is body target local variable in the hideDiv function is document because you have added your listener for document object canbe seen from your code
window.onload=function() {
document.onkeyup = key_event;
}
So the solution is you have to register event listener on proper object which is body.
use below code for window.onload function..
window.onload=function() {
document.body.onkeyup = key_event;
}
window.onkeypress = keypress;
function keypress(event) {
if (event.keyCode == 27) {
alert("Hidding div *magic runing...*");
}
}
You should consider using onkeypress event to handle it.
Try this,
document.onkeydown=function(e){
if(e.which == 27) {
hidediv();
return false;
}
}
I have a javascript event onmouseover which is linked to a <div> called div1. As soons as the mouse enter the <div>, it writes something into the console. Right.
If i include an other <div> called div2 into the first one, the problem is that the event will be launched at each time the mouse goes from the first into the second, without escaping from div1. The event should be launched only one time, when the mouse enters div1
The code is pretty simple and can be tested here (please open a js console and put your mouse between red and blue)
<html>
<head>
<style>
#div1{
position : absolute ;
top: 100px;
left: 100px;
width : 200px;
height : 200px;
background : red;
}
#div2{
position : absolute ;
top: 10px;
left: 10px;
width : 100px;
height : 100px;
background : blue;
}
</style>
</head>
<body>
<div id="div1" >
<div id="div2">
</div>
</div>
</body>
<script>
var div1 = document.getElementById('div1');
div1.onmouseover = function(){
console.log('Function launched!');
};
</script>
</html>
In my website, it sends an AJAX request at each event... so it involves to many data transfer.
Use next(), previous() methods or use nth-child or nth-of-type. Thanks and Good luck
Try this.
<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
flag = 0;
div1.onmouseover = function(event){
if (event.target === this && flag == 0)
{
console.log('ok');
}
};
div1.onmouseout = function(event){
if (event.target === this)
{
flag = 0;
}
};
div2.onmouseover = function(event){
if (event.target === this)
{
flag = 1;
}
};
</script>
The above code will not allow to listen mouse over event of inner div.
Try to stop the event propagation by using stopPropagation().
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
I have an input field for mobile numbers and i want that inside that input field "+91" should be visible to the user all the time.. means he can not erase it.
So i planned to disable BACKSPACE and DELETE button when the value of INPUT FIELD is equal to +91
The startegy is working fine for me in FIREFOX but its all screwed up in CHROME.
I googled a lot but couldnt find any successfull code for Disabling Backspace in CHROME. :(
Here is my code for FIREFOX
<script language="JavaScript" type="text/javascript">
document.onkeypress = function(e) // FireFox/Others
{
var t=e.target.id;
var kc=e.keyCode;
if ((kc == 8 || kc == 46) && t == "phonen" && document.getElementById(t).value=="+91")
{ e.preventDefault();
return false;}
else {
return true
}
}
function sett(e)
{e.value="+91";}
</script>
Can anyone suggest me how can i do the same in CHROME???
As I wrote in a comment... Don't even bother with this kind of approach. Just fake it. Here's a simple way (though you might want to adjust fonts, spacing, etc.):
html:
<div class="prefix-wrapper">
<span class="prefix">+91</span>
<input type="text" value="">
</div>
css:
.prefix-wrapper {
position: relative;
}
.prefix-wrapper .prefix {
position: absolute;
z-index: 2;
top: 3px;
left: 5px;
color: #999;
}
input {
padding-left: 30px;
}
demo: http://jsbin.com/elatot/1/
User still can click with a mouse or move the cursor and edit +91 strings.
I would suggest that you bind .keyup and .change handlers to your input and check then if it contains your prefix(note that jQuery would be it much easier). Like this:
$('#your_input_id').on('keyup change', function() {
if ( $(this).val().indexof('+91') != 0) $(this).val('+91');
});
A solution not using jQuery would be to hook up to the change/keyup events directly:
var checkPhone = function (e) {
if (e.target.value.indexOf('+91') != 0) {
e.target.value = '+91';
}
}
var phoneElement = document.getElementById('phonen');
phoneElement.onchange = checkPhone;
phoneElement.onkeyup = checkPhone;
Try this with jQuery:
// HTML Code
<input type="text" name="phone" id="phone" class='phone' placeholder='+918888888888' value='' maxlength='13' />
// jQuery code
$(document).keydown(function (e) {
var l = $('.phone').val().length;
var elid = $(document.activeElement).hasClass('phone');
if (e.keyCode === 8 && elid && l == 3) {
return false;
} else {
return true;
}
});
Fiddle DEMO