iam a Django BackEnd Developer and i have created a Blog
i just want to know how to color slected Arrow after user Vote for specific Post and save it
this is Arrow Html:
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}"
<i class="fas fa-arrow-down"></i>
</a>
Just add an ID and an onclick function for the element you want to select with JS and after you selected it, change it's color:
function arrowClickUp() {
document.getElementById("arrowUp").style.color = "red";
}
function arrowClickDown() {
document.getElementById("arrowDown").style.color = "red";
}
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i onclick="arrowClickUp()" id="arrowUp" class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}">
<i onclick="arrowClickDown()" id="arrowDown" class="fas fa-arrow-down"></i>
</a>
Note: you should link the font library you using to you snippet, because you'll see nothing
Related
I'm trying to use Font Awsome in my web poject,
I've added the link:
<script src="https://use.fontawesome.com/bedf006dec.js"></script>
When I add font awesome directly to my HTML like this:
<div class="topbar">
<div class="topbar__elements container">
<div class="topbar__left">
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span> Middle East Airlines Ground Handling</span>
</a>
<a href="mailto:meag#meag.com.lb" target="_top" rel="noopener noreferrer">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span> meag#meag.com.lb</span>
</a>
<a href="tel:00961 1 622700">
<i class="fa fa-phone" aria-hidden="true"></i>
<span> +961 1 622700</span>
</a>
</div>
<div class="topbar__right">
Career
Contact Us
</div>
</div>
</div>
It works fine:
I'm also using tiny slider and I want to change the text of the previous and next buttons to have Font Awsome icons, I know that I can create custom buttons with tiny slider directly in the HTML code but I'm trying to use the default controls of tiny slider, therefore to try and change the text of these 2 buttons I'm using javascript:
const prevBtn = document.querySelector(".tns-controls").firstChild;
const nextBtn = document.querySelector(".tns-controls").lastChild;
prevBtn.innerHTML = "<i class='fa-solid fa-angle-left' aria-hidden='true'></i>";
nextBtn.innerHTML = '<i class="fa-solid fa-angle-right" aria-hidden="true"></i>';
But it doesn't work and give me this:
Even though when I open the developer tools it looks like as if it worked.
Hello I am trying to make changes to the below HTML code textContent however it includes a <i> tag in it so how can I change the textContent? How do I edit the HTML tag in the script to keep the <i> tag class but change only the text that is in it?
This is how the default HTML look like
This is what it looks like after I edited it
HTML Code
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 0 unread notifications
</a>
Script
var notificationUnread = document.getElementById('notificationUnread').textContent = "TEST"
You can target the last text node using lastChild or childNodes[lastIndex] and change its value using node.nodeValue="Something"
document.getElementById("notificationUnread").lastChild.nodeValue="Test"
or
let nodes=document.getElementById('notificationUnread').childNodes
nodes[nodes.length-1].nodeValue= "TES"
//let nodes=document.getElementById('notificationUnread').childNodes
//nodes[nodes.length-1].nodeValue= "TES"
//Without span
document.getElementById("notificationUnread").lastChild.nodeValue="Test Without span"
//With span
document.querySelector("#notificationUnread2 > .text-notification").innerText="Test with span"
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--without span -->
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-bell mr-2"></i> 0 unread notifications
</a>
<br>
<!--with span -->
<a id="notificationUnread2" class="dropdown-item">
<i class="fas fa-bell mr-2"></i>
<span class="text-notification">0 unread notifications</span>
</a>
If you want to change the html inside your a tag, use this:
var notificationUnread = document.getElementById('notificationUnread').innerHTML = "your html here";
otherwise you can change the text only with replacing innerHTML to innerText
How about wrapping the text you want to change in a <span>
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> <span class="link-text">0 unread notifications<span>
</a>
document.querySelector('#notificationUnread .link-text').innerText = "TEST"
I have attached the java Script file in body section of the page but its still not working.
Here is #javascript function that i want to call
function opentab(evt, tab) {
var i, content, links;
content = document.getElementsByClassName("main");
for(i = 0;i < content.length;i++){
content[i].display="none";
}
links=document.getElementsByClassName("linked");
for(i=0; i < links.length;i++){
links[i].className=links[i].className.replace("active", "");
}
window.document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
This is the #HTML code i want to call the above method onclick of <a> tag to show the specific div.
<div class="sidebar">
<img src="PNG%20WE%20Carry%20Fast-01.png" alt="Logo">
<a href="#" onclick='opentab(event, 'home')' class="linked" ><i class="fas fa-home" ></i>
Home </a>
<a href="#" onclick='opentab(event, 'routes')' class="linked" >
<i class="fas fa-route"></i> Routes</a>
<a href="#" onclick='opentab(event, 'vehicles')' class="linked" ><i class="fas fa-truck-moving"></i>
Vehicles</a>
</i> Qr Code
</i> Order Status
<a href="#" onclick='opentab(event, 'Report')' class="linked" ><i class="fas fa-chart-bar"></i>
Report</a>
</div>
<div id="home" class="main">
<h1>Hi welcome to your home page
</h1>
</div>
onclick='opentab(event, 'OrderStatus')' would not execute because of incorrectly nested quotes.
Try onclick="opentab(event, 'OrderStatus')"
so that the inside quotes '' are not in conflict with the outside double quotes ""
Also there is no display property associated with a division. What you are trying to achieve is to set the style property.
content[i].style.display = "none";
I am trying to add context menu but value is not populating.
<div class="m-l">
<a class="item-country text-orange" href="#/app/CountryIps/{{item.data['name']}}/cCode/{{item.data['country-code']}}" target="_blank">
{{item['data']['name']}}
</a>
<a class="item-ip" href="#/app/showIps/{{item.data['name']}}/ip/{{item.data['Ip']}}" target="_blank"><span context-menu="whiteList"> {{item.data['Ip']}}</span> </a>
{{item.data['type']}}
<a class="detail-icon" data-popup-open="popup-1" href="" ng-click="showModal(item)">
<i class="fa fa-info-circle"></i>
</a>
</div>
Javascript
$scope.whiteList = [
['Add to white list', function($itemScope, $event, ip) {
whiteList(ip);
}]
];
Now when I add context from template I got undefined in ip in controller.
<a onClick="window.location.href='your link'">
I fixed it by myself to checking values of the $itemscope.
$itemScope.$parent.item.data.Ip
To get the value of the IP from template to controllers.
I've got a problem.
I have this window confirm:
<td>
<span>
<a onClick="return confirm('Opravdu si přejete odebrat školu z oblíbených?');" href="{{ path('parent/school/remove', {'school_id': school.id}) }}">
<i class="fa fa-times-circle fa-2x"></i>
</a>
{{school.name}}
</span>
</td>
But whether i click on Ok, or on Cancel, it will still proc the link in the href attribute and redirect to this action.
Do it like this:
<a onclick="confirm('Leave?') || event.preventDefault()" href="http://en.wikipedia.org">Wikipedia</a>
http://jsfiddle.net/DerekL/5s47wujv/