How to add notification count in notification menu automatically - css

I want to show notification count in notification tab when receive new notifications. like in this picture. please guide me. If you know the html and css code please assist. thank you all. Good day to you.
If I add this code
<span class="badge" style="background-color: #f0ad4e">1</span></a></li>
after the navbar it appeaser. but it display every time with or without new notification. is there anyway to fix this?
here is the code
<li class="active" > Notification <span class="badge" style="background-color: #f0ad4e">1</span></li>
badge css
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}

I don't know how you're choosing to update the notification count, so I've just provided a very basic way for you to update notifications. You can do something with a simple JavaScript DOM script where you can trigger the notificationCounter() function. I've updated your HTML code as well (see below). Be sure to include it into .js file and load it in the footer of your HTML document.
Javascript:
function notificationCounter() {
counter += 1;
document.getElementById("NotificationBadge").innerHTML = counter;
}
const counter = 0;
HTML:
...
<li class="active" > Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></li>
...
CSS: leave it as is.

Related

Pagination formatting in reactjs

So i was looking into Pagination dependency in ReactJS. My code is working fine but the formatting of pagination is quite out of order. How can i improve my pagination outlook. It's currently showing as bullets
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={18}
totalItemsCount={this.state.totalBooks}
pageRangeDisplayed={3}
onChange={this.handlePageChange} />
It's showing in the browser as the attached image
From the docs of react-js-pagination:
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
So if you are using Bootstrap, it should just work.
If not the package provide some props to set classes to different elements, and then you should style them :
innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...
You have to acquire some notion about DOM scaffolding and CSS:
ul {
list-style: none;
padding: 0;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration:none;
color: #999;
}
ul li a:hover, ul li a.active {
color: #333;
}
<ul>
<li><a href="#" /><</a></li>
<li><a href="#" class="active"/>1</a></li>
<li><a href="#" />2</a></li>
<li><a href="#" />></a></li>
</ul>
So i found the Mobile Stepper of material-ui helpful in this case. I imported import MobileStepper from '#material-ui/core/MobileStepper';
I just had to make a simple updatePage(i) function that took +1 or -1 depending upon the next or previous page and corresponding any other function calls can be done in update page function. Hence easily pagination can be done and new information can be rendered accordingly. Although this is not the exact correct method, but it helped me with my functionality.
<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />

Pure CSS Checkbox button with no label (jQuery is a possible solution)

