We Keep Coding

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

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/

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.

Qtip not working with jquery and ajax in Cytoscape.js

I am trying to dynamically load a Cytoscape JSON elements file and display qtip text when a node in the network is clicked. This exact same code works when I hard code the network in the code so there is nothing wrong with the cyjs file or the qtip part of the code. Somehow the qtip is not working with ajax and jquery.
Any help would be appreciated! Thank you!
$(function() {
$.get('demo.cyjs', function( data ) {
$('#cy').cytoscape({
layout: {
name: 'concentric',
concentric: function( node ){
return node.degree();
},
levelWidth: function( nodes ){
return 2;
}
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'bottom',
'color': 'white',
'font-size': 10,
'background-color': 'data(faveColor)'
})
.selector('edge')
.css({
'target-arrow-shape': 'none',
'curve-style':'haystack',
'line-color':'data(faveColor)',
'line-style': 'data(style)',
'haystack-radius': 0,
'width':'data(Ratio)'
})
.selector(':selected')
.css({
'background-color': 'grey',
'target-arrow-color': 'grey',
'source-arrow-color': 'grey',
'border-width': 3,
'border-color': '#333'
})
.selector('.faded')
.css({
'opacity': 1,
'text-opacity': 0
}),
elements : JSON.parse(data),
});
})
cy.nodes().forEach(function(n){
var a = n.data('ensembl_id');
var p=n.data('primes_id');
var e=n.data('ncbi_id');
var u=n.data('uniprot_id');
n.qtip({
content: [
{
name: 'ENSEMBL',
url: 'http://www.ensembl.org/Homo_sapiens/Gene/Summary?db=core;g='+ a
},
{
name: 'UniProt',
url: 'http://www.uniprot.org/uniprot/'+ u
},
{
name: 'NCBI',
url: 'https://www.ncbi.nlm.nih.gov/gene/' + e
}
].map(function( link ){
return '<a target="_blank" href="' + link.url + '">' + link.name + '</a>';
}).join('<br />\n'),
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
});
$('#config-toggle').on('click', function(){
$('body').toggleClass('config-closed');
cy.resize();
});
});
This is my updated code. I have initialised cy element in the body tag
<div id="cy"></div>
$(function() {
let toJson = res => res.json();
let cy = new cytoscape({
layout: {
name: 'concentric',
concentric: function( node ){
return node.degree();
},
levelWidth: function( nodes ){
return 2;
}
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'bottom',
'color': 'white',
'font-size': 10,
'background-color': 'data(faveColor)'
})
.selector('edge')
.css({
'target-arrow-shape': 'none',
'curve-style':'haystack',
'line-color':'data(faveColor)',
'line-style': 'data(style)',
'haystack-radius': 0,
'width':'data(Ratio)'
})
.selector(':selected')
.css({
'background-color': 'grey',
'target-arrow-color': 'grey',
'source-arrow-color': 'grey',
'border-width': 3,
'border-color': '#333'
})
.selector('.faded')
.css({
'opacity': 1,
'text-opacity': 0
}),
elements: fetch('demo.cyjs').then( toJson ),
});
cy.ready( () => {
var a = n.data('ensembl_id');
var p=n.data('primes_id');
var e=n.data('ncbi_id');
var u=n.data('uniprot_id');
n.qtip({
content: [
{
name:'PrimesDB',
url:'http://primesdb.org/molecules/view/'+ p
},
{
name: 'ENSEMBL',
url: 'http://www.ensembl.org/Homo_sapiens/Gene/Summary?db=core;g='+ a
},
{
name: 'UniProt',
url: 'http://www.uniprot.org/uniprot/'+ u
},
{
name: 'NCBI',
url: 'https://www.ncbi.nlm.nih.gov/gene/' + e
}
].map(function( link ){
return '<a target="_blank" href="' + link.url + '">' + link.name + '</a>';
}).join('<br />\n'),
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
});
$('#config-toggle').on('click', function(){
$('body').toggleClass('config-closed');
cy.resize();
});
});

Structure your init like this:
let toJson = res => res.json();
let cy = new Cytoscape({
elements: fetch('some/cytoscape/elements.json').then( toJson ),
style: fetch('some/cytoscape/style.json').then( toJson ),
// ...
});
cy.ready( () => {
// specify qtips here, after the external data is loaded
} );
// or if you prefer promises, you can use a ready promise
// let readyPromise = new Promise( resolve => cy.ready(resolve) );
You're not waiting for the elements to load from your JSON file, so there are no elements in the graph when you do your forEach(). It's often easier to let Cytoscape handle the loading of the elements and the stylesheet for you. Just specify promises in place of in-line objects/JSON.
I also don't see any cy variable in your code.
Anything in the cy.ready() callback will execute only after the data from init has loaded properly. A side benefit is that you can easily separate your stylesheet into a new JSON file, keeping your code shorter and making it easier to switch between stylesheets.

Open dialog with jquery

I have a dialog referenced by $imageDialog and I'm trying to open it with $imageDialog.dialog("open"), but it doesn't work.
The problem is that, by debugging, I've seen the $imageDialog.dialog("open") line executing, but then the open function inside $imageDialog does not execute. It doesn't show any errors and I checked that $imageDialog has the reference well set when executing the $imageDialog.dialog("open").
Here is the html dialog:
<div class="dialog" id="image-dialog"></div>
And here is the javascript code:
var selectedImage;
var $imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}

To open JQuery UI dialog just use:
Jquery:
$(document).ready(function(){
$('#dialog').dialog();
});
HTML:
<div id="dialog">
</div>
Working Fiddle

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
<script type="text/javascript">
$("#dialog").dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}
</script>
</head>
<body>
<div class="dialog" id="dialog">Dialog</div>
</body>
</html>

There are three thing you need to fix in your code
You have added modal html with id calibration-image-dialog but you are using #image-dialog in your script.
imageSrc is not defined
In modal Open event callback you have a single quote missing.
content += "<img alt='previsualizacion" + "src='" + imageSrc + "'>";
it should be
content += "<img alt='previsualizacion'" + "src='" + imageSrc + "'>";
Here is working demo .
var $imageDialog, imageSrc;
$(function() {
$imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}],
maxHeight: 580,
modal: true,
position: {
my: "top",
at: "top+160"
},
resizable: false,
title: "Vista de imagen",
width: 500,
close: function() {
$imageDialog.empty();
},
open: function() {
var content = " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.html(content);
}
});
});
function showImage(img) {
imageSrc = img.src;
$imageDialog.dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dialog" id="image-dialog"></div>
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/100000/velka/autumn-by-the-lake.jpg#.WLnFxbbRDek.link" width="100" height="100">
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/40000/nahled/lion-head-portrait.jpg" width="100" height="100">

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'
});
});