i have a side navbar in which each anchor tag has a separate <hr>. I am adding a active class when user clicks on a link, which I have done successfully. But I want to hide the <hr> of the anchor tag that has the active class. The problem is once I hide the hr on active class I can't show it back when another <a> is active.
Menu
<i class="fas fa-home"></i>   <strong>Home</strong><hr>
<i class="fas fa-chart-bar"></i>   <strong>Report</strong><hr>
<i class="fas fa-money-bill-alt"></i>  <strong>Transaction</strong><hr>
<i class="fas fa-address-book"></i>   <strong>Account Master</strong><hr>
<i class="fas fa-key"></i></i>   <strong>Change Password</strong><hr>
<i class="fas fa-cogs"></i></i>   <strong>Financial Year</strong><hr>
<i class="fas fa-sign-out-alt"></i></i>   <strong>Logout</strong><hr>
jquery is:
$(this).addClass("menuActive").siblings().removeClass("menuActive");
$(this).find("hr").hide().siblings().find("hr").show();
As I have shown in the image when I click other <a> the <hr> of Report remains hidden.
This would be easier with a CSS rule:
a.menuActive hr {display:none}
Now all you need to manipulate in javascript is the menuActive class; the hr will appear and disappear on its own.
$(this).addClass("menuActive").siblings().removeClass("menuActive");
Try display:none and display:block instead of show and hide like this:
$("#id").css("display", "none");
$("#id").css("display", "block");
Related
I'm following the w3 tutorials and exploring a responsive design template here (see source code for details): https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm
I'd like to edit the sidebar so that a close button is always displayed, and close the sidebar when clicked. Under it's current design, this only works for the mid-size and small windows.
I tried revising the code to remove the hidden class (so it's always displayed). However, the function does not close the sidebar when clicked:
From:
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
To:
<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
I'm missing something very elementary here. But I've fiddled with this long enough I'd like to get pointed in the right direction. The code is right, I'm guessing this may be a DOM or bubbling issue, or basic design edit? Thanks!
There appears to be an !important media query CSS rule that's probably blocking your styling from having effect:
#media (min-width: 993px)
.w3-sidebar.w3-collapse {
display: block!important;
}
I did a document.querySelector("#mySidebar").style.display = "none" and it had no effect. You could remove that !important rule or otherwise work around it...
I have a ul list, where one li elements has a thumbs up, and other haves a thumbs down, when i click each of the thumbs i add a class green or red depending of the type of thumb, but only one can be active or with color, if on of them is selected i need to remove the class of the other that is given a color (green, or red)
The problem is that i cant get the element to check if has the class or not.
My code:
$('.approved').click(function (event) {
event.preventDefault();
$(this).toggleClass('bg-green');
});
$('.not-approved').click(function (event) {
event.preventDefault();
console.log($(this).parent().find('.approved').hasClass('bg-green'));
$(this).toggleClass('bg-red');
});
html:
<div class="options-tools pull-right">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-thumbs-up approved" aria-hidden="true"></i></li>
<li><i class="fa fa-thumbs-down not-approved" aria-hidden="true"></i></li>
</ul>
</div>
Basically when i click on thumbs down (.not-approved), i add the color class 'bg-red', but before i need to chech if the "thumbs up" is active(bg-green).
What im doing it wrong?
Have you tried to do $('.approved').hasClass('bg-green'). hasClass can help you identifying if an element has a specific class. This is a boolean so it will return true if it has the class, otherwise false. You do not need to get the parent and then find the class. You can just select the class if you not the identifier.
I made a whole li element clickable by making use of anchor tag as such:
<li *ngIf="notification.payload.table">
<a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
<div class="d-flex flex-column">
<span style="font-size: 1.1rem">
<strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
<span style="font-size: 0.9rem">{{notification.payload.time}}</span>
</span>
<span *ngIf="notification.payload.note"class="note">
<span class="noteLabel">Note</span>
<span> This is a note attached to it</span>
</span>
</div>
<span>
<fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
</span>
</a>
</li>
When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?
How can I make the close icon clickable without getting redirected while being on the same element?
It seems to me that you need something similar to this question AngularJS ng-click stopPropagation
To stop propagating the event
$event.stopPropagation();
I achieved that using:
deleteNotification(e, notification) {
e.stopPropagation();
}
I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.
From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.
Is it possible to add icon button in tab in Material Design Lite? The tab is only a tag so I don't know to include a icon button within.
You can but you have to fix the css. Perhaps only place the icon there instead of the complete button.
<a href="#scroll-tab-3" class="mdl-layout__tab ">
<span class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</span>
</a>
http://codepen.io/Schnueggel/pen/OyYjVO