Develop Reference

Limit JavaScript function to specified screen width

Help guys...everything works until website goes to tablet/mobile widht...than JS start to act crazy. I understand that its because there is two actions under one funciton, but is there any way to separate this and/or to limit add/remove class .currentline to specified screen width.
When its in tablet/mobile size i have dropdown menu so i dont need animated lines from .lineparent
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
document.querySelector('.currentline').classList.remove('currentline');
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
document.querySelector(`.${lineName}`).classList.add('currentline');
}
});
});
.lineparent {
width: 35%;
height: 2px;
}
.line,
.line2,
.line3,
.line4,
.line5,
.line6 {
width: 100%;
height: 2px;
background-color: var(--textcol);
opacity: 0;
}
.currentline {
opacity: 1;
animation: linewidth 0.5s;
}
#keyframes linewidth {
from {
width: 0;
}
to {
width: 100%;
}
}
<div class="albmenu"id="albmenu">
<ul id="gallery-links">
<li><div class="lineparent"><div class="line currentline"></div></div>
All</li>
<li><div class="lineparent"><div class="line2"></div></div>
Weddings</li>
<li><div class="lineparent"><div class="line3"></div></div>
Business</li>
<li><div class="lineparent"><div class="line4"></div></div>
Sports</li>
</ul>
<div class="dropdown" id="dropdown">
<button onclick="myFunction()" class="dropbtn">Category</button>
<div id="myDropdown" class="dropdown-content">
<a value="Family" href="#gallery" data-gallery="grid">All</a>
<a value= "" href="#gallery" data-gallery="grid2">Weddings</a>
<a value= "" href="#gallery" data-gallery="grid3">Business</a>
<a value= "" href="#gallery" data-gallery="grid4">Sports</a>
</div>
</div>
</div>

If it is styling then you can use CSS media queries to handle that, and if it is some JavaScript then you can use the DOM APIs to detect the width of your viewport and have code executes or not based on the width.

I solved it myself with an innerWidth. I changed the code to this:
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#albmenu').addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
document.querySelector('.current').classList.remove('current');
if ((window.innerWidth > 1024)) {document.querySelector('.currentline').classList.remove('currentline');
}
let galleryName = event.target.getAttribute('data-gallery');
let lineName = event.target.getAttribute('data-line');
document.querySelector(`.${galleryName}`).classList.add('current');
if ((window.innerWidth > 1024)) { document.querySelector(`.${lineName}`).classList.add('currentline');}
}
});
});

onkeydown navigate forward and backward with arrows key

I try to navigate onkeydown with the arrow keys left and right throw my website.
With my font awesome links it is working, but I want that it also works onkeydown with the arrow keys on my keyboard.
One problem is, that my site use localization for german an english. That is why my url's look like this:
https://www.example.com/de
https://www.example.com/en
https://www.example.com/de/Arbeiten
https://www.example.com/en/Projects
Here is my HTML:
<div>
<a href="{{ route('contact') }}" onkeydown="if(e.keyCode == 37) ? window.location.href={{ route('contact') }} : " class="left-arrow arrow-home-left">
<i class="fas fa-angle-left fa-5x"></i>
</a>
</div>
<div>
<a href="{{ route('projects') }}" onkeydown="if(e.keyCode == 39) ? window.location.href={{ route('projects') }} : " class="right-arrow arrow-home-right">
<i class="fas fa-angle-right fa-5x"></i>
</a>
</div>
And my CSS:
body {
background-color: green;
}
.arrow-home-right {
display: inline;
top: 50%;
right: 0;
color: white;
background-color:red;
position: fixed;
}
.arrow-home-left {
display: inline;
top: 50%;
left: 0;
color: white;
background-color:red;
position: fixed;
}
.arrow-home-right:hover, .arrow-home-left:hover {
display: inline;
color: black;
}
Here is my JSFiddle:
https://jsfiddle.net/djosxy7z/15/
I want to jump to the next site/page with the arrow keys onkeydown. With the font awesome links it is working, but not wit the keyboard.
Hope, somone can give me a hint. :)
e: Do I have to call the onkeydown function on the body?

