Can you recommend a JS library that actually provides edge swipe functionality when working with bare-bones HTML & CSS?
I've searched all over and haven't found a source of truth for that problem.
I've seen lots and lots of libraries enabling swipe gestures but not edge swipe.
My last attempt was using Hammer.js which I've tried implementing as:
var swipe = new Hammer(document);
// detect swipe and call to a function
swipe.on('swiperight swipeleft', function (e) {
e.preventDefault();
var endPoint = e.pointers[0].pageX;
var distance = e.distance;
var origin = endPoint - distance;
//swipe right to open nav
if (origin <= 15 && e.type == 'swiperight') {
// open main menu
$('#navigation-menu').animate({
left: '0'
});
} else {
// close/hide menu(s)
$('#navigation-menu').animate({
left: '-100%'
});
}
});
Further, if not using any library, how can I implement a mobile edge swipe to show and hide content, (in my case it'd be a navigation menu) with vanilla JS?
At this point I'm open to either solution/direction.
Here is a solution, you can set thresholdStart, End, Milliseconds. You may want to tidy up the code, and port it for touch events (I used mouse events for testing in my browser more easily).
Use:
swipeEdgeFromLeft function and swipeEdgeFromRight function.
var div = document.body;
var mouse = {
isDown: false,
inLeft: false,
inRight: false,
downTimestamp: null
};
var width, thresholdStart, thresholdEnd, thresholdMilliseconds;
function resize(){
width = window.innerWidth;
thresholdStart = 0.1*width;//within 10% of screen width
thresholdEnd = 0.13*width;//beyond 13% of screen width
thresholdMilliseconds = 500;//must be done in 500 milliseconds
}
document.addEventListener("resize", resize, false);
resize();//initialize
div.addEventListener('mousedown'/*'touchstart'*/, function(e){
var x = e./*touches[0].*/pageX;
mouse.isDown = true;
mouse.downTimestamp = performance.now();
if(x < thresholdStart){
mouse.inLeft = true;
} else if(x > width-thresholdStart){
mouse.inRight = true;
}
});
div.addEventListener('mousemove'/*'touchmove'*/, function(e){
var x = e./*touches[0].*/pageX;
if(mouse.inLeft && x > thresholdEnd){
mouse.inLeft = false;
if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
swipeEdgeFromLeft();
}
} else if(mouse.inRight && x < width-thresholdEnd){
mouse.inRight = false;
if(performance.now() - mouse.downTimestamp < thresholdMilliseconds){
swipeEdgeFromRight();
}
}
});
div.addEventListener('mouseup'/*'touchend'*/, function(e){
//var x = e./*changedTouches[0].*/pageX;
mouse.isDown = false;
mouse.inLeft = false;
mouse.inRight = false;
mouse.downTimestamp = null;
});
function swipeEdgeFromLeft(){
console.log("edge swipe from left");
}
function swipeEdgeFromRight(){
console.log("edge swipe from right");
}
body {
max-width: 100vw;
height: 100vh;
}
.bar {
height: 100vh;
background-color: rgba(0,0,0,0.4);
position: fixed;
pointer-events: none;
}
#left-inner-threshold {
width: calc(0.1 * 100vw);
left: 0;
}
#right-inner-threshold {
width: calc(0.1 * 100vw);
right: 0;
}
#left-outer-threshold {
width: calc(0.13 * 100vw);
left: 0;
}
#right-outer-threshold {
width: calc(0.13 * 100vw);
right: 0;
}
<div id="left-inner-threshold" class="bar"></div>
<div id="left-outer-threshold" class="bar"></div>
<div id="right-inner-threshold" class="bar"></div>
<div id="right-outer-threshold" class="bar"></div>
Here's a solution to your existing code using Hammer.js v2.0.8
The explanation for how to achieve the edge swipe can be found here answered by #jovinbm.
$(document).ready(function () {
const swipe = new Hammer(document);
function getStartPosition(e) {
const delta_x = e.deltaX;
const delta_y = e.deltaY;
const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;
return {
x: final_x - delta_x,
y: final_y - delta_y
}
};
swipe.on('swiperight swipeleft', function (e) {
e.preventDefault();
const { x } = getStartPosition(e);
console.log(x);
//swipe right to open nav /* note the condition here */
if (e.type == 'swiperight' && x >= 0 && x <= 50) {
// open menu
$('#navigation').animate({
left: '0'
});
//swiping left should slide out nav and/or sub-nav
} else {
// close/hide menu
$('#navigation, #task-menu').animate({
left: '-100%'
});
}
});
});
Here's a pen showing it in action:
For swipes, only the final pointerup event is included as the srcEvent in the event object passed to your handler (see http://hammerjs.github.io/api/). The initial pointerdown event that carries the details of the initial position of where the swipe event started is not provided in the hammer event object. Fortunately, you can use the srcEvent in the event object to get the starting position of the event initial pointerdown event.
const getStartPosition = (e) => {
const delta_x = e.deltaX;
const delta_y = e.deltaY;
const final_x = e.srcEvent.pageX || e.srcEvent.screenX || 0;
const final_y = e.srcEvent.pageY || e.srcEvent.screenY || 0;
return {
x: final_x - delta_x,
y: final_y - delta_y
};
};
const handleSwipe = (e) => {
const {x} = getStartPosition(e);
if (x >= 0 && x <= 50) {
// handle swipe from left edge e.t.c
}
else {
// handle other case
}
};
The srcEvent is just a normal javascript event that inherits properties from UIEvent hence the pageX/pageY api above. This will probably not work in other browsers since some of them are not standardized
Related
Okay i have a full page scroll project , everything works fine and beautiful on firefox except this Chrome..I have an element which translate on wheel event, so there is no actual scrolling.The element's CSS is
#trasnlateMe {
height: calc(var(--vh) * 400);
width: 100%;
overflow: hidden;
position: relative;
transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
}
and it has inline styling of
style="transform:translateY(0);"
on my js at beginning of code I have this code also.
let container = document.querySelector("#trasnlateMe");
container.style.transform = "translateY(0)";
basically when you scroll i get the direction through a flag and translate the page by this function.
const fullPageScroll = () => {
containerHight = window.innerHeight * foldQuantity;
yTrasnlationOfContainer = parseInt(
container.style.transform.replace("translateY(", "")
);
if (
(scrollDirection === "down" &&
Math.abs(yTrasnlationOfContainer) <
containerHight - containerHight / foldQuantity) ||
(swipeDirection === "up" &&
Math.abs(yTrasnlationOfContainer) <
containerHight - containerHight / foldQuantity)
) {
yTrasnlationOfContainer = yTrasnlationOfContainer - window.innerHeight;
}
if (
(scrollDirection === "up" && yTrasnlationOfContainer < 0) ||
(swipeDirection === "down" && yTrasnlationOfContainer < 0)
) {
yTrasnlationOfContainer = yTrasnlationOfContainer + window.innerHeight;
}
if (holder === false && hambergurMenu.style.display !== "none") {
holder = true;
swipeDirection = null;
container.style.transform = `translateY(${yTrasnlationOfContainer}px)`;
for (let i = 1; i <= foldQuantity; i++) {
if (yTrasnlationOfContainer === -(window.innerHeight * (i - 1))) {
currentSection = i - 1;
}
fillRelatedCircle();
setTimeout(() => {
holder = false;
}, 1000);
}
}
};
//Handling wheel event of the whole page
container.addEventListener("wheel", event => {
if (event.deltaY > 0) {
scrollDirection = "down";
}
if (event.deltaY < 0) {
scrollDirection = "up";
}
event.stopPropagation();
fullPageScroll();
});
so everything works lovingly on firefox but chrome decided not to set the ytrasnlation of #trasnlateMe to 0, the abnormal thing is that it does on paper, when you look at the code after refresh it looks like this >> style="transform:translateY(0); but it stays at the same section which was before the refreshing on the viewport and the whole scrolling GETS BROKEN, IT COUNTS THE SECTION WHICH WAS BEFORE REFRESHING ON the VIEWPORT AS THE FIRST SECTION.
Please help this is so annoying.
Just NOTE: when I close the tab and open the html file again everything works beautifully on Chrome, even if you don't have an answer for this bug would you tell me what can I do to mimic that same behavior on reloading? That everything be like the page is opened right now.That would fix it too.
I had similar problem, when replaceing srolling with translate on wheel event.
What helped me, was giving html and body:
overflow: hidden;
height: 100%;
Okay I just gave body
position: fixed;
top: 0;
left: 0;
right: 0;
and everything got fixed on Chrome, after coding for some time now I can really say Firefox is the best browser and chrome is the worst!
I was working on collision detection and thought I would start out simple by testing when the object reaches a certain x-position. It works when I set it to 100, the initial top value for 'character, which leads me to believe the problem is with top updating; however, I don't see why the circles would be moving if that were the case.If you could tell me how to keep 'top' updated or better yet, help me with collision detection that would be great!
(ps. I know it's not good to put css, javascript, and html in one page. I have this as part of a website but moved it to one file so I could test it separately without looking through the code of the entire website and I will add it in the appropriate files once I get this figured out.)
<html>
<head>
<style>
#character {
position: absolute;
width: 42px;
height: 42px;
background: black;
border-radius: 50%;
}
#character2 {
position: absolute;
width: 42px;
height: 42px;
background: pink;
border-radius: 50%;
} </style>
</head>
<body>
<div id = 'character'></div>
<div id = 'character2'></div>
<script>
var keys = {};
keys.UP = 38;
keys.LEFT = 37;
keys.RIGHT = 39;
keys.DOWN = 40;
keys.W = 87;
keys.A = 65;
keys.D = 68;
keys.S = 83;
/// store reference to character's position and element
var character = {
x: 1000,
y: 100,
speedMultiplier: 1,
element: document.getElementById("character")
};
var character2 = {
x: 100,
y: 100,
speedMultiplier: 3,
element: document.getElementById("character2")
};
/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup =
document.body.onkeydown = function(e){
/// prevent default browser handling of keypresses
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
var kc = e.keyCode || e.which;
keys[kc] = e.type == 'keydown';
};
/// character movement update
var moveCharacter = function(dx, dy){
character.x += (dx||0) * character.speedMultiplier;
character.y += (dy||0) * character.speedMultiplier;
character.element.style.left = character.x + 'px';
character.element.style.top = character.y + 'px';
};
var moveCharacter2 = function(dx, dy){
character2.x += (dx||0) * character2.speedMultiplier;
character2.y += (dy||0) * character2.speedMultiplier;
character2.element.style.left = character2.x + 'px';
character2.element.style.top = character2.y + 'px';
};
/// character control
var detectCharacterMovement = function(){
if ( keys[keys.LEFT] ) {
moveCharacter(-1, 0);
}
if ( keys[keys.RIGHT] ) {
moveCharacter(1, 0);
}
if ( keys[keys.UP] ) {
moveCharacter(0, -1);
}
if ( keys[keys.DOWN] ) {
moveCharacter(0, 1);
}
if ( keys[keys.A] ) {
moveCharacter2(-1, 0);
}
if ( keys[keys.D] ) {
moveCharacter2(1, 0);
}
if ( keys[keys.W] ) {
moveCharacter2(0, -1);
}
if ( keys[keys.S] ) {
moveCharacter2(0, 1);
}
};
/// update current position on screen
moveCharacter();
moveCharacter2();
/// game loop
setInterval(function(){
detectCharacterMovement();
}, 1000/24);
function getPosition() {
var elem = document.getElementById("character");
var top = getComputedStyle(elem).getPropertyValue("top");
if (top == '200px') {
alert ("hi");
}
getPosition()
}
getPosition()
// var pos1 = document.getElementById('character').style.top
</script>
</body>
</html>
I figured it out! I just added Jquery's .position() to get the coordinates! For the collision detection I added this:
function collision1() {
$(document).ready(function(){
var x = $("#character").position();
var y = $("#character2").position();
var zid = '#' + id
var z = $(zid).position();
var topX = parseInt(x.top);
var topZ = parseInt(z.top);
var leftX = parseInt(x.left);
var leftZ = parseInt(z.left);
var topY = parseInt(y.top);
var leftY = parseInt(y.left);
if (topX > topZ && topX < (topZ + 50) && leftX > leftZ && leftX < (leftZ + 100)) {
alert('Player 1 Won! Click restart to play again.')
document.getElementById("button2").style.display = "block";
document.getElementById("def").style.display = "none";
document.getElementById("def2").style.display = "none";
document.getElementById("def3").style.display = "none";
document.getElementById("def4").style.display = "none";
document.getElementById("term").style.display = "none";
}
else {
collision1()}
});}
I know it is probably not the most effective way to program this but it works!
I want to detect scroll/touch direction on phones. For desktop, I use .on('DOMMouseScroll') and .('mousewheel') but this does not work on phones. Body of page is overflow: hidden; Anybody know how to detect this?
It seems I fell into the same case of yours.
Since I needed a lot of research to put all things together, I'm posting it all here:
if (Modernizr.touch) {
// Determining swipe direction
// http://stackoverflow.com/a/22257774/1064325
var touchStartY;
document.addEventListener('touchstart', function (e){
touchStartY = e.touches[0].clientY;
}, false);
// Preventing iOS end of page bounce effect
// http://stackoverflow.com/a/7771215/1064325
document.addEventListener('touchmove', function (e){
e.preventDefault();
}, false);
document.addEventListener('touchend', function (e){
var touchEndY = e.changedTouches[0].clientY;
if (touchStartY > touchEndY + 5) {
// NEXT
} else if (touchStartY < touchEndY - 5) {
// PREV
}
}, false);
} else {
// Handling wheeling properly
// http://stackoverflow.com/a/3515490/1064325
var deltaWheel = 0;
var wheelTimeout = 0;
document.addEventListener('wheel', function(event) {
deltaWheel += event.deltaY;
clearTimeout(wheelTimeout);
wheelTimeout = setTimeout(function() {
if (deltaWheel < -5) {
// PREV
}
if (deltaWheel > +5) {
// NEXT
}
deltaWheel = 0;
}, 50);
});
}
I have a "sticky" side bar using this plugin: https://github.com/AndrewHenderson/jSticky. Basically, it works well on desktop but on touch devices it delays a second or two until the page is fully scrolled to re-appear in its proper place. Is there any way to make it scroll WHILE the page is scrolling as on desktop? I have seen sticky elements on other sites work like this, so there should be a way check and implement the position smoother. The code is below. All you do is assign a .sticky class to an item. For a demo, you can see this page I'm working on: http://www.mjmlawoffice.com/responsive/index.php/fees
<script>
jQuery(function(){
jQuery(".sticky").sticky({
topSpacing: 0,
zIndex:2,
stopper: "#footer"
});
});
</script>
;(function($) {
$.fn.sticky = function(options) {
var defaults = {
topSpacing: 0, // No spacing by default
zIndex: '', // No default z-index
stopper: '.sticky-stopper' // Default stopper class, also accepts number value
},
settings = $.extend({}, defaults, options); // Accepts custom stopper id or class
// Checks if custom z-index was defined
function checkIndex() {
if (typeof settings.zIndex == 'number') {
return true;
} else {
return false;
}
}
var hasIndex = checkIndex(); // True or false
// Checks if a stopper exists in the DOM or number defined
function checkStopper() {
if ( 0 < $(settings.stopper).length || typeof settings.stopper === 'number' ) {
return true;
} else {
return false;
}
}
var hasStopper = checkStopper(); // True or false
return this.each(function() {
var $this = $(this),
thisHeight = $this.outerHeight(),
thisWidth = $this.outerWidth(),
topSpacing = settings.topSpacing,
zIndex = settings.zIndex,
pushPoint = $this.offset().top - topSpacing, // Point at which the sticky element starts pushing
placeholder = $('<div></div>').width(thisWidth).height(thisHeight).addClass('sticky-placeholder'), // Cache a clone sticky element
stopper = settings.stopper,
$window = $(window);
function stickyScroll() {
var windowTop = $window.scrollTop(); // Check window's scroll position
if ( hasStopper && typeof stopper === 'string' ) {
var stopperTop = $(stopper).offset().top,
stopPoint = (stopperTop - thisHeight) - topSpacing;
} else if (hasStopper && typeof stopper === 'number') {
var stopPoint = stopper;
}
if (pushPoint < windowTop) {
// Create a placeholder for sticky element to occupy vertical real estate
$this.after(placeholder).css({
position: 'fixed',
top: topSpacing
});
if (hasIndex) {
$this.css({ zIndex: zIndex });
}
if (hasStopper) {
if (stopPoint < windowTop) {
var diff = (stopPoint - windowTop) + topSpacing;
$this.css({ top: diff });
}
}
} else {
$this.css({
position: 'static',
top: null,
left: null
});
placeholder.remove();
}
};
$window.bind("scroll", stickyScroll);
});
};
})(jQuery);
this is because your css selector for #media screen and (min-width: 768px)
*js-mainnav.megamenu-sticky is only displayed on a desktop with min-width 768px
the attribute that it needs are not on smaller browser are not included.
try adding
#js-mainnav.megamenu-sticky {
z-index: 1000;
position: fixed !important;
}
outside the mediaquery
This is some javascript for a drupal 6.x module called "Views Popup".
https://drupal.org/project/views_popup
I can't seem to set a delay on the popup when the mouse moves off the link that triggers the popup. I have the title, teaser text and a more link in the popup and users need to be able to move the mouse off the link (image) in order to click on the "read more" link. I've tried adjusting all the settings in the code below, but none seem to relate to this. I'm not a coder, but I think something needs to be added to make this work. Any suggestions would be greatly appreciated.
Here's the code:
var popup_time = 0;
var popup_elem = 0;
var popup_show_timer = 0;
var popup_reset_timer = 0;
$(function() {
popup_reset();
$(".views-popup").appendTo("body");
});
Drupal.behaviors.viewsPopup = function(context) {
$(".views-popup-row").mouseover(function() {
popup_show(this);
})
.mouseout(function() {
popup_hide(this);
})
.mousemove(function(e) {
popup_move(this,e);
});
}
function popup_move(me,evt){
var e, top, left;
if (Drupal.settings.views_popup.follow_mouse){
left = evt.pageX + 15;
top = evt.pageY;
$("#views-popup-" + $(me).attr("id")).css({
left: left + 'px',
top: top + 'px'
});
}
}
function popup_show(me) {
var p, e, top, left, pos ;
var x = $(me).attr("id");
e = $("#views-popup-" + $(me).attr("id"));
if (e == popup_elem) {
return ; // already handled
}
if (! Drupal.settings.views_popup.follow_mouse){
pos = $(me).offset();
left = 20 + pos.left - $(document).scrollLeft();
top = 2 + pos.top + $(me).outerHeight() - $(document).scrollTop();
$(e).css({
left: left + 'px',
top: top + 'px'
});
}
popup_clear_show_timer();
if (popup_elem) {
popup_elem.hide();
popup_time = 500 ;
}
popup_elem = e;
if ( popup_time == 0 ) {
popup_show_now();
} else {
popup_show_timer = setTimeout("popup_show_now();",popup_time);
}
}
function popup_show_now() {
popup_show_timer = 0 ;
if(popup_elem) {
popup_elem.show();
clearTimeout(popup_reset_timer);
popup_time = 0;
}
}
function popup_clear_show_timer(){
if (popup_show_timer) {
clearTimeout(popup_show_timer);
popup_show_timer = 0;
}
}
function popup_hide(me) {
e = $("#views-popup-" + $(me).attr("id"));
popup_clear_show_timer();
clearTimeout(popup_reset_timer);
e.hide();
if(e == popup_elem) {
popup_elem = 2;
}
popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}
function popup_reset(){
popup_time = Drupal.settings.views_popup.popup_delay;
}
So, assuming the above code works how you want -- and that you want to set a delay for the popup to hide, what you can do is call javascript's setTimeout(function, delay) function, which initiates a callback after delay milliseconds.
function popup_hide(me) {
e = $("#views-popup-" + $(me).attr("id"));
popup_clear_show_timer();
clearTimeout(popup_reset_timer);
var delay = 1000; // ms
setTimeout(e.hide, delay); // <------- here
if(e == popup_elem) {
popup_elem = 2;
}
popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}
This will call e.hide (the function) after 1 second has passed.