I have 3 buttons "Home","About" and "Contact". On page load I want only the "Home" button to be active. After clicking the "About" button, only the "About" button should be active and the rest 2 buttons not active. Similarly, after clicking the "Contact" button, only the "Contact" button should be active and the rest 2 buttons not active.
The word "active" here means that the button having different CSS (when compared to the other 2 buttons). I am using AngularJS as my front-end JS.
You will want to read up on the documentation for the Angular ngClass directive.
With ngClass you can bind a css class to a variable in your view.
Assuming you set the page on your $scope.
JS (inside your angular controller)
$scope.page = 'home';
HTML
<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>
CSS
<style type="text/css">
.active {
background: blue;
}
</style>
If you're using ui-router then there's a directive called ui-sref-active which adds custom class when particular state is active.
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
Here's a working jsfiddle which shows how it works. Point student.profile state which adds active class also on student state.
Related
In my html template I have two common component
If I click on app-headers link its active class is applied.After that If i click on sidenavbar's link its active class is applied. At a time I want only one active class be applied between two child component. what changes can be done from parent component so only one components active class is applied.
I tried by :host ::ng-deep in scss , but I am not able to make it conditional. I want this changes be reflected only, when I click on other components . But its ovverriding child components css.
You could have a flag when they click make that as true and when other options clicked then make it as false and use it in required way. Here's an example below which changes the color based on colorFlag to true or false in css:
<div class="col-12 text-right" style="{{(colorFlag) ? 'color: red;':'color:blue;'}}">
<!-- Your Code Here -->
</div>
I have a button in React which when clicked scrolls the page to the desired location, which is working.
<div className={styles.classB}>
<Button onClick={ScreenMover.MoveToElem} > Extras </Button>
</div>
But I wanted the same onClick feature without a button, say a link and when clicking it should do the same operation. So I have used the below Link button, but it is not taking the onClick instead it goes to the page top based on the to="" attribute.
<div className={styles.classL}>
<Link className={styles.linkButton} onClick={ScreenMover.MoveToElem} to=""> Extras </Link>
</div>
Another thought, if we can not achieve the above one, then can we have a button look like a link by applying some css style to the button? I should be able to override the inherited button styles and instead it should take the link look and feel. Is it possible and can we have a sample css class for it?
Thanks in advance.
The Link object is important for you?
If not you can use a simple <p> tag and the onClick event will working perfectly.
<p className={styles.linkButton} onClick={ScreenMover.MoveToElem}> Extras </p>
I am trying to add a custom css class directive to my button, but whenever I do that, the angular material design goes away and the button goes back to its default ugly state. How can I make sure that my custom css class gets added to the button without it removing the mat-buutton effects?
<button
mat-button
[class]="todoItems.completed ? 'delete': null"
(click)="deleteTodo(todoItems._id)"
[disabled]="!todoItems.completed">
<mat-icon >delete</mat-icon>
</button>
Here is the css
.delete:hover {
color: red
}
I want my class to be applied only if the completed property is true and when that property is true the delete button will turn red when I hover on it.
The hovering part works fine but the problem I have is that the material design disappears and it turns into the default style of button
mat-button applies its own css classes to the <button> at run time.
When you are doing [class]="todoItems.completed ? 'delete': null" it is hard overridding these classes.
To append your class to the existing ones, you need to use ngClass instead.
Hi i have one small issue. I have used Wordpress plugin to insert Contact Form 7 form into collapsed button, that is loading CF7 form when is pressed. Now i want that button to disapear after been collapsed. I checked and found this CSS class that is loaded when button is collapsed, and added just display:none but seems that is not working.
button#bg-showmore-action-5aa011ecd8ad50026368201.bg-showmore-plg-button bg-
orange-button bg-close {
display:none;
}
and this is entire HTML from that button:
<button id="bg-showmore-action-5aa0192e2a29b3050071453" class="bg-showmore-
plg-button bg-orange-button bg-close" style="
color:#4a4949;">Enquire</button>
Link from page where yellow button is present. How to hide button after been collapsed?
This is image before colapsed:
and this is image after been pressed the button:
yellow button is stick at bottom on end of form. I want to disapear after form been collapsed. I used this plugin to generate that button:
https://wordpress.org/plugins/show-hidecollapse-expand/
In your css code, notice the . (for classes) and # (for IDs) is not present in the code for some of the items. Try something like this:
Ok, saw your update... so to be more specific, try:
.bg-showmore-plg-button.bg-orange-button.bg-close {
display:none;
}
i have many links in left side of my site,so i have a list like this
home
categories
aboutus
contactus
when i click on home the page is submitted and then loads.after loading i need to
highlight home list...similar to others that clicked list should be selected after loading.
how to do that???
There are two ways I normally use:
Use something like an .active class on the item on it´s page, so the home link would have the .active class on the home page;
Use a class on every item (.home on the home link, .contact on the contact link, etc.) and give the body of every page a specific id or class as well (#home on home, etc.). The you can style the links uniquely on each page using stuff like #home .home, #contact .contact {}, etc.