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;
}
Related
I am working on a CRM system where I can only write javascript in onloadfunc. My intenton is get data-filename from newly added li tag to the DOM and send notifications. Please note that my targetNode is inside an IFRAME. I have many other upload fields besides this upload field. My code is working with no Iframe but it is not working in this situation.
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {childList: true, subtree: true };
var ActiveDraftsCallback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
}
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
<iframe name="win_lst" id="win_lst" src="fp_list.jsp?fieldid=1267609&codedid=QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~&uptype=0" frameborder="0">
<html lang="en">
<head>
<body style="background:#FFFFFF">
<div id="uploaded-filelist" class="uploaded-filelist">
<form action="fp_list.jsp" method="POST">
<input type="hidden" name="ss_formtoken" id="ss_formtoken" value="60B19CD9C086ED81DC1FC23B65D6E9942F94BEEEA96F60CAA533B8705E6D013A">
<input type="hidden" name="fieldid" value="1267609">
<input type="hidden" name="codedid" value="QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~">
<input type="hidden" name="uptype" value="0">
<input type="hidden" name="isanno" value="0">
<input type="hidden" name="delefile" id="delefile" value="">
<div id="updatedresult" style="display:none">
<div id="cf_1267609" style="display:inline-block"><button type="button" class="Button" name="iconbutton" aria-label="Upload" title="" onclick="x_uploadfolder(1267609,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~','File Manager')" data-original-title="Upload"><i class="fa fa-upload" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" class="Button" name="iconbutton" title="" aria-label="Merge Files" onclick="x_mergefile(1267609,-1,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~')" data-original-title="Merge Files"><i class="fa fa-clone" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<i class="fa fa-history fa-lg text-help Pointer" onclick="openinmwin('/s_cusfieldhistory.jsp?ismwin=1&appid=102946&objectid=1127956&fieldid=1267609');" id="his_1267609" title="" aria-label="History" data-original-title="History"></i>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
<div class="ssUploadedFileList-footer"><span class="total">Total Files: 2</span></div>
</div>
</div>
<div id="updatedpdfresult" style="display:none"></div>
<div id="cf_1267609_container">
<div id="cf_1267609" style="display:inline-block"><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li> </ul>
</div>
</div>
</form>
</div>
</body></html>
</iframe>
Since you just watch the childList you don't need to filter mutations by type, because they are all going to be of type childList.
So just forEach through mutations and console.log the every first addedNodes
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {
childList: true,
subtree: true
};
var ActiveDraftsCallback = function(mutations, observer) {
mutations.forEach(({
addedNodes
}) => {
const li = addedNodes[0];
if (li && li.nodeName == 'LI') {
console.log(li.getAttribute("data-filename"));
}
});
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
// imitate adding a li in 2secs
const li = document.createElement("li");
li.setAttribute("data-filename", "test");
setTimeout(() => {document.getElementById("filelist_cf_1267610").appendChild(li)}, 2000);
<ul id="filelist_cf_1267610" class="listView">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span>
<i
class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title=""
title=""></i></span><span> </span></li>
<li data-filename="asif.pdf" data-size="74" data-date="1544642199018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267610" id="uploadedFileSet1267610-0" data-fieldid="1267610" data-fileicon="fa fa-file-pdf-o" value="asif.pdf"><span> </span><label for="uploadedFileSet1267610-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267610_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267610_1">asif.pdf</span><span>74 KB - 2018-12-12 2:16pm</span></span>
<span
id="renamespan_1127956_1267610_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267610_1" value="asif.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>74 KB - 2018-12-12 2:16pm</span></span><span class="ssUploadedFileList-size">74 KB</span><span class="ssUploadedFileList-date">2018-12-12 2:16pm</span>
<div id="options_1127956_1267610_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul style="display: none;">
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267610,1127956,80,'asif.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267610_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267610,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267610,1127956,80,1,'asif.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
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);
I want to add the class .my-class to body if tha class .views-exposed-form is present in #navbar-collapse-second
The code below does not work. How to correct ?
(function ($) {
$('#navbar-collapse-second').hasClass('views-exposed-form' {
$('body').addClass('my-class');
});
})(window.jQuery);
enter image description here
UPDATE
I applied the response of explv.
The class is removed in #navbar-collapse-second when .views-exposed-form is available.
But impossible to apply the same rule in #navbar-collapse-first when .views-manage-menu is available.
An idea ?
(function ($) {
if ($("#navbar-collapse-first .views-manage-menu").length) {
$(".icon-navbar-first-alert").removeClass("icon-navbar-first-alert-disable");
};
if ($("#navbar-collapse-second .views-exposed-form").length) {
$(".icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
};
})(window.jQuery);
First menu :
<a class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">
<div class="icon-navbar-first">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars" data-fa-transform="shrink-8"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-first-alert icon-navbar-first-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
Second menu :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar-second">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-second-alert icon-navbar-second-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
enter image description here
enter image description here
The code that you have posted won't even run, the syntax is invalid, and hasClass(className) only accepts one parameter, so not entirely sure what you are trying to do there.
hasClass(className) returns true if the element you call it on has that class, it will not return true if a child element has the class, which I believe is what you are trying to do here.
Assuming your HTML has this rough structure:
<body>
<div id = "navbar-collapse-second">
<div class = "views-exposed-form">
</div>
</div>
</body>
The following code should work:
if ($("#navbar-collapse-second .views-exposed-form").length) {
$("body").addClass("my-class");
}
Explanation:
$("#navbar-collapse-second .views-exposed-form") will select an element with class views-exposed-form that is a child of the element with id navbar-collapse-second
If an element was found (.length is > 0), then we add the class to the body element:
$("body").addClass("my-class");
There is no condition in your code. Try the following:
if($('#navbar-collapse-second').hasClass('views-exposed-form')){
$('body').addClass('my-class');
}
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 used captcha in my register user page with that i used icons of refresh, headphones, help but captcha, text box everything is displaying on browser and working fine also even refresh, headphones, help icons are also working well but problem is that istead of showing refresh, or headphone, or help icon in browser only a squre is showing, plz give me any idea how i can show this?
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
<div id="recaptcha_widget" class="form-recaptcha">
<div class="form-recaptcha-img" style="width: 325px">
<a id="recaptcha_image" href="#"></a>
<div class="recaptcha_only_if_incorrect_sol display-none" style="color: red">
Incorrect please try again
</div>
</div>
<div class="input-group" style="width: 325px">
<input type="text" class="form-control" id="recaptcha_response_field" name="recaptcha_response_field"/>
<div class="input-group-btn">
<a class="btn default" href="javascript:Recaptcha.reload()">
<%--<img src="../logo/refresh.jpg" alt="" />--%>
<i class="fa fa-refresh"></i>
</a>
<a class="btn default recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">
<i title="Get an audio CAPTCHA" class="fa fa-headphones"></i>
</a>
<a class="btn default recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">
<i title="Get an image CAPTCHA" class="fa fa-picture-o"></i>
</a>
<a class="btn default" href="javascript:Recaptcha.showhelp()">
<i class="fa fa-question-circle"></i>
</a>
</div>
</div>
<p class="help-block">
<span class="recaptcha_only_if_image">Enter the words above </span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear </span>
</p>
</div>
i did it, simply i make a folder in my .aspx page and in that folder i place the icons like refresh, headphones etc and after that i give the path of image
<div class="input-group-btn">
<a class="btn default" href="javascript:Recaptcha.reload()">
<i>
<img src="../logo/glyphicons_081_refresh%20-%20Copy.png" class="fa fa-refresh" />
</i>
</a>
<a class="btn default recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">
<i title="Get an audio CAPTCHA">
<img src="../logo/glyphicons_076_headphones%20-%20Copy.png" class="fa fa-headphones" />
</i>
</a>
<a class="btn default recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">
<i title="Get an image CAPTCHA">
<img src="../logo/glyphicons_138_picture#2x%20-%20Copy.png" class="fa fa-picture-o" />
</i>
</a>
<a class="btn default" href="javascript:Recaptcha.showhelp()">
<i>
<img src="../logo/glyphicons_194_circle_question_mark%20-%20Copy.png" class="fa fa-question-circle" />
</i>
</a>
</div>