I'm trying to replace a checkbox and make it into a button. I've done this before, but for this site I'm using Easy Digital Downloads Front End Submissions. I've searched and searched, also gone through multiple posts here on the site.
I don't know how this was made, but I can't seem to wrap my head around it as the label seems to come before the class. It has this selectit class I've been trying to mess around with, but whatever I do I can't make a button.
When I try something like input[type=checkbox] + label it doesn't actually affect anything.
Other examples would be .selectit input[type=checkbox]:before This one works.
As well as .selectit input:checked:after
But again, I can't add anything with + label it seems.
Well I can make one that has a hover, but not one with a checked state and a color change for example.
I should note that I cannot change any HTML. The way the checkbox is built, I have to stick with, so I'm trying to make a pure CSS solution. But I can add jquery into the page
Here's the HTML for the checkboxes. I only really want the parent checkbox to be affected by the hover and checked state.
<ul class="fes-category-checklist">
<li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
<ul class="children">
<li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>
<li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>
<li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>
<li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
</ul>
</li>
</ul>
I hope someone has some answers
Thanks!
EDIT
I was advised to update my question, because I can insert jquery into the page. Although, this is not something I have much experience with myself.
Original, no javascript, crazy answer
Your problem is that you can't select a parent of an element, and so you can't say "if this box is checked, make its parent label change color." Sadly, the :has CSS selector isn't supported by anything, or that could save you.
However. If you're insane, and you hate it when things look nice, you can do some crazy stuff with outlines and margins. This is mucho janky but it sort of works. Kinda.
You can play around with it in this codepen: https://codepen.io/anon/pen/WPQJgw
Follow-up, non-crazy, uses jQuery answer
Okay your edit says you can use javascript or jQuery. Let's assume you already have jQuery loaded on the page, since that makes for short code.
Codepen here: https://codepen.io/tobyinternet/pen/daYqJq
I'll explain what's up here.
You can't change the HTML, but (with javascript) you CAN assign classes to elements. So first, we create classes that modify the existing elements.
Strip bullets off list items
Hide the actual checkboxes
Make the labels into block elements and give them colors and hover states
Create a style to indicate when a "button" is "checked"
Then we use javascript to first apply button styles on page load, then apply appropriate checked/unchecked style when an element is clicked.
The purpose of doing it this way is that if a user can't (or doesn't want to) use javascript, they just see checkboxes. Still totally usable, good for accessibility. If they do have javascript installed, then ta-da! Buttons.
$(document).ready(function(){
$('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');
$('.selectit').addClass('checkbutton');
$('.checkbutton').click(function(){
if( $(this).children('input:checkbox').is(':checked') ) {
$(this).addClass('ischecked');
} else {
$(this).removeClass('ischecked');
}
});
});
.nolist {
list-style: none;
}
.nolist li {
margin: 20px 0;
}
.checkbutton {
padding: 8px 20px;
text-align: center;
display: block;
width: 140px;
height: 30px;
line-height: 30px;
margin-right: -130px;
border: 1px solid black;
border-radius: 6px;
background-color: yellow;
transition: all .2s;
box-shadow: 0px 3px 8px rgba(50,50,50,.5);
}
.checkbutton:hover {
background-color: #CCCC00;
}
.checkbutton:active {
box-shadow: 0px 1px 2px rgba(50,50,50,.5);
}
.checkbutton input[type="checkbox"] {
position: absolute;
left: -99999px;
}
.ischecked {
background-color: blue;
color: white;
}
.ischecked:hover {
background-color: lightblue;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="fes-category-checklist">
<li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
<ul class="children">
<li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>
<li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>
<li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>
<li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
</ul>
</li>
</ul>

How to not apply a css block?

I am a backend developer, I don't know anything about css, so my question can seems pretty dumb to you ...
A client noticed that there is a text that rewrite another one
I found that it's because this "class" or "proprety" (I don't know how to call it ) is defined :
.timeline-list .item.has-image h2 {
padding: 0;
position: absolute;
top: 15px; left: 15px; right: 15px;
z-index: 10;
}
How can I apply every other propriety of the class timeline-list but not this one ? (timeline-list is called in another part of the code where it is important to have this)
This is where I call the css :
<ul class="list timeline-list">
<li ng-repeat="nextItem in nextItems" class="item animated bounce-in-out vitesse-4 {{nextItem.css}}">
<!-- <a href="#/content/poi/{{nextItem.id}}" nav-direction="forward"> -->
<h2> {{nextItem.subtitle}} </h2>
<div class="preview artBG">
<h3>{{nextItem.place}}</h3>
<h4>Dans {{nextItem.distanceFromPosition | number:2}} km</h4>
</div>
<!-- </a> -->
</li>
</ul>
Thanks and sorry for my dumb question ...
From the information you've given, I would say that the issue is with the position:absolute; property. If you change it to relative does this fix your problem?

CSS selected/active property