You can capture the keydown event with your body tag. Here is an example:
<body onload="onload_handler()">
<div>
<a href="{{ route('contact')}}" class="left-arrow arrow-home-left">
<i class="fas fa-angle-left fa-5x"></i>
</a>
</div>
<p></p>
<div>
<a href="{{ route('projects')}}" class="right-arrow arrow-home-right">
<i class="fas fa-angle-right fa-5x"></i>
</a>
</div>
<script>
function onload_handler() {
document.body.addEventListener("keydown", keydown_handler);
}
function keydown_handler(e) {
let txt = "keydown_handler: keycode = " + e.keyCode;
let anchor = 0;
if(e.keyCode == 37) {
anchor = document.body.querySelector(".left-arrow")
txt = txt + ": left arrow";
} else if(e.keyCode == 39) {
anchor = document.body.querySelector(".right-arrow")
txt = txt + ": right arrow";
}
if(anchor)
txt = txt + ": " + anchor.href;
console.log(txt);
if(anchor)
anchor.click();
}
</script>
</body>
Here is a link to the same site that you posted your fiddle on, using the example above. The example shows which keys you press in the console.

Generic Javascript Code

I wrote a code for a hover functionality. Now, I am asking myself how to make this code generic in order to show different divs when hovering over a different link. The JavaScript code is as follows:
<script>
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#purpose').show();
}, function() {
$('div#purpose').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#purpose").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
The div I call is as follows:
<!-- Purpose: Hover Popup -->
<div class= id="purpose">
<h3>Purpose</h3>
<p>
Test
</p>
</div>
Furthermore, I added some CSS style
<!-- Style for Hovering -->
<style type="text/css">
div#purpose {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
</style>
Could anybody tell me how to make this code generic in order to add further divs which are called from another link?

Create a javascript function and pass in the variables (e.g. link and div)
function foo($link, $div){
var moveLeft = 20;
var moveDown = 10;
$link.hover(function(e) {
$div.show();
}, function() {
$div.hide();
});
$link.mousemove(function(e) {
$div.css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
}
For your existing behaviour call the following for example:
foo($('a#trigger'), $("div#purpose"));
This will actually be slightly better for performance as you'll be using the same jQuery reference each time. However depending on how you're actually planning on using this, having a seperate function call each time might not be the best way.
For example if you wish to use this on dynamic data it wouldn't be sensible to make static calls to a function each time.

Make use of custom data-* attributes in your HTML, and use classes to target a generalized group of elements, ex:
<a class="trigger" data-target="purpose" />
And the JS
$(".trigger").hover(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}, function() {
var elemToShow = $(this).data("target");
$("#" + elemToShow).show();
}).mousemove(function(e) {
var elemToShow = $(this).data("target");
$("#" + elemToShow).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});

You could build your trigger elements in a way that they hold the information about what element to show:
<a class="trigger" data-show="purpose">...</a>
Then you initialize them all at once like this:
$(function() {
$('.trigger').hover(function() {
var elementId = $(this).data('show');
$('#'+elementId).show();
}, function() {
var elementId = $(this).data('show');
$('#'+elementId).hide();
);
});

You don't need any JavaScript or jQuery at all for this--you can simply use CSS with the :hover pseudo-class.
.menu {
background-color: #eee;
}
.menuItem {
display: inline-block;
}
.menu .trigger + .purpose {
display: none;
position: absolute;
background-color: #eee;
}
.menu .trigger:hover + .purpose, .menu .trigger + .purpose:hover {
display: block;
}
<div class="menu">
<div class="menuItem">
Trigger 1
<div class="purpose">
<h3>Purpose 1</h3>
<p>
Test 1
</p>
</div>
</div>
<div class="menuItem">
Trigger 2
<div class="purpose">
<h3>Purpose 2</h3>
<p>
Test 2
</p>
</div>
</div>
<div class="menuItem">
Trigger 3
<div class="purpose">
<h3>Purpose 3</h3>
<p>
Test 3
</p>
</div>
</div>
<div class="menuItem">
Trigger 4
<div class="purpose">
<h3>Purpose 4</h3>
<p>
Test 4
</p>
</div>
</div>
</div>

toggle button with font awesome and jquery

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.
all the help would be appreciated.
here is the code:
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

one approach is to use toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
http://codepen.io/miguelmota/pen/zGqPOX

Why not simplify this a bit by using a single element with .toggleClass().
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});

The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}

Generally and simply it works like this:
You can use this in general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>

Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.
I combined the solutions of #miguel-mota and #oka.
Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler.
Make sure to use the each function to apply multiple transformations.
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>

This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
An example:
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}

css
.rotate{
transform:rotate(180deg);
color:black
}
jquery
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});

Page navigation using jQuery slideUp() animation

I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.
Until now I have this JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
Running on this: http://jsfiddle.net/93gk3oyg/
I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...
Any help would be appreciated :)

I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with z-index.
HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/