We Keep Coding

FontAwesome 5 - SVG&JS - pseudo elements [duplicate]

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).

If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.

As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>

If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"

mark.js trigger event from selection

I can't seem to figure out how to use mark.js (or some other tools) that would allow me to trigger the animated highlighting when a button is selected in a table of contents.
e.g. Imagine on the left side of the page is a list of questions. When the user selects one of these questions/clicks on a question, the corresponding answer gets highlighted on the right side, somehow. It could be that the right side of the page goes dark except for the corresponding text or a red frame animates around the corresponding text, or is highlighted...any ideas?
In other words, the highlighting is triggered based off of a click or tap, and not a search result.

You don't need mark.js as it's much more easier:
$(function() {
$("[data-question]").on("click", function() {
var number = $(this).attr("data-question");
$("[data-answer]").removeClass("highlight");
$("[data-answer='" + number + "']").addClass("highlight");
});
});
.questions,
.answers {
float: left;
width: 50%;
}
.highlight {
background: red;
}
<div class="questions">
<ul>
<li data-question="1">Question 1</li>
<li data-question="2">Question 2</li>
<li data-question="3">Question 3</li>
</ul>
</div>
<div class="answers">
<ul>
<li data-answer="1">Answer 1</li>
<li data-answer="2">Answer 2</li>
<li data-answer="3">Answer 3</li>
</ul>
</div>

Align two items between image and ruler

I have a logo which is displaying properly and I want to have the Google Translate drop down display right below it then beside it with 20 pixels of space have my menu on the same line. Then below these two items display a horizontal divider. The main text shall display below the divider.
However, I am having trouble getting the Google Translate to display under the logo and the menu display next to it with some space between them:
The horizontal line is showing above these two items instead of below
them.
Could not get the space between Google Translate and menu
The Google Translate is overwritten the main text
I have created a fiddle to show the issue.
The main problem is with these two CSS item I believe but I have tried many variations and just couldn't get it to align properly.
/* PROBLEM IN THE FOLLOWING TWO CSS */
#google-translate {
left:10px;
position:relative;
top:0px;
float:left;
}
#header_right {
position:relative;
display:inline;
padding-left:20px;
}
Your assistance is greatly appreciated. Thank you.
EDITED:
Expected outcome would look like:
LOGO
Google Translate + 20px + Menu
Horizontal line
Main Text
Google Translate and the menu should sit on top of the horizontal line.

Here is the link of js fiddle , look into it
<div id="header_holder">
Logo
<div id="header_right">
<div id="google-translate">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
<div id="left20">
<ul class="dropdown dropdown-horizontal">
<li><span class="dir">Menu A</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li><span class="dir">Menu B</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Menu C</li>
<li>Menu D</li>
</ul>
</div>
</div>
<div id="rule">
</div>
<div>
MAIN BODY TEXT 1
<BR /> MAIN BODY TEXT 2
<BR /> MAIN BODY TEXT 3
<BR /> MAIN BODY TEXT 4
<BR /> MAIN BODY TEXT 5
<BR /> MAIN BODY TEXT 6
<BR />
</div>
</div>
https://jsfiddle.net/eacnn958/
Check the above link
Do this change only in css
#rule {
border-top: 1px solid #000000;
margin-top:25px;
}
ul.dropdown {
font-weight: normal;
font-family: arial, verdana, sans-serif;
font-size: 12px;
padding-left:20px;
}
here is the https://jsfiddle.net/cfhu1hvy/ check i have made change only in css

Managed to make it work by:
Remove the position:relative; on #google-translate
Change the display to "inline-block" instead of "inline" on #header_right
Add "margin-top:15px;" to #rule

Flexnav Menu Buttons using only the width of their content