I have twelve <a href> links that lead to different categories. As a means of orientation for the user I would like to emphasise the very category (<a href>-button) that the user is in right now.
How can I achieve this in CSS? I read about selected and active, but I haven't been able to make it work yet.
This is one of the links/buttons:
<span class="category_item"></span><span class="category_description">Handy & Co.</span>
The corresponding CSS:
.category_item {
display:inline-block;
background:url(../img/category_item/ph.png) no-repeat;
width: 45px;
height: 45px;
margin-right: 11px;
margin-bottom: 20px;
}
.category_item:hover {
background:url(../img/category_item/hover.png);
}
.category_description {
position: absolute;
font-size: 11px;
color: #000;
margin-top: 43px;
margin-left: -62px;
z-index: 1;
opacity: 0;
}
Thank you in advance!
You can run some jquery code when you load the page that checks the link urls with the current page's url and setting a class on the links that match.
JSFiddle: http://jsfiddle.net/og4o1tdh/2/
something like this:
HTML:
<div id="categories">
<span class="category_description">Google</span>
<!-- jsfiddle code is apparently run on fiddle.jshell.net -->
<span class="category_description">JSFiddle</span>
</div>
JS:
$('#categories a').each(function (){
var link = $(this).attr('href');
if (window.location.href.indexOf(link) > -1) {
$(this).find('span').addClass('currentCategory');
}
});
CSS:
.currentCategory {
color: orange;
font-weight: bold;
}
To give a special class to an anchor when a user clicks you can use simple javascript and jQuery.
Give all the anchor's you want to be in the scope of this a class for instance:
HTML:
<a class="nav-link" href="http://www.google.com"> Google </a>
<a class="nav-link" href="http://www.yahoo.com"> Yahoo </a>
Javascript:
$(".nav-link").on("click", function() {
$(this).addClass("active");
});
To make sure you only have one anchor with "active" class I would do the following:
$(".nav-link").on("click", function() {
$(".nav-link").removeClass("active");
$(this).addClass("active")
});
There is no built-in way of knowing which link is the current one. The easiest way may be to use javascript to check the current URL by document.URL and add a CSS class to the link with an equal href attribute. Then, you may style this class in CSS.
CSS doesn't know what page you are on.
To do this you will have to change your HTML markup, for example: to add:
<a class="current-page" href="index.php?category=handy&location=&sort=" ...
on the relevant link which you can use to 'hook' an new CSS style onto:
.current-page { color: red; }
The alternative is to use Javascript to 'read' the URL and apply a style.
You could...
Simply add a unique classname to the body tag or (some element that wraps around the anchor tags). And then style your links accordingly. This option is quite easy if you have access to change the HTML in your pages:
HTML
<body class="category_handy">
...
<a href="..." class="category_handy">
<span class="category_item"></span>
<span class="category_description">Handy & Co.</span>
</a>
....
</body>
CSS
body.category_handy a.category_handy {
color:red;
}
body.category_dandy a.category_dandy {
color:yellow;
}
body.category_something a.category_something {
color: blue;
}
If you don't have access to directly edit each page, you may have to dynamically check the URL, and then add a classname (like "current") to the anchor tag who's href attribute matches.
Either way, the solution will not involve "css only".

AngularJS Tabular Navigation Selected Styling

I am creating a navigation structure. I tried to use AngularStrap and Bootstrap, but as soon as I injected them into my app, Angular failed. I found this link and constructed my navigation tab-bar. I like how easy it is to customize. My problem is, I don't know how to apply the css for the selected tab in angular. I can't apply an id to an element conditionally, and when I try and break up the css into multiple classes, the tabs don't display the same way.
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);">
{{tab.title}}
</li>
</ul>
vs.
<ul class="tablist">
<li id="selectedTab">Admin</li>
</ul>
What is the best way to apply the selected formatting? See this Fiddle for a more fleshed out example.
Updated: http://jsfiddle.net/dLemh/6/
to have background color change use css important on the class
ng-class="{selected: isSelected(tab)}"
$scope.currentSelectedTab = {};
$scope.setSelectedTab = function(tab){
$scope.currentSelectedTab = tab
}
$scope.isSelected = function(tab){
if(tab == $scope.currentSelectedTab){
return true;
}
return false;
}
Please let me know if anything
I found this SO Post that I was able to use and fix the CSS formatting with regards to their priority.
.tablist li.selectedTab a {
background: none;
border: 2px solid #6B74C6;
border-bottom: 0px;
background-color: #F3F3F3;
color: #0378D9;
text-decoration: none;
}
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
{{tab.title}}
</li>
</ul>

Resources