There are 4 divs on my webpage that I need to toggle between using the up and down arrows. Despite trying an if else statement, it doesn't work as intended.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="man-1"></div>
<div class="man-2"></div>
<div class="man-3"></div>
<div class="man-4"></div>
<i class="fas fa-chevron-up manup"></i>
<i class="fas fa-chevron-down mandown"></i>var upBtn = document.getElementById('up');
var downBtn = document.getElementById('down');
var man = document.getElementsByClassName('man');
downBtn.addEventListener('click', down);
upBtn.addEventListener('click', up);
function down() {
// find the shown div
for (var i = 0; i < man.length - 1; i++) {
if (man[i].classList.contains('show')) {
man[i].classList.remove('show');
man[i + 1].classList.add('show');
break;
}
}
}
function up() {
// find the shown div
for (var i = 1; i < man.length; i++) {
if (man[i].classList.contains('show')) {
man[i].classList.remove('show');
man[i - 1].classList.add('show');
break;
}
}
}.man {
width: 40px;
height: 60px;
display: none;
}
.man.show {
display: block
}
.man-1 {
background-color: red;
}
.man-2 {
background-color: green;
}
.man-3 {
background-color: blue;
}
.man-4 {
background-color: orange;
}
/* additional CSS for aesthetics */
#up, #down {
user-select: none;
margin: 5px 0;
width: 50px;
color: #fff;
text-align: center;
font-weight: bold;
background-color: #000;
border-radius: 5px;
padding: 7px;
cursor:pointer;
}<div class="man man-1 show"></div>
<div class="man man-2"></div>
<div class="man man-3"></div>
<div class="man man-4"></div>
<div id="up">up</div>
<div id="down">down</div>If you're considering incorporating keyboard buttons, but also want to display arrows on the page itself, you can experiment with this code snippet. You can view an example here.
<div class="man" id="man-1">
<a href="#man-2"><i class="arrow down"></i></a>
<p>Man-1</p>
</div>
<div class="man" id="man-2">
<a href="#man-1"><i class="arrow up"></i></a>
<a href="#man-3"><i class="arrow down"></i></a>
<p>Man-2</p>
</div>
<div class="man" id="man-3">
<a href="#man-2"><i class="arrow up"></i></a>
<a href="#man-4"><i class="arrow down"></i></a>
<p>Man-3</p>
</div>
<div class="man" id="man-4">
<a href="#man-3"><i class="arrow up"></i></a>
<p>Man-4</p>
</div>
<style>
*{
margin: 0; padding: 0;
}
.man{
width: 100%; height: 100vh;
position:relative;
}
.arrow{
position: absolute;
left: 50%; transform: translateX(-50%);
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px; margin: 10px 0;
}
.up{
top: 0;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down{
bottom: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
p{
position: relative;
top: 50%; transform: translateY(-50%);
text-align: center;
font-size: 30px; font-family: Arial;
}
#man-1{
background: blue;
}
#man-2{
background: purple;
}
#man-3{
background: green;
}
#man-4{
background: red;
}
</style>
To prevent scrolling using a mouse, simply add the following snippet to your style code:
body{
overflow: hidden;
}
I'm in the process of developing an application using Next.js along with redux by utilizing this particular example. Below is a snippet from my store.js: // REDUCERS const authReducer = (state = null, action) => { switch (action.type){ ...
I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...
Every software development process consists of two essential components. FIRST, the hard work of developing the application. SECOND, the even harder task of making it compatible with the notorious Internet Explorer. Currently, we have an AngularJS (v1.3.1 ...
In my JavaScript code, I have a specific object: var list = {134 : "A",140 : "B",131 : "C"} To iterate over the object, I use this code snippet: jQuery.each(list, function(key, value) { console.log(key + " - " + value); }); The expected output should ...
Seeking some assistance as a newcomer to node. I am trying to achieve a task without the use of any other frameworks like Express. Here is the scenario: I have created a form where users can upload photos to a server running on a node. The form contains t ...
I am struggling with correctly disabling a button in my React code when it is clicked. I attempted to pass in an array and handle the button click, but it consistently results in errors. This task seems more complicated than it should be. How can I ensure ...
Why does the session information not get saved? When I reload the page, the session variable 'mucciusersess' disappears. What could be causing this issue? Thanks... I have a cookie on the client-side with a value like 'mucciuserid' se ...
I am faced with a situation where I have multiple batches of code structured like this: 1 <div id="backgrounds" class="centery">Backgrounds 2 <div id="bk1" class="attr">Background 1 3 <div class="container"> 4 ...
How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...
Hello, I'm currently learning Angular and I have a unique challenge. I want to take the names in a table and break each name into individual <input> tags, so that when a user clicks on a letter, only that letter is selected in the input tag. For ...
I'm seeking assistance in developing the view shown below. I am familiar with using position absolute, but I'm wondering if there is a way to achieve this without relying on absolute values. https://i.sstatic.net/m13cl.png ...
After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery. In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an i ...
I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...
I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...
When using the English locale, numbers appear as follows: 111,111,222.00, with a comma as the thousand separator and a point as the decimal separator. In languages like German, the same number would be represented as 111.111.222,00, reversing the positions ...
As someone who is new to HTML and CSS, I am facing a challenge with aligning the items within a navigation bar on my website. The list serves as a navigation bar and is contained inside the "inner header" div. While I was able to align the entire "nav" con ...
Currently, I am developing a small website using Django. Within this project, there are DateTime fields that need to be handled. My intention is to utilize ajax by implementing another button to establish the UTC date while taking into consideration sola ...
When I run the command cat input.txt | node prog.js >result.txt in my terminal, I need to use an input file. This is my code: var fs = require('fs'); var str = fs.readFileSync('input.txt', 'utf8'); str.replace(/^\s* ...
I've been encountering issues with connecting to a remote database in React. Despite my efforts, I haven't been successful in establishing the connection. I have tried various solutions without any luck. The goal is simple - I just want to connec ...
I am currently working on a project that involves creating simple 3D models using dots and lines, whether curved or straight. In the initial version of the project, I utilized SVG elements for rendering, smooth curves, and mouse events. Now, I am explorin ...