Is there a way to make the images on my portfolio clickable so that more information about the project appears on the first click, and then hides when clicked again? Preferably using simple JavaScript without jQuery.
I found a website where this feature is implemented, but currently it only works by holding the click instead of toggling: visit link here
After exploring your website, I believe I have a potential solution for your issue.
To address the problem, include the following script in your JavaScript file:
var imageElems = document.getElementsByClassName('image-box');
for (var i=0; i<imageElems.length; i++) {
imageElems[i].addEventListener('click', function() {
this.querySelector('.overlay').classList.toggle('show');
});
}
Additionally, add the following CSS code:
.overlay.show {
opacity: 1;
}
In summary, I have implemented a click event on all images with the class name "image-box," which toggles the visibility of another class called "show" upon clicking.
It may be helpful to provide more detailed code examples when framing your questions in the future. This will allow others to better understand and assist with your specific issues. I decided to offer assistance because I noticed you are a graphic designer diving into coding, and that is admirable!
There is another way to achieve the desired outcome using only CSS, no need for JavaScript.
.element {
position: relative;
height: 300px;
width: 300px;
background: red;
}
.pseudo-checkbox {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
cursor: pointer;
}
.pseudo-checkbox:checked + .description {
display: initial;
}
.description {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="element">
<input type="checkbox" class="pseudo-checkbox" />
<div class="description">
Description
</div>
</div>Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, quest ...
How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...
I am in the process of developing a junior project in JavaScript, utilizing React to gain experience. My goal is to create a simple "notes app." However, when it comes to fetching notes from the server and displaying them using the @material-ui Card eleme ...
I'm at my wit's end with this issue. Despite searching extensively, none of the proposed solutions have resolved it for me. I am attempting to set up a basic file upload using multer, but I cannot seem to make it work as req.file consistently rem ...
The text is set in white on a dark grey background by default and appears just below the formatted table. Best regards, Phil Please refer to the attached image:Section of table showing rows per page selector box ...
I am encountering an issue where, when sending an ejs templated file as a response to a HTTP request, the HTML and CSS render properly but the Javascript does not respond. Even though the Javascript sources are linked in the head of the ejs response, the f ...
I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...
Recently, I created a SessionMgr.cfc file in ColdFusion to manage session variables for my $.ajax calls. However, it seems like I might have made a mistake somewhere. Despite scouring through numerous pages on Stack Overflow and Google, I still can't ...
When a user checks a checkbox under a specific condition, I want to display an alert message and then uncheck the checkbox. To achieve this, I am utilizing the click function on the checkbox to internally uncheck it and trigger necessary events. I have a ...
Currently, I am utilizing VUE and I must say, boostrap-table is performing admirably! Within my component, I have the following: <BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></ ...
I am in need of a custom formatter function for the b-form-spinbutton component that depends on my data. I want to pass an extra argument to the :formatter-fn property in the code snippet below, but it is not working as expected. <b-form-spinbutton :for ...
My horizontal scrollbar is not functioning as expected in my React app. I am currently working on a TableData component and here is the rendered JSX code: <table> <div className="co-table"> <div className="co-table__ ...
I came across a nodeJS code recently that was supposed to retrieve random documents from my mongoose collection using the mongoose-random plugin. However, whenever I call the findRandom() method, it returns a 500 error. test.js Below is the code snippet: ...
In my current project, I am facing a challenge with a parent component needing to call a method from one of its child components: <template> <div> <button @click="callChildMethod"> <child-component ref="child&q ...
Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...
I'm currently troubleshooting an issue with my dropdown menu. I have come across a problem where a condition is false, but it's somehow being treated as true. To help identify the issue, please follow these steps: Click on "item 1" Click on th ...
My bootstrap navbar has a CSS media query that collapses it and allows it to be opened via a hamburger button when the screen size is below a certain threshold (for mobile devices). However, I have encountered an issue with a dropdown menu within the navba ...
Here is the code snippet I am working with: interface State { backgroundColor: boolean; isLoading: boolean; errorOccured: boolean; acknowledgment: string; } export class GoodIntention extends React.Component<Props, State> { ... onCli ...
I am attempting to update the value using the rendered.setproperty() method, where the value is updating the second time on a listen event These are the values that I am sending for the first time as blank in some widget <ols-giftcard-payment-widget ...
I am currently working on customizing the _tk theme for WordPress, and I have hit a roadblock when it comes to the Nav Menu functionality. Adding menu items from the WordPress admin page is easy for custom links and pages. However, I am looking to include ...