window.matchMedia("(max-width: 1700px)"); does not work? - javascript

Hey friends I'm trying to use window.matchMedia("(max-width: 1700px)") to add some elements in the html when the page is 1700px or smaller. Right now I'mk just trying to test it by have a function alert 'yo' to the screen. This doesn't work as well as other things I tried to change? Any ideas?
https://jsfiddle.net/yat5ncmk/6/
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;
x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
leftArrow.addEventListener('click', function() {
num--;
if(num > 0) {
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
console.log(num);
console.log(img.style.backgroundImage);
} else {
num = 4;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
}
})
rightArrow.addEventListener('click', function() {
num++;
if(num <= 4) {
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
console.log(num);
console.log(img.style.backgroundImage);
} else {
num = 1;
img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
}
})
function adjustMenuDesign(width) {
if (width.matches) { // If media query matches
alert('yo');
}
}
window.sr = ScrollReveal();
sr.reveal('.logo-wrap', {
duration: 2000
});
sr.reveal('.w1', {
duration: 2000,
origin: 'bottom'
});
sr.reveal('.w2', {
duration: 3000,
origin: 'bottom'
});
sr.reveal('.w3', {
duration: 4000,
origin: 'bottom'
});
sr.reveal('.hours-line-left', {
duration: 1000,
origin: 'left',
distance: '200px'
});
sr.reveal('.hours-line-right', {
duration: 1000,
origin: 'right',
distance: '200px'
});
sr.reveal('.contact-line', {
duration: 1000,
origin: 'bottom',
distance: '250px'
});
sr.reveal('.burrito', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.taco', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.guac', {
duration: 1000,
origin: 'right',
distance: '250px'
});
sr.reveal('.nachos', {
duration: 1000,
origin: 'bottom',
distance: '250px'
});
sr.reveal('.hot', {
duration: 1000,
origin: 'left',
distance: '250px'
});
sr.reveal('.back-to-top', {
duration: 1000,
origin: 'bottom',
});
sr.reveal('.btp-arrow', {
duration: 1500,
origin: 'top',
distance: '250px'
});

A couple of problems..
x.addEventListener(adjustMenuDesign);
Errors, because addEventListener expects an event and a callback.
But what you might have meant to do was add this to the resize event..
window.addEventListener("resize", adjustMenuDesign);
Also you will want to run the matchMedia query again on resize, so moving that piece of code into the adjustMenuDesign would make sense here.
Below is a working fiddle with these changes.
https://jsfiddle.net/veckopab/

Related

google map showing cant load maps correctly in html

