When a user clicks on "receiver list" button, the button text should change to "loading...". The buttons are in a For loop. I guess the id attribute method is not going to work. The logic is when a user clicks on "receiver list" button, the button will change to "loading..." and load the page it goes to.
#foreach($groups as $group)
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">store</i>
</div>
<a class="btn btn-info p-2" href="{{action('ReceiverController#index', $group)}}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
</div>
</div>
</div>
just use inline onclick event of javascript:
<a class="btn btn-info p-2" onclick="this.innerHTML='loading...'" href="{{ action('ReceiverController#index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
if you want button icon as well:
<a class="btn btn-info p-2" onclick="clickfunc(this)" href="{{ action('ReceiverController#index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
<script>
clickfunc = function(obj) {
obj.innerHTML = '<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i> loading...';
}
</script>
Assuming the p-2 class is unique to these buttons, this should work simple enough:
$(document).on('click', '.p-2', function(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
$(this).html(html);
});
If p-2 is not unique, then just add some other unique class name.
Or without jquery:
function load(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
this.innerHTML = html;
}
document.getElementsByClassName('.p-2').addEventListener("click", load);
Related
<script>
window.addEventListener("contextmenu",function(event){
event.preventDefault();
var contextElement = document.getElementById("context-menu");
contextElement.style.top = event.offsetY + "px";
contextElement.style.left = event.offsetX + "px";
contextElement.classList.add("active");
});
window.addEventListener("click",function(){
document.getElementById("context-menu").classList.remove("active");
});
</script>
<body>
<div id="context-menu">
<div class="item">
<i class="fa fa-cut"></i> Cut
</div>
<div class="item" onclick="document.execCommand('copy');">
<i class="fa fa-clone"></i> Copy
</div>
<div class="item">
<i class="fa fa-paste"></i> Paste
</div>
<div class="item">
<i class="fa fa-trash-o"></i> Delete
</div>
<hr>
<div class="item" onclick="window.location.reload();"> **the reload command is working nice**
<i class="fa fa-refresh"></i> Reload
</div>
<div class="item">
<i class="fa fa-times"></i> Exit
</div>
</div>
can you help me with I just want the right click menu copy button to work and function i just want the copy command to work when i click on the copy button in the oncontext menu please help
I am trying this sidebar of a dashboard and it looks like this
The top child or the one with the brighter green color on it has a class active_link which basically tells you that you are in this part of the dashboard. So the idea is that I want the class active link to be added to the certain element that I have clicked upon while the rest who are not clicked don't have (Meaning that if the element already have the active_link but it is not the one that I have clicked upon then the class will be removed however if it does not have the active_link class and it is the one I clicked it will be added to that certain element). However, I have a problem.I tried running this code:
$(function(){
$(".sidebar_link").click(function(){
$(".sidebar_link").each(function(index){
if($(this).data('clicked', true)){
if($(this).hasClass('active_link') == false){
$(this).addClass('active_link');
}
}else{
if($(this).hasClass('active_link')){
$(this).removeClass('active_link');
}
}
});
});
})
And this is what happened:
Which what I could tell is just a disaster, any tips? Thank you in advance! Here is the HTML
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>
You can simply use $(".sidebar_link").not($(this)).removeClass("active_link") to remove class from other sidebar which is not been clicked by user.
Demo Code :
$(".sidebar_link").click(function() {
$(".sidebar_link").not($(this)).removeClass("active_link")
$(this).toggleClass('active_link');
});
.active_link {
background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>
I want to change the colour of an Awesome Icon, and I created this piece of code, but instead of giving me the colour, I got an 'undefined'
<script type="text/javascript">
function changeAIColor(idName) {
alert ($('idAwesomeIcon').css("color"));
}
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You have missed the id selector # in your JQuery. Also use idName of the changeAIColor function in your selector. So, the query becomes ($('#'+idName).css("color"). Please note that you have used same id as idAwesomeIcon multiple times. id values should be used uniquely in HTML page.
function changeAIColor(idName) {
alert ($('#'+idName).css("color"));
}
changeAIColor('idAwesomeIcon');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You need $('#idAwesomeIcon').css("color")
Also <i d="idAwesomeIcon" isn't right. The ID should be different and should actually be id="".
<script type="text/javascript">
$('.AwesomeIcon').each(function(){
alert ($(this).css("color"));
});
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-on fa-lg AwesomeIcon" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-off fa-lg AwesomeIcon" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
Change your ID to class and change your JS accordingly.
I have the following problem: I want to give content to a tooltip dynamically by executing a function with a param. The key here is that the param has the information I need to change the tooltip content since this tooltip is in a ng-repeat directive.
My html is kinda this:
<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
...
<div class="module-column text-center">
<h5>REQUEST STATUS</h5>
<p>
<span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
<i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
</span>
</p>
</div>
...
</div>
This html view is has it's own directive called homePendingRequests.js. Then I insert the view in a Home.html page (that has it's controller).
Thanks!!
I just solved it. It works pretty sweet
html directive:
<div class="module-column text-center">
<h5>ESTADO</h5>
<p>
<div ng-mouseenter="tooltipHelper(request)">
<span data-toggle="tooltip" uib-tooltip="{{msg}}">
<i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
</span>
</div>
</p>
</div>
js directive:
$scope.tooltipHelper = function (request) {
$scope.msg = request.requestStatus.name;
if (request.validatorsForPendingStatus) {
$scope.msg += ' (' + request.validatorsForPendingStatus.validatorsList + ')';
}
};
use $copmile(`<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
...
<div class="module-column text-center">
<h5>REQUEST STATUS</h5>
<p>
<span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
<i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
</span>
</p>
</div>
...
</div>`)($scope)
When a button is playing the audio i want all of the other buttons to pause. Also i want the buttons to restart if they get pressed twice. Is there anyway of doing that without only using javascript?
<div id="sound" class="text-center">
<a onclick="this.firstChild.play()" class="btn b"><audio src="https://archive.org/download/LastChristmas_614/Wham-LastChristmas.mp3" id="audio1"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn c"><audio src="http://www.memory-of.com/uploads/backgroundmusics/bgmusic-75155-634263906597120000.mp3" id="audio6"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn d"><audio src="http://s3.amazonaws.com/puresolo-production/assets/1951/Santa_Baby.mp3" class="audio5"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn e"><audio src="http://a.tumblr.com/tumblr_lwcu7k22YT1r0mybjo1.mp3" id="audio4"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn a"><audio src="http://a.tumblr.com/tumblr_mehj3cVKqV1qm6fdbo1.mp3" id="audio3"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
<a onclick="this.firstChild.play()" class="btn f"><audio src="http://dopefile.pk/mp3embed-zqi2ez7kf6dh.mp3" id="audio2"></audio><i class="fa fa-file-audio-o" aria-hidden="true"></i></a>
https://codepen.io/evan17gr/pen/bBOaBy
Thank you!
Change your start of anchor tags like this assign click and dblclick handlers passing this reference
<a onclick="clkHandle(this)" ondblclick="dblclkHandle(this)"...........
These will handle the events
function clkHandle(t)
{
$(this).siblings().find('audio').each(function(){
this.pause();
}
t.firstChild.paused ? t.firstChild.play() : t.firstChild.pause();
}
function dblclkHandle(t)
{
t.firstChild.currentTime = 0;
}