I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this?
index.html
<ion-list>
<ion-item ng-repeat="item in familleItems">
<div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
</ion-item>
</ion-list>
I would appreciate any assistance. Thank you.
Customize hover effect
Using only CSS properties
ion-item:hover a {
background-color: slategray !important;
}
Enhance active item appearance
To highlight an active item, you can apply a custom CSS class using ng-class. Define the specific styles for this 'active' class.
<ion-item ng-repeat="item in familyItems" ng-class="{'activeItem': active}">
<div ng-click="selectSubFamily(item.Numfam)">{{item.Name}}</div>
</ion-item>
For instance:
<ion-content padding="true">
<ul class="product-list">
<li ng-repeat="(key, item) in products" ng-class="{'selected':item.selected}">
<div class="list card" ng-click="select_item(key)">
<p><span>{{item.title}}</span></p>
<div class="item item-image">
<img ng-src="{{item.photo}}">
</div>
</div>
</li>
</ul>
</ion-content>
// Styling
.selected {
// Highlighting style here
}
// Controller
.controller('SomeController', ['$scope', function ($scope) {
$scope.products = [
{ "title": "Super Man's Tommy Toy", "price": 20000, "thumb": "DO_RE_MI.jpg" },
{ "title": "An old picture of Seldom", "price": 1999, "thumb": "MI_RE_DO.gif" }
];
$scope.select_item = function (key) {
if ($scope.products[key]) {
$scope.products[key].selected = true;
}
}
}]);
Source
Thank you, it did the job. I made a few tweaks to your code because I only wanted to change the background color of the selected item. Here is my modified code snippet
<ion-content padding="true">
<ul class="product-list">
<!-- Ensure you have a .selected class in your stylesheet -->
<li ng-repeat="(key, item) in products" ng-class="{'selected' : item.selected, 'unselected' : !item.selected }">
<div class="list card" ng-click="select_item(key,familleItems.length)">
<p><span>{{item.title}}</span></p>
<div class="item item-image">
<img ng-src="{{item.photo}}">
</div>
</div>
</li>
</ul>
</ion-content>
// Styling
.selected {
background-color: gray !important;
}
.unselected{
background-color: white !important;
}
// Controller
.controller('SomeController', ['$scope', function ($scope) {
// Product list array
$scope.products = [
{ "title": "Super Man's Tommy Toy", "price": 20000, "thumb": "DO_RE_MI.jpg" },
{ "title": "An old picture of Seldom", "price": 1999, "thumb": "MI_RE_DO.gif" }
];
// Selection logic
$scope.selectSousFamille = function(key, count) {
for (var i = 0; i < count; i++) {
if (key == i) {
$scope.familleItems[i].selected = true;
} else {
$scope.familleItems[i].selected = false;
}
}
}
}]);
I hope this can be useful for someone else as well.
To customize the activated background color for different platforms, you can modify the values in the variables.scss file as shown below:
$list-ios-activated-background-color: #ff8902;
$list-md-activated-background-color: #ff8902;
$list-wp-activated-background-color: #ff8902;
(Alternatively, adjust these variables using colors from your SASS color map)
$list-ios-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-md-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-wp-activated-background-color: lighten(color($colors, dark, base), 10%);
I encountered a problem while working on this task. I used preg_split in PHP to create an array. However, my challenge now is converting it into JSON format. Despite trying several methods, the resulting code appears poorly written and does not seem to be ...
Having a PHP script to track button clicks to a text file <?php if (isset($_POST['clicks1'])) { incrementClickCount1(); } function getClickCount1() { return (int) file_get_contents("count_files/clickcount1.txt"); } function increme ...
My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...
I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info cont ...
Recently, I made the decision to improve the look of an online manual I have been working on for my company by incorporating Bootstrap. The manual is structured with a tree-view that contains titles linking to HTML files with information and CSS stylesheet ...
In the past, I would rename links by adding a question mark at the end of them, for example: LinkName.mp4? to Anything I want.mp4 This method allowed me to download the file with the desired name "Anything I want" instead of the original "LinkName"... U ...
Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...
Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...
I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...
Recently, I've dived into the world of jQuery and JavaScript with the goal of creating a simple app. The main functionality I'm trying to implement is the ability to copy a row from one table to another and then delete the original row when a but ...
I am facing an issue with the gradient overlay on my blue box. I want the overlay to fade from transparent to blue at the bottom of the box, creating a smooth transition for overflowing text. This is how it is supposed to appear (and does on most browsers ...
Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...
Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...
Let's say there's an interesting HTML document presented below with associated line numbers: 30 - <div id="myDiv"> 31 - <span class="mySpan">Some Text</span> In this scenario, PHP is being utilized for a specific purpose: $ ...
I am currently working on populating a summary table from a MySQL database, which consists of multiple rows and cells. Here is the image of my table: I initially thought about writing individual SQL queries for each cell, but this approach would require a ...
Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...
Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...
Injecting insecure html into a <div> is part of my current task: <div class="category-wrapper" ng-bind-html="content"></div> The angularjs "code" in this html snippet ($scope.content) includes the following: <script type='text/ ...
As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...
After encountering sizing issues on Windows 10 due to default scaling set at 125%, I attempted to replicate the issue by adjusting the Scale on Ubuntu. My attempt to fix the size by modifying the initial-scale value did not yield any results: document.que ...