I would like to know, if it is possible to use flexnav without it's fixed width buttons.
It would be great if all nav - items only use the width they need to display their text + their padding. At the Moment I've to divide 100% with the number of nav items we have. This value is set with .flexnav li{}
<div id="wrapper">
<h1>Flexnav - Content Width Test</h1>
<div class="menu-button">Show Menu</div>
<div class="nav-container container">
<div class="nav">
<ul class="flexnav" data-breakpoint="800">
<li>Startpage</li>
<li>About Us
<li>Products
<ul>
<li>Product Category 1</li>
<li>Products</li>
<li>Large Product Category</li>
<li>Small one</li>
<li>PPPPProducts</li>
</ul>
</li>
<li>Media</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<p>The red space is needed for a search and some Icons</p>
</div>
I've made a codepen, so that you can see the working nav. I hope someone hopefully could give me a hint how to solve this problem:
http://codepen.io/anon/pen/aCjGq
Thanks!

'At the Moment I've to divide 100% with the number of nav items we have.'- no need to do that. Just give the container div of the menu a width and use the flexnav plugin in the following way :
$(".flexnav").flexNav({
'calcItemWidths': true , // dynamically calcs top level nav item widths
});

The question is old, but this might help someone. You can add this to the CSS:
.flexnav > li {
width: auto;
}
.flexnav > li.has-subitems {
padding-right: 30px;/*to account for the menu dropdown icon*/
}
.flexnav li ul{
padding-left: 0 !important;
min-width: 210px;/*or whatever you want*/
}

Display Items in a news sticker

I am trying to accomplish some different thing which is something similar to the feature of news ticker. Before I ask this I tried to get it work using different different news ticker jquery plugins. But still no Luck.
This is markup I am using and let me to explain my requirement through it.
<div class="container">
<ul class="feeds" id="feeds">
<li class="category">category 01</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
<li class="category">category 02</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
</ul>
</div>
I need to display these list item like a news stick in a horizontal bar. How I need to display it is one category item with following two subcategory items in a row. If particular category have more than two subcategory then I need to display next two subcategory items and like wise. When displaying subcategory secondly the main category name should be still display in the row.
Finally I tried with Jquery Advance News Ticker plugin. It was close but not 100%
$('#feeds').newsTicker({
row_height: 40,
max_rows: 1,
duration: 3000,
pauseOnHover: 0
});
So anybody can tell me how to accomplish this with javascript or can I know is there any jquery pluging to do this.
UPDATE : CSS -
> .container {
background: #1e1e1e;
height: 40px;
.feeds {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: table;
> li {
display: inline-block;
color: #FFFFFF;
display: inline-block;
padding-right: 50px;
//display: table-cell;
vertical-align: middle;
padding-top: 5px;
}
> li.category {
background: #a11041;
margin: 7px 30px 0;
padding: 3px 10px;
}
}
}
Hope somebody will help me out regarding this.
Any idea would be greatly appreciated.
Thank you.

I can't find an existing solution for what you want, but if you are planning on writing your own solution this may help.
It uses a somewhat different HTML structure, but I think this is what you're trying to achieve.
HTML:
<div id="feed">
<ul>
<li>
Category 1
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
<li>Subcategory 4</li>
<li>Subcategory 5</li>
<li>Subcategory 6</li>
<li>Subcategory 7</li>
<li>Subcategory 8</li>
</ul>
</li>
</ul>
</div>
With CSS you make sure that the viewport (#feed) only shows one category name and two subcategories. Then, with JavaScript, you allow the user to go to the next two subcategories by changing the top or margin-top of the sub-ul-element. If the user reached the bottom of subcategories, it goes to the next category. If the user reached the last category, it goes to the first category again.
Working example: http://jsfiddle.net/Ln73X/1/

I never get why people like to use plugins so much, it just uses a lot of space (size vise)!
anyways I had to do this a while ago, I didn't use a plugin, just pure css and jQuery. this example provides an always animating news sticker. if you want an example like the one you provided you can easily implement it, or if it is too difficult for you let me know and I'll provide you one.
first you have to set the overflow of the container to hidden in css and then put the ul inside another div (let's call it #box).
and as for your jQuery:
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
setInterval(function(){
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
},5020);
the marginTop in the animation should be the negative of the height of your li. (in this example it is -110px)
here is the demo:
http://codepen.io/anon/pen/ClzLy