Hey, I have this interesting idea but CSS isn't my strong suit. Any thoughts on how to achieve it?
div), displays a small clickable pre-defined image in the Top-Right corner inside the item.Any suggestions on how to make this happen? Open to ideas!
<div class="hasicon">
<img src="blah.jpg" class="icon" />
</div>
CSS:
.icon { display: none; }
.hasicon { position: relative; }
.hasicon .icon {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
}
jQuery:
$('body').on('click', '.hasicon > .icon', function() {
// do something
});
To implement this functionality, just include the hasicon class on the div. Only those with this class will show the icon.
UPDATE:
If necessary, you can also use an empty span instead:
<div class="hasicon">
<span></span>
</div>
CSS:
.hasicon { position: relative; }
.hasicon > span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
background: url('myImage.png') center no-repeat;
}
jQuery:
$('body').on('click', '.hasicon > span', function() {
// do something
});
Image not being shown:
<div class="PictureDiv">
<img src="image.jpg" class="thumbnailImg">
</div>
Image now visible:
<div class="PictureDiv">
<img src="image.jpg" class="thumbnailImg displayed">
</div>
CSS Styling:
.PictureDiv .thumbnailImg{
position: absolute;
right: 0px;
top: 0px;
display:none;
}
.PictureDiv .thumbnailImg.displayed{
display:block;
}
To show or hide the image, you will need to use javascript to add or remove the class displayed.
To dynamically add a class, you can utilize the :after and :before pseudo selectors.
HTML
<div class="something dynamicallyAdded"></div>
CSS
.dynamicallyAdded {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.dynamicallyAdded:after {
content:"";
width: 100px;
height: 100px;
top: 0;
right: 0;
position:absolute;
background-color: red;
}
/* if you want the hover effect */
.dynamicallyAdded:hover:after {
content:"";
background-color: green;
}
Another working example on jsFiddle (includes an image)
I have a JSON feed that is decoded by PHP using json_decode and then echoed onto my HTML page. The issue I am facing is that the feed contains \n characters, but when PHP echoes them out, they are not recognized as new lines or line breaks in HTML. In ...
I have a gridview that displays product details and includes a quantity textbox that is not linked to any database. For each row, I want it to show the cost (price * quantity) and the total cost for all rows in a label below. However, I am encountering a f ...
My goal is to become proficient in React, so I decided to install Node.js (v 10.16.0 LTS) and run the following commands using Windows Powershell: npx create-react-app my-app cd my-app npm start However, after making changes to the code (such as modifyin ...
Vue.directive('customselect', { params: ['selectedTask'], bind: function () { var that = this; $(this.el) .select2() .on('change', function () { that.set(this.value); if (!this.name.matc ...
I've recently been putting together an e-commerce application using Angular 14. Currently, I'm tackling a form that must only be submitted once the user accepts the "Terms & Conditions" shown in a modal popup. The FormComponent and ModalCompone ...
I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...
I have a set of links with the class "ajax" that are meant to fetch content from an element with the id "test" in the file "data.html" located in the same directory. This content should then be inserted into the div with the id "content" on my page: <s ...
HTML <input type="button" id="1" class="add" value="+" title="Add" onclick="set(this);"/> JS function set(obj){ alert(obj.id); } The code snippet provided above seems to have an issue. My Requirement I am looking for a solution that allows ...
I'm attempting to create a dynamic header using ng-repeat. Here's the initial code: <ul class="right"> <li><a href="#carousel">Home</a></li> <li><a href="#about-us">About Us</a></li> &l ...
I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...
Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...
I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...
I am facing a persistent issue that I just can't seem to resolve. Despite trying numerous solutions found online, nothing seems to fix it. Below are the configurations: package.json { "scripts": { "test": "jest --no-cache", ...
I have created a simple app using jQuery Mobile. At some point in the app, I include the following code: <a href="test_es.html" data-role="button">Start!</a> This code snippet loads a new HTML file that contains several jQuery Mobile page ...
Is there a way to dynamically add key-value pairs to the initial state of an empty object in functional components, similar to computed property names in class components? I currently have an initial state of {}. const [choice, setChoice] = useState({}) ...
My primary model is called Accounts. Additionally, I have several Has Many models such as Notifications and Friends Within my file named main.js, I would prefer to execute commands like: socket.get('/users/me/notifications'); instead of: soc ...
I am currently trying to integrate components from material-ui into a project based on react-rocket-boilerplate. An error message is appearing: [23:55:11] gulp-notify: [Compile Error] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: Unexpected ...
I am seeking a solution to determine how many times the same username appears in 2 or more tables. The username I need to search for will be selected from $_SESSION['username'] First Table | id | username | date | | 1 | Mart |28-5-13| | 2 ...
When working with React-Native, I encountered a specific issue involving a custom component that extends from TextInput. The code snippet below demonstrates the relevant components: TextBox.js ... render() { return ( <TextInput {...this.props} ...
Upon clicking on the button labeled "delete save" in the Chrome console, an error is encountered: "Uncaught SyntaxError: Unexpected identifier". Additionally, when this action is performed, an object is printed to the console revealing its data ({company ...