i have a map section in html and javascript, the section is like below:
CustomMarker.prototype = new google.maps.OverlayView();
function CustomMarker(opts) {
this.setValues(opts);
}
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = $('' +
'<div>' +
'<div class="shadow"></div>' +
'<div class="pulse"></div>' +
'<div class="pin-wrap">' +
'<div class="pin"></div>' +
'</div>' +
'</div>' +
'')[0];
this.pinWrap = this.div.getElementsByClassName('pin-wrap');
this.pin = this.div.getElementsByClassName('pin');
this.pinShadow = this.div.getElementsByClassName('shadow');
div.style.position = 'absolute';
div.style.cursor = 'pointer';
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click", event);
});
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.animateDrop = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
'opacity': '1',
});
dynamics.animate(this.pinWrap, {
translateY: 0,
scaleY: 1.0,
}, {
type: dynamics.gravity,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 1800,
bounciness: 600,
})
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'scale(0,0)',
});
dynamics.animate(this.pinShadow, {
scale: 1,
}, {
type: dynamics.gravity,
duration: 1800,
});
}
CustomMarker.prototype.animateBounce = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
translateY: -30
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 0,
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 600,
delay: 650,
});
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'none',
});
dynamics.animate(this.pinShadow, {
scale: 0.6,
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
}
CustomMarker.prototype.animateWobble = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
rotateZ: -45,
}, {
type: dynamics.bounce,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleX: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 1800,
});
}
$(function() {
var pos = new google.maps.LatLng(17.402507, 78.484450);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: pos,
disableDefaultUI: true,
});
var marker = new CustomMarker({
position: pos,
map: map,
});
google.maps.event.addListener(marker, 'click', function(e) {
marker.animateWobble();
});
$('#drop').on('click', function(e) {
marker.animateDrop();
});
$('#wobble').on('click', function(e) {
marker.animateWobble();
});
$('#bounce').on('click', function(e) {
marker.animateBounce();
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Raleway:600,900,400|Roboto:300,700' rel='stylesheet'>
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15228.829609290426!2d78.46827062015056!3d17.401831576090753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9900853b7663%3A0xff5ff705a04cebb!2sBook%20The%20Party!5e0!3m2!1sen!2sin!4v1597715101831!5m2!1sen!2sin"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
I added my latitude and longitude inside the javascript, but its not properly loading, its still showing maps not loaded correctly. as i am new to this, I searched on google and saw I need to add API key on this, but where do I add API key in this code, please anyone help. thanks in advance
Try to change this line:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
to this:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY" type="text/javascript"></script>

How to disable a function to relaunch on hover

I'm trying to make a bouncy ball which move on hover by the user. I got a problem on how to disable the function to relaunch if the ball cross again the mouse. It cause some freeze/bugs sometimes. I'm not exactly sure on how to proceed to avoid that. Do you guys have any tips ?
https://codepen.io/kombolo/pen/YvzPvm
Thanks !
window.onmousemove = logMouseMove;
function logMouseMove(e) {
e = e || window.event;
mousePos = e.clientX;
el = document.querySelector('.circle');
const elPos = getOffset(el);
if(mousePos < (elPos -20) || mousePos > (elPos + 20)) {
triggerAnimation();
};
}
function getOffset(el) {
el = el.getBoundingClientRect();
return el.left + window.scrollX + 50;
}
function triggerAnimation() {
xValues = [100, 0, 400];
yValues = [0, 50, 200];
const xVal = xValues[Math.floor(Math.random()*xValues.length)];
const yVal = yValues[Math.floor(Math.random()*yValues.length)];
var duration = anime({
targets: '#duration .el',
translateX: [
{ value: xVal, duration: 1000, delay: 500, elasticity: 0 },
{ value: xVal, duration: 1000, delay: 500, elasticity: 0 }
],
scaleX: [
{ value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
translateY: [
{ value: yVal, duration: 1000, delay: 500, elasticity: 0 },
{ value: yVal, duration: 1000, delay: 500, elasticity: 0 }
],
});
}
Mouse hover is an extensive event. You are doing too much on hover.
what I would suggest is - set window.onmousemove = undefined in
triggerAnimation function and then turn it on in the last. This helped a little.
function triggerAnimation() {
window.onmousemove = void 0;
xValues = [100, 0, 400];
.....
....
//loop: true
});
window.onmousemove = logMouseMove;
}

Using for-loop instead of creating new var for every element

I have created animations that trigger when elements enter in viewport. Problem is that I have to repeat same code for every element. I'm using anime.js and scrollMonitor.js for animations, and it's kinda hard to make working for-loop.
Here is my code:
$(window).on("load", function() {
'use strict';
var elementWatcher1 = scrollMonitor.create('#about', -200);
elementWatcher1.enterViewport(function() {
var startAnimation = anime.timeline();
startAnimation
.add({
targets: '#about .toAnimate',
translateY: [50, 0],
opacity: 1,
duration: 600,
delay: function(el, index) {
return index * 80;
},
easing: 'easeOutQuad'
});
this.destroy();
});
var elementWatcher2 = scrollMonitor.create('#portfolio', -200);
elementWatcher2.enterViewport(function() {
var startAnimation = anime.timeline();
startAnimation
.add({
targets: '#portfolio .toAnimate',
translateY: [50, 0],
opacity: 1,
duration: 600,
delay: function(el, index) {
return index * 80;
},
easing: 'easeOutQuad'
});
this.destroy();
});
var elementWatcher3 = scrollMonitor.create('#gallery', -200);
elementWatcher3.enterViewport(function() {
var startAnimation = anime.timeline();
startAnimation
.add({
targets: '#gallery .toAnimate',
translateY: [50, 0],
opacity: 1,
duration: 600,
delay: function(el, index) {
return index * 80;
},
easing: 'easeOutQuad'
})
.add({
targets: '#gallery .toAnimateToo',
opacity: 1,
duration: 600,
delay: function(el, index) {
return index * 80;
},
easing: 'easeOutQuad',
offset: 0
});
this.destroy();
});
});
Does anyone have idea how can I put this in for-loop?
In ES5 just use a forEach loop on an array of those selectors:
$(window).on("load", function() {
'use strict';
["#about", "#portfolio", "#gallery"].forEach(function(selector) {
var elementWatcher = scrollMonitor.create(selector, -200);
elementWatcher.enterViewport(function() {
var startAnimation = anime.timeline();
startAnimation
.add({
targets: selector + ' .toAnimate',
translateY: [50, 0],
opacity: 1,
duration: 600,
delay: function(el, index) {
return index * 80;
},
easing: 'easeOutQuad'
});
this.destroy();
});
});
});
In ES2015+, you could use for-of instead (with const for elementWatcher) instead.

Adding easing to image pan

I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?
http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});

