I am totally new to the web development. Here I have this icon:
I am using Font Awesome, and there is no icon that matches that, so I am trying to make a icon using the following way:
<td>
<div style={positionOf}>
<i class="fa fa-envelope"></i>
<i class="fa fa-check-circle" aria-hidden="true"></i>
</div>
</td>
{
top: 0.3em;
position: absolute;
}
Here I am trying position : absolute to the second icon and relative to the first one.
So, but this is not working.
Can any one help me with this ?
Thanks.
To make sure your code is working you have to give some values to the icons. By giving some values to the icon they will be indented. Use the following Properties.
top : 14px;
left : 15px;
Try with
<div>
<span class="icon-outer">
<i class="fa fa-envelope"></i>
<i class="fa fa-check-circle" aria-hidden="true"></i>
</span>
</div>
.icon-outer{
position:relative;
}
.fa-envelope{
font-size:30px;
color:green;
}
.fa-check-circle{
position:absolute;
right:5px;
bottom:0px;
color:#fff;
}
https://jsfiddle.net/lalji1051/wzvaqspr/7/
You can do this consider the classes that Font Awesome provides (https://fontawesome.com/how-to-use/on-the-web/styling/)
.fa-check-circle,
.fa-envelope {
color: green;
}
.fa-circle {
color: #fff;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span>
<i class="fa fa-envelope" data-fa-transform="grow-15"></i>
<span class="fa-stack ">
<i class="fas fa-circle fa-stack-1x" data-fa-transform="left-20 down-18"></i>
<i class="far fa-check-circle fa-stack-1x" data-fa-transform="left-20 down-18"></i>
</span>
</span>
Related
All the elements with class em, needs to be shown once at the time on the basis of the rating.
I made the emoji contaneir as big as the icons, so with overflow hidden only one can be shown.
The problem is that when i try to modify the transform property, it doesn't work.
const starsEl = document.querySelectorAll(".fa-star");
const ratingcEl = document.querySelectorAll(".em");
console.log(ratingcEl)
starsEl.forEach((starsEl, index) => {
starsEl.addEventListener("click", () => {
console.log('click')
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starsEl, idx) => {
if (idx <= index) {
starsEl.classList.add("active");
} else {
starsEl.classList.remove("active");
}
});
ratingcEl.forEach((ratingcEl) => {
console.log(index)
ratingcEl.style.transform = `translateX(- ${ 50 * index}px)`;
});
}
.emoji-container {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
overflow: hidden;
}
.emoji-container i {
margin: 1px;
transform: translateX(-200px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
<div class="feedback-container">
<div class="emoji-container">
<i class="em fa-regular fa-face-angry fa-3x"></i>
<i class="em fa-regular fa-face-frown fa-3x"></i>
<i class="em fa-regular fa-face-meh fa-3x"></i>
<i class="em fa-regular fa-face-smile fa-3x"></i>
<i class="em fa-regular fa-face-laugh fa-3x"></i>
</div>
<div class="rating-container">
<i class="fa-solid fa-star fa-2x "></i>
<i class="fa-solid fa-star fa-2x "></i>
<i class="fa-solid fa-star fa-2x "></i>
<i class="fa-solid fa-star fa-2x "></i>
<i class="fa-solid fa-star fa-2x "></i>
</div>
</div>
<script src="emojii.js"></script>
</body>
I want the icons to translate left, in order to show the right face for the rating.
This can be greatly simplified. Removed all position/transform/display rules from CSS. They bring unnecessary complexity for such a simple task. Also added gold color for stars with active class and started with 5 active star.
const starsEl = document.querySelectorAll(".fa-star");
const emoji = document.getElementById("emoji");
const emojis = ["angry", "frown", "meh", "smile", "laugh"]; // just the changing parts
starsEl.forEach((starsEl, index) => {
starsEl.addEventListener("click", () => {
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starsEl, idx) => {
if (idx <= index) {
starsEl.classList.add("active");
} else {
starsEl.classList.remove("active");
}
});
emoji.classList = ["em fa-regular fa-face-" + emojis[index] + " fa-3x"];
}
#rating-container > .active {
color: gold;
}
#emoji-container {
text-align: center;
margin-top: 2rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
<div id="feedback-container">
<div id="rating-container">
<i class="fa-solid fa-star fa-2x active"></i>
<i class="fa-solid fa-star fa-2x active"></i>
<i class="fa-solid fa-star fa-2x active"></i>
<i class="fa-solid fa-star fa-2x active"></i>
<i class="fa-solid fa-star fa-2x active"></i>
</div>
<div id="emoji-container">
<i id="emoji" class="em fa-regular fa-face-laugh fa-3x"></i>
</div>
</div>
<script src="emojii.js"></script>
</body>
I have this code but I can't insert the icon in the middle of the button?
Please see here: http://jsfiddle.net/fsbqv3z4/
<input type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title=" Pesquisar"/>
you can use button tag instead of input because in that way, you can use any text ,image or anything inside it like in following code.
<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title=" Pesquisar"><i class="fa fa-times fa-lg"></i></button>
But if you are going to use input then image tag i will not come inside that button.
<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title=" Pesquisar"> <i class="fa fa-times fa-lg"></i></button>
Can you try this? I hope it help you)
Why not simply change the <input> to an <a> tag, and change formaction to href? Seem to be the rational solution here. The anchor need to have added the .btn class :
<a id="google-search" name="btnI" href="https://www.google.com/search?q=adprizes%2B+" class="btn searchButton2" data-toggle="tooltip" data-placement="top" title=" Pesquisar">
<i class="fa fa-times fa-lg"></i>
</a>
http://jsfiddle.net/afuhvp1g/
Note: The link will never work form within jsfiddles iframe due to sameorigin.
You can use flex-box to position items
For eg : if you want to position anything inside a button in the middle you can use the below css
.searchButton2{
display:flex;
align-items:center;
justify-content:center;
max-width: 130px;
width: 50px;
height: 45px;
border: 3px solid red;
background: #28b9ed;
text-align: center;
color: #fff;
cursor: pointer;
font-size: 14px;
outline: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title=" Pesquisar">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
Explanation: I'm trying to make an accepted-answer system and there are three cases:
marking a new answer as accepted one (there is no accepted answer already)
undo a accepted answer
switching from one answer to another one
Here is my code:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
if( this.attr('color') == '#44b449' ){ // undo
this.css({"color":"#aaa"}); // set gry color to marked icon
} else { // switchin or marking a new one
$('.fa-check').css({"color":"#aaa"}); // set gray color to all icons
this.css({"color":"#44b449"}); // set green color to marked icon
}
});
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
But as you see my code doesn't work. How can I fix it?
Note: The whole of my question is about coloring.
Firstly your code is throwing errors as you're calling jQuery methods on this when it refers to a DOMElement, not a jQuery object.
To fix your issues you can simplify your logic by using classes instead of applying inline CSS styling. This allows you to simply toggle the class on click of the .fa-check element. Try this:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
$('.fa-check').not(this).removeClass('checked');
$(this).toggleClass('checked');
});
.fa-check {
color: #aaa;
cursor: pointer;
}
.fa-check.checked {
color: #44b449;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
Use this method
function click_div(div) {
$("#main_div div .fa-check").css("color"," #aaa");
$("#"+div+" .fa-check").css("color"," #44b449");
}
#div_1,#div_2,#div_3
{
width:100%;
height:100px;
}
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<html>
<head>
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="main_div">
<div id="div1" onclick="click_div('div1')">
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<hr>
<div id="div2" onclick="click_div('div2')">
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
</div>
<hr>
<div id="div3" onclick="click_div('div3')">
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</html>
I am trying to figure out how to vertically stack two buttons (up and down) next to the input they influence. I want to do this with CSS and HTML.
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
As you can see I am using Font Awesome for the up and down chevrons. I am unsure as how to get the two buttons to stack. Once I do I will tie in the JS to control the text input value (already written).
An example of what I am working with can be found here: http://codepen.io/anon/pen/WvydgZ
I have plugged in jQuery, jQuery UI, and FontAwesome.
The desired affect is this:
Any ideas?
I think you should use a grid system if you can to accomplish tasks like this for you. In addition, try not to use <span> unless you want simple inline content. I did some tweaking trying to stay to your original as much as possible...
.row div{
float: left;
}
.input-row{
line-height: 30px;
height: 30px;
}
input{
height: 30px;
}
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.buttons{
width: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-row">
<div class="styled-value">
<div class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
Try using a list as a wrapper for the buttons. An example building off of yours:
HTML
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size"/>
</span>
</span>
<ol class="no-style-list">
<li>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
</li>
<li>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</li>
</ol>
CSS
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.no-style-list {
list-style-type: none;
padding-left:0;
display: inline-block;
}
http://codepen.io/anon/pen/KpeZOe
One option is place the input and buttons in a table. The buttons should have display:block. Like so
<table class='content'>
<tr>
<td>
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
</td>
<td>
<div class='button-wrapper'>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</td>
</tr>
</table>
demo
I am displaying a loop of items from a list in controller using ng-repeat directive. They are just the regular todo items with a minimize button. So, what I am doing to minimize the items is by setting up ng-hide to true on click of minimize button for those particular elements. Code is as below.
<div ng-repeat="note in notesList">
<div class="col-md-3 single-note" style="margin:5px" ng-hide="note.minimize">
<div class="note-title" style="margin-left: 30px">
<i class="fa fa-2x fa-paperclip" style="position:absolute; left:5px; top:5px"></i>
<b ng-bind="note.title"></b>
</div>
<div class="description" style="margin-left: 30px; text-align: justify" ng-bind="note.description"></div>
<div class="note-footer" style="margin-left: 30px; margin-bottom: 2px">
<span>
<img ng-src="{{ note.priority == 'imp' && 'img/imp.png' || ( note.priority == 'trivial' && 'img/trivial.png' || 'img/critical.png' )}}" /><!--<i class="fa fa-2x fa-dot-circle-o"></i>--></span>
<div class="pull-right">
<button class="btn btn-sm btn-default minimize" style="border-radius: 100%" ng-click="note.minimize=true"><i class="fa fa-minus"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" data-toggle='modal' data-target='#editNoteModal' ng-click="editNote(note.id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" ng-click="removeNote(note.id)"><i class="fa fa-trash-o"></i></button>
</div>
</span>
</div>
</div>
</div>
Here is how it looks like
I have shown the list in right panel using another ng-repeat where I am just showing titles of notes and a button to maximize if they are hidden (constraint is I cannot have both left and right panels in single ng-repeat). Now the problem is whenever I click minimize button, that particular item hides, But I am now unable to display it again using maximize button in right panel.
I tried creating a function in controller for ng-click of minimize button which will return true if current state of item is 'not hidden' and I have passed a variable to the same function via ng-click of maximize button setting it up as false for ng-hide. But it's not working.
I am fed up now. If you guys got the purpose, please help me achieving the same. :(
Edit: Here is right panel code
<!--Right Panel (TAKEN FIRST AND PULLED TO RIGHT IN ORDER TO MAINTAIN UPPER POSITOIN IN MOBILE RESPONSIVENESS)-->
<div class="col-md-3 right-panel pull-right">
<div id="critical-notes-bunch">
<br/>
<div class="alert alert-danger"><i class="fa fa-dot-circle-o"></i> Critical Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-warning"><i class="fa fa-dot-circle-o"></i> Important Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-success"><i class="fa fa-dot-circle-o"></i> Trivial Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
</div>
<!--/Right Panel-->
In your right panel you interator is called miniNode, but in ng-click you reference mininode.minimize.
Changing either miniNode to mininode or vice versa should fix your problem.
In the ng-repeat that you use for rendering the right hand list; can you not simply do
<div ng-repeat="note in notesList">
<span ng-click="note.minimize = false">Maximize</span>
...
</div>