I want to remove time + icon shown in my blog page
<span><i class="fa fa-newspaper-o"></i>47 sec read</span>
I have tried using
.fa-newspaper-o{display:hidden}
but it only hides the icon before "47 sec" leaves the text displayed
Whole code
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o"></i>47 sec read</span></li>
</ul>
.list-inline li:nth-child(4) { display: none;} or .list-inline li:last-child { display: none;} will hide the list item in question.
To add to the above, you can use visibility: hidden if you want the removed element to still leave a footprint (take up space).
var li=document.getElementsByTagName('li');
li[li.length-1].style.visibility='hidden';
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o">47 sec read</i></span></li>
</ul>
Related
I'm trying to change the active class of menu when I click on 'a' tag using jquery. I've searched a lot but none of them worked for me. when I click on a tag it redirects to 'href' attribute of the a tag and doesn't change the active menu.when I use 'e.preventDefult' it doesn't go to the 'href' but the active menu changes as I want.
What should I do?
This is the jquery I used:
<script>
$(document).ready(function(e) {
$('.navigation-menu-body ul li a').click(function (e) {
$('.navigation-menu-body ul li a.active').removeClass('active');
$(this).addClass('active');
$('.navigation-menu-body ul.navigation-active').removeClass('navigation-active');
$(this).parent().parent().addClass('navigation-active');
$('.navigation-icon-menu ul li.navigation-active').removeClass('active');
$('.navigation-icon-menu ul li').addClass('active');
window.location.href = $(this).attr('href');
console.log("href:", $(this).attr('href'));
e.preventDefault();
});
})
This is the html:
<div class="navigation">
<div class="navigation-icon-menu">
<ul>
<li data-toggle="tooltip" title="داشبورد">
<a href="#navigationDashboards" title="داشبوردها">
<i class="icon ti-pie-chart"></i>
</a>
</li>
<li data-toggle="tooltip" title="جشنواره های من">
<a href="#festivals" title="جشنواره های من">
<i class="icon ti-package"></i>
</a>
</li>
<li data-toggle="tooltip" title="کدهای جشنواره">
<a href="#serialNumbers" title="کدهای جشنواره">
<i class="icon ti-layers"></i>
</a>
</li>
<li data-toggle="tooltip" title="سوابق خرید">
<a href="#invoices" title="سوابق خرید">
<i class="icon ti-agenda"></i>
</a>
</li>
</ul>
</div>
<div class="navigation-menu-body">
<ul id="navigationDashboards" class="navigation-active">
<li class="navigation-divider">داشبورد</li>
<li>
<a class="active" href="/dashboard/index">فروش و مدیریت مشتری</a>
</li>
</ul>
<ul id="festivals">
<li class="navigation-divider">جشنواره ها</li>
<li>
جشنواره های من
</li>
</ul>
<ul id="serialNumbers">
<li class="navigation-divider">کدهای جشنواره</li>
<li>ثبت کد جدید </li>
<li>امتیازات من در هر اپلیکیشن </li>
</ul>
<ul id="invoices">
<li class="navigation-divider">سوابق خرید</li>
<li>خریدهای من </li>
</ul>
</div>
</div>
When clicking on an anchor tag, you goes to a different page, so in order for you to add an active class check the URL against the hrefs on document.ready and then add the class if the argument matches.
$document.ready(function() {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('.navigation-menu-body ul li a').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('active');
}
});
});
I don't know much about jQuery but you can do it pretty easy in vanilla js.
First you specify an id for each li you got. then you need to check url so you can add active class for li tag of url you're currently in.for example:
<ul onload="checkUrl()">
<li id="tab1" data-toggle="tooltip" title="داشبورد">
<a href="#navigationDashboards" title="داشبوردها">
<i class="icon ti-pie-chart"></i>
</a>
</li>
<li id="tab2" data-toggle="tooltip" title="جشنواره های من">
<a href="#festivals" title="جشنواره های من">
<i class="icon ti-package"></i>
</a>
</li>
<li id="tab3" data-toggle="tooltip" title="کدهای جشنواره">
<a href="#serialNumbers" title="کدهای جشنواره">
<i class="icon ti-layers"></i>
</a>
</li>
<li id="tab4" data-toggle="tooltip" title="سوابق خرید">
<a id="tab4" href="#invoices" title="سوابق خرید">
<i class="icon ti-agenda"></i>
</a>
</li>
</ul>
then the js:
function checkUrl() {
if (document.location.href === "https://example.com/url-of-first-tab") {
document.getElementById("tab1").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-second-tab") {
document.getElementById("tab2").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-third-tab") {
document.getElementById("tab3").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-forth-tab") {
document.getElementById("tab4").classList.add("active");
}
}
Also keep it in mind that none of your a tags shoud have active class in html!
The Code:
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
I want to target the SECOND span tag in the list with class: site-nav__label using pure CSS.(nth-child, second-of-type etc.)
I cannot add ids or classes to this span tag.
Help will be greatly appreciated.
For select the second li try with
#SiteNav li:nth-of-type(2)
and then for select the span of second li add span after:
#SiteNav li:nth-of-type(2) span
Because you want inside ul tag, I used ul.site-nav for ul tag with class site-nav
ul.site-nav li:nth-of-type(2) a > span {
border: 3px solid red;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
To Target the span use a combination of nth-of-type and child combinators
#SiteNav > li:nth-of-type(2) > a > span {
font-weight:bold;
color:red;
}
/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
font-style:italic;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<!-- Fixed Missing closing " -->
<a href="/" class="site-nav__link">
<span class="site-nav__label">HOME</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
For a good article on nth-child (and nth-of-type) see https://css-tricks.com/useful-nth-child-recipies/
I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.
<li class="multilink"><a data-toggle="modal" data-target="#.."><span class="glyphicon glyphicon-plus "></span></a></span> Collections</li>
Edit: the whole menu item
<li class="dropdown">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right" >
<li>
<a data-toggle="modal" data-target="#SectionRosterModal">Roster
</a>
</li>
<!-- Announcments -->
<li class="multilink">
<a data-toggle="modal" data-target="#AnnouncementAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Announcements
</a>
</li>
{# <li>Edit Announcements</li> #}
<!-- Courses -->
<li class="multilink">
<a data-toggle="modal" data-target="#CourseAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Course
</a>
</li>
<!-- Sections -->
<li class="multilink">
<a data-toggle="modal" data-target="#SectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Sections
</a>
</li>
<!-- Scollections -->
<li class="multilink">
<a data-toggle="modal" data-target="#ScollectionAddModal">
<span class="glyphicon glyphicon-plus glyphhover pointerhover">
</span>
</a>
<a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}>
<span class="glyphicon glyphicon-edit glyphhover">
</span> Scollections
</a>
</li>
</ul>
</li>
CSS:
.dropdown-menu > li > a:hover {
background-image: none;
}
.open> ul>li.multilink{
display: inline-flex !important;
}
The item looks like this:
What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the background-image, but there's still an associated color change.
So I put the code you provided into a JSFiddle. With just Bootstrap CSS the two glypicons are right next to each other. Can you provide more of you html and css because something else is causing the styling you do not want.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<ul>
<li class="multilink">
<a data-toggle="modal" data-target="#..">
<span class="glyphicon glyphicon-plus "></span>
</a>
<a href ="">
<span class="glyphicon glyphicon-edit"></span> Collections
</a>
</li>
</ul>
I will edit my answer when you provide more html and css
** EDIT **
In bootstrap's css file they have this:
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
That css is causing there to be 20px of padding between your two links. Adjust the padding to get the appearance you are looking for.
.dropdown-menu>li>a {
padding: 3px 5px;
}
Here is my HTML code
.wrapper.mini-menu .sidebar-nav li > span{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
I want to hide hide item1, hide item2 and hide item3. But I don't want to hide show items. If I don't use > selector it hides all span elements. How to select only those item by CSS > selector?
What your current CSS selector is saying is:
Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li elements do this instead:
.wrapper.mini-menu .sidebar-nav > li > a > span {
display: none;
}
Look:
.wrapper.mini-menu .sidebar-nav > li > a{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
You select a span standing right after the .fa-user-plus icon with the + selector , but not so sure this what you look for ?
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
span {
display:none;
}
.fa.fa-user-plus + span{
display: inline-block;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
Basically what happens is when I load my page and then drop down either my outer collapsible menu (the .admin) or the nested collapsible menu (.unitsofstudy), it does not update the glyphicon I have set using the :after selector unless I toggle it twice.
Would anyone be able to take a look and see if they can spot where I have screwed this up; I have been at this for a few hours now trying to fix but with no success. If any more info is needed let me know.
HTML:
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu" id="navmenu-sidebar">
<!-- Admin dropdown -->
<li>
<a class="admin" data-toggle="collapse" href="#admin"><i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin</a>
<ul id="admin" class="nav collapse">
<li>
<a class="unitsofstudy" data-toggle="collapse" href="#unitsofstudy"> <i class="fa fa-book" style="margin-right: 12px;"></i>Units of Study</a>
<ul id="unitsofstudy" class="nav collapse">
<li>
<i class="fa fa-book" style="margin-right: 8px;"></i> View Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Create Unit Offerings
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Units
</li>
<li>
<i class="fa fa-plus" style="margin-right: 10px;"></i> Register Semesters
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
My CSS:
.admin:after, .unitsofstudy:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.admin.collapsed:after, .unitsofstudy.collapsed:after {
content: "\e080";
}
You need to give your anchors an initial class of .collapsed
<li>
<a class="admin collapsed" data-toggle="collapse" href="#admin">
<i class="fa fa-tasks" style="margin-right: 16px;"></i>Admin
</a>
</li>
So class both admin and unitsofstudy to let bootstrap know the initial state of the menu is collapsed
Working example
http://codepen.io/jcoulterdesign/pen/6443069430f54e0b635e726c2cb9da02