In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected.
Below are some images that illustrate how I envision this project to work.
Please provide assistance.
Firstly, you have the option to assign the same event to multiple selectors like this:
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item"),
Secondly, I check if the selected element already has a certain class, indicating it is active. If it is active, I deactivate all elements. If not active yet, I deactivate all elements and then activate the selected one.
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition: all 0.3s;
transform: translateX(0);
z-index: 1;
}
[data-page='0'] .board-nav-indicator {
transform: translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform: translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform: translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
.board-pages {
position: absolute;
top: 75px;
left: 0;
width: 100%;
height: calc(100% - 75px);
overflow: hidden;
}
.board-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s;
transform: translateX(0);
overflow: auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex: 0 1 25%;
padding: 6px;
}
.grid-item-theme {
flex: 0 1 25%;
padding: 6px;
}
.grid-row {
overflow-x: auto;
white-space: nowrap;
}
.grid-row .grid-item {
display: inline-block;
max-width: 110px;
}
.grid-item-content {
text-align: left;
font-family: "mr-eaves-modern";
font-size: 0.3rem;
text-transform: uppercase;
}
.pick-palette img {
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}
.grid-item-content {
height: 26px;
line-height: 26px;
position: relative;
}
.grid-item-content i {
position: absolute;
right: 0;
top: 0;
}<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu">Warm<i class="material-icons">keyboard_arrow_down</i></div>
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<i class="material-icons more-icon">more_horiz</i>
</div>
</div>
(... remaining HTML content ...)
</div>
<div class="after-first-palette">
<div class="grid-item-theme" id="align-left">All Warm Colors</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
(... remaining HTML content ...)
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script>
$(".board-pages .grid-item-pattern-board, .board-pages .grid-item").on("click", function() {
if ($(this).hasClass("pick-palette")) {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
} else {
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass("pick-palette");
}
});
</script>Currently using Flot to create a graph displaying clicks per minute within the first 60 minutes of short URLs generated at . The graph currently displays data from minute 0 to minute 59. My query is about adjusting the data to start at 1 and end at 59, wh ...
I am currently facing an issue with updating a specific value in a JSON file during a Playwright test. The file contains multiple values, but I only need to change one while keeping others unchanged. Despite finding a potential solution, I am encountering ...
I'm in the process of familiarizing myself with the bootstrap table plugin, which can be found at this link: The specific example I'm attempting to replicate is located here: Here's my HTML code: http://jsfiddle.net/6h5sqs9d/ Within my cg ...
I have an array consisting of more than 50 objects. This array is created by concatenating two arrays together. Each object in this array contains a 'date' key with the date string formatted as: `"2017-03-31T11:30:00.000Z"` Additionally, there ...
I am managing two DISTINCT websites: Website A: An interactive Wordpress site featuring a Gravity Form. Website B: A separate non-Wordpress site that hosts a basic form - the information collected from this form needs to be transferred to Website A' ...
For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...
I am receiving a list of over 1000 numbers from an API and storing it in a variable called "number". My goal is to find the highest number from this list. However, I encountered an error while attempting to do so: TypeError: CreateListFromArrayLike called ...
Currently, I'm in the process of building a web application that involves 4 radio buttons. My main focus now is on validating these radio buttons to ensure that none are checked by default. In the scenario where the user tries to submit the form witho ...
I am currently managing a JavaScript bootstrapper module that I want to keep as clean and straightforward as possible. Here is the current code snippet: function bootStrapper() { xmlRepository.getAll().done(function (result) { autoPolicyForm ...
Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...
I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom. Here is my animation code in Angular: animations: ...
During the process of creating a website using bootstrap 4, I included the following snippet of HTML code: <form action="https://www.youtube.com/watch?v=pQN-pnXPaVg" target="_blank"> <button>Start</button> </form> Despite li ...
A contact form built in Next.js makes use of the FormSubmit API to send emails upon clicking the submit button. Below is the code for the onSubmit handler: const handleSubmit = async (e) => { e.preventDefault(); const res = await fetch("https:/ ...
I'm looking to implement a shortcut using Ctrl+LeftMouseClick in my React project. It functions perfectly on Chrome on my Mac, but in Firefox the shortcut initiates a right mouse click (event.button = 2). I believe this may be due to MacOS's Rig ...
Recently delving into vue.js, I encountered a challenge with multiple checkboxes sharing the same value. This resulted in checkboxes of the same value being checked simultaneously. How can this issue be resolved? var app = new Vue({ el: '#app&apo ...
I recently started working with TypeScript. I encountered an issue when attempting to utilize useEffect in TypeScript within a React context, Error: Argument of type '() => () => boolean' is not assignable to parameter of type 'Effec ...
Looking for help with appending the fadeIn() jQuery function to a string that increments an integer within a paragraph. I attempted concatenation without success. Any recommendations on how to solve this issue? $p.text(parseInt($p.text(),10) + 1); ...
What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...
I need advice on securing a JavaScript function that passes values into URLs in order to navigate to another page. What precautions should I implement to prevent manipulation of this process? This is the code snippet I am currently using: window.location ...
Upon clicking to retrieve data('product-id') from the delete-btn for the first time, I was able to get $product->id and successfully delete it. However, when I attempted to delete another product, it failed. It seems like it didn't retri ...