In my responsive website, I have these buttons that show on my mobile views. I am trying to make them navigate through my page.
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a href="#" onclick="history.go(-1); return false;" id="back-button">
<i class="fa fa-arrow-left"></i>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">
<i class="fa fa-refresh"></i>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#" onclick="history.go(1); return false;" id="forward-button">
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
What I want them to do is, obviously allow the user to go back and forward.
However, I would like to disable these buttons if:
Disable Back button if:
there is no previous page in a history
back url will leave my website
Disable Forward button if:
there is no next page in a history
This is what I have done so far. It's not much.
<script>
alert(document.referrer);
alert(window.location.hostname);
var str = window.location.hostname;
//if back page is own page
if (str.search(document.referrer) >= 0) {
history.go(-1);
}
else {
$('#back-button').prop('disabled', false);
}
</script>
To make back button work, you can use document.referrer:
function isBackAvailable()
{
if (document.referrer === "") return false;
if (document.referrer.substr(0, 16) !== "http://localhost") return false;
// it can be (!document.referrer.startsWith("http://domain.com")) in ES6
return true;
}
function goBack()
{
if (isBackAvailable()) {
history.go(-1);
}
}
$(document).ready(function() {
$("#back-button")
.prop('disabled', isBackAvailable())
.on('click', goBack);
});
What about forward button - there is no normal way to check if forward button is available. It is a "hardware" browser button and there is simply no such method in API. I guess, it is related to security somehow.
However, you can simply execute history.go(1);. It will do nothing if there is no such page.
Related
so ive got this code
<div class="col-lg-12 video-meta">
<div class="container">
<span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
<a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
</span>
and i target it with
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?
it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..
event.target is the <i> element, because that's the element on which the click really occured.
If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:
$('.like').on('click', function(event) {
event.preventDefault();
console.log(event.target); // <i>
var isLike = event.currentTarget.previousElementSibling == null;
console.log(isLike);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
<div class="container">
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
<a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
</span>
</div>
</div>
I am wanting to have the Resolve Ticket Button showing when the open item is an Incident. When I click Resolve Ticket, I want Cancel and Confirm buttons to show. However, when you click Cancel I need Resolve Ticket to show again. I can get Cancel/Confirm to show, but clicking Cancel does nothing. The HTML is below.
<div class="panel b" ng-if="c.data.isIncident == true">
<div class="panel-heading bg-primary">
<div class="panel-title">Is this no longer an issue?</div>
</div>
<div class="panel-body">
<div ng-if="!c.data.isDialogOpen">
<a class="btn btn-primary" ng click="c.openConfirmDialog()">Resolve Ticket</a>
</div>
<div ng-if="c.data.isDialogOpen">
<a class="btn btn-primary" ng-click="!c.openConfirmDialog()">Cancel</a>
<a class="btn btn-primary" ng-click="c.openConfirmDialog()">Confirm</a>
</div>
</div>
</div>
The AngularJS function is
function($location) {
/*widget conotroller */
var c = this;
c.data.isIncident = false
if ($location.search().table == 'incident'){
c.data.isIncident = true
}
c.openConfirmDialog = function(){
c.data.isDialogOpen = true;
}
}
Try this:
<a class="btn btn-primary" ng-click="c.data.isDialogOpen = false; c.data.isIncident = true">Cancel</a>
I'm not sure what you were trying to do with !c.openConfirmDialog() but this will definitely not undo what the function did when it was called before.
jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});
First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!
I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.
To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
I am sorting a list of users by first name when a user click on the sort icon. However, I've noticed that there are times when I click the sort icon, the icon is switched, however, the data not sorted. For example, I click on it 10 times, and there may be 3 times when the data simply not sorted but the icon changed. Any help here would be appreciated.
A partial section of the html code.
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc"></i></a></div>
The function to handle replacing the button and submit the form.
$('#sortName').on('click', function (e) {
e.preventDefault();
if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
var myVal = $('#searchVal').val();
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
});
Is the following line suppose to be the same in both the if block and the else block?
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
Try it like this
$('a#sortName').on('click', function (e) {
e.preventDefault();
// Setting the current clicked icon into a variable.
var findSortIcon = $(this).find('#sortIcon');
if (findSortIcon.hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
//$('form').submit(); - We are sending the submit anytime whenever the button is clicked
findSortIcon.removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
//var myVal = $('#searchVal').val(); - no need for this (You dont use it anyway)
// $('form').submit(); - same in here
findSortIcon.removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
// Whether its true or false submit it!
$('form').submit();
// Extra stuff to check changing directly
var attr = findSortIcon.attr("class");
$('#show-class').html(attr + " for " + $(this).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON
</i>
</a>
</div>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
First Name2
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON2
</i>
</a>
</div>
<div id="show-class"></div>
Try this code instead:
$('#sortName').on('click', function (e) {
e.preventDefault();
if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
$('#searchVal').val('asc');
} else {
$(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
$('#searchVal').val('desc');
}
$('form').submit();
});
I changed the code to see if the hidden field is null or not. Then, I made a decision based on that decision. The new JQuery code is below, and it's worked fine so far.
$('#sortName').on('click', function (e) {
e.preventDefault();
var testVal = $('#searchVal').val();
if (testVal === 'desc') {
$('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
$('#searchVal').val('asc');
} else {
$('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
$('#searchVal').val('desc');
}
$('form').submit();
});