Using Ajax.Updater to get a javascript file (prototypejs)

Here is my ajax request:
new Ajax.Updater({ success: 'footer' }, '/dyn/actions/checkSystemMessage', {
insertion: 'after',
evalScripts: true
});
Here is what's at /dyn/actions/checkSystemMessage:
<script type="text/javascript"><!--
document.observe('dom:loaded', function() {
buildSystemMsg = function(SystemMsg) {
//behind container
behindContainer = new Element('div', {id: 'behind-system-message'});
behindContainer.setStyle({display: 'none'});
document.body.appendChild(behindContainer);
//main container
container = new Element('div', {id: 'system-message'}).update(SystemMsg);
container.setStyle({display: 'none'});
document.body.appendChild(container);
//hide button
hideBtn = new Element('a', {'class': 'close-button', 'title': 'Close System Message'}).update('Close');
hideBtn.setStyle({ marginTop: '5px'});
container.insert({bottom: hideBtn});
offsetY = container.getHeight();
//show
if ($('mod-system-alert'))
{ new Effect.Move($('mod-system-alert'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 }); }
new Effect.Move($('footer'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('page-container'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('nav'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('header-container'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
Effect.BlindDown(behindContainer, { queue: 'front', duration: 0 });
Effect.BlindDown(container, { queue: 'end', duration: 0.5 });
hideBtn.observe('click', function() {
if ($('mod-system-alert'))
{ new Effect.Move($('mod-system-alert'), { queue: 'front', x: 0, y: -offsetY, mode: 'relative', duration: 0 }); }
new Effect.Move($('footer'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('page-container'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('nav'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
new Effect.Move($('header-container'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
Effect.BlindUp(behindContainer, { queue: 'front', duration: 0 });
Effect.BlindUp(container, { queue: 'front', duration: 0.5 });
set_cookie("HideSystemMsg", true);
});
}
hideMsg = get_cookie("HideSystemMsg");
systemMsg = '${SystemMsg}';
if (systemMsg.length > 0 && !hideMsg)
buildSystemMsg(systemMsg);
});
--></script>
This is neither inserting the javascript after the element with ID footer nor is it executing the script. It does rely on other javascript libraries that are included on the page where the update is occurring. Could this be where my problem is?
I believe evalScripts will only work if your response headers have a "text/javascript" content type. This is what tells the AJAX library that what you're getting from the server is a script..
Additionally, you would not need the mark up: <script type="text/javascript"><!--, and: --></script>
I hope this helps.

Categories