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/
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.
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
I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.
On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:
<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>
This is the JS script that catches the clicked_id and shows in the alert box
function executeChildSupport(clicked_id) {
$(this).tooltip('hide');
event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
alert(clicked_id);
$('#supportShare').modal('show');
return false
}
Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script>
Any suggestions?
HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)
<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>
What about this direction?
LINK
If I've understood your query then you can follow two ways,
(all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)
not-recommended way is to use a global variable then using it in your link
example:
var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....
Then doing
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<script>document.write(current_id);</script>
</a>
Recommended Way is to access and change the value of the dom after alert
example:
......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....
or you can use a callback after the modal loads
......
alert(clicked_id);
$('#supportShare').modal('show', function(){
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....
Then changing a bit like:
<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE
<span id="clicked_id"></span>
</a>
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
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.