I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');
This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}
Related
I'm using Bootstrap 5 and I'm trying to trigger a tooltip when I hover over an anchor tag which contains a Fontawesome Icon. However, when I hover over the part of the tag where the icon sits, the tooltip hides.
I have the following anchor tag:
<a href="https://twitter.com/mytwitterhandle" target="_blank" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
Hovering over text will trigger the tooltip but it is removed when hovering over the icon...
<i class="fab fa-fw fa-twitter" aria-label="Visit Twitter Page" data-original-title="" title=""></i>
</a>
Here's the javascript to trigger it (taken from the official docs):
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
Any ideas?
EDIT!
OK, so I got around this by inserting the Fontawesome icon as a pseudo element. Would still be interested to hear if anyone has a solution though.
Your issue looks like https://github.com/twbs/bootstrap/issues/31324 and has been fixed in Bootstrap 5 alpha 2 by https://github.com/twbs/bootstrap/pull/30928.
A workaround for Bootstrap 5 alpha 1 is https://github.com/twbs/bootstrap/issues/31080#issuecomment-645544440 :
.fas {
z-index: -1;
}
You use this code:
<a href="https://twitter.com/mytwitterhandle"
target="_blank"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Tooltip on top">
But need to use this:
<a href="https://twitter.com/mytwitterhandle"
target="_blank"
data-bs-toggle="tooltip"
data-bs-placement="top"
title=""
data-original-title="Tooltip on top">
Difference is data-toggle vs. data-bs-toggle and data-placement vs. data-bs-placement.
This is the button that triggers the side menu open / close on Moodle boost theme. I am trying to keep the menu hidden by default on page load.
So, I need to set <button aria-expanded="true" to <button aria-expanded="false" on page load. However, all the Javascript snippets I have tried need the element to have an 'Id' or a 'Name'; and this button has neither.
Question : How to I change the <button aria-expanded="true" to <button aria-expanded="false" on page load - without changing the source code of Moodle ?
<button aria-expanded="true"
aria-controls="nav-drawer"
type="button"
class="btn nav-link float-sm-left mr-1 btn-secondary"
data-action="toggle-drawer"
data-side="left"
data-preference="drawer-open-nav">
<i class="icon fa fa-bars fa-fw "
aria-hidden="true" aria-label="">
</i>
<span class="sr-only">Side panel</span>
</button>
Tried so far : I have searched if someone has done this already. Could not find anything. Tried several onload Javascript snippets, but nothing worked. Will appreciate some guidance & help.
You can look for the icon or a more specific element since the icon can be used more than once (or select it with :nth-child) and look up the previous element with jQuery. Then change the attribute of the button accordingly.
$('.icon fa fa-bars fa-fw').prev().attr("aria-expanded","false");
Below is the link to my codepen solution written in pure javascript and here is the explanation:
var btn = document.querySelectorAll("button"), dropdownBtn;
window.onload = function(){
for (var i=0; i<btn.length; i++) {
if(btn[i].getAttribute("data-action") == "toggle-drawer") {
console.log(btn[i]);
btn[i].setAttribute("aria-expanded", "false");
break;
}
}
};
Since you don't have any unique class or id o your button so went ahead and assumed that any one of the data-attribute on your button is unique (in this case data-action). Also, I assumed that your HTML document has many buttons hence I selected all the buttons and then iterated all over them to find the data-action attribute and as soon as I found it I set its aria-expanded value to false and exited the loop.
And all these happened while the document is loading.
I'm trying to click a button that brings up an edit screen on the same page.
Eg. Click "edit user", edit screen pops up on the same page without redirecting, change name, save. This button does not redirect to a new page.
The code for this button is the following:
<i class="fa fa-pencil"></i> Edit
For some reason I can click every other button on this website that's in the same exact form but I can't click this one. There are no IDs at all so calling by the class name is the only other method I know.
This is what I've tried:
setTimeout(function() {
document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);
I tried using some Jquery instead as well but no luck. Am I doing something wrong or is this all that I can really do? The other buttons I clicked either redirected me to a different site or just brought up some information on the same screen.
Thanks in advance.
Edit:
It seems that when I try iterating through the different buttons, who all have similar starting class names, I can iterate and click every button except for the edit button. So it's safe to assume that this isn't an issue with the code, so thank you everyone for the help and suggestions.
Edit #2:
Here is the code for all three buttons:
<div class="btn-group"><i class="stm stm-goog"></i>  
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-bar-chart"></i><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>
When searching for elements by class, it's better to use:
document.querySelector(); // Finds first matching element only
and
document.querySelectorAll(); // Finds all matching elements
instead of document.getElementsByClassName() as this returns a "live node list" and hinder performance.
When searching for classes with these methods, remember to include the dot (.) to signify classes and when multiple classes are used, do not include spaces. The spaces are only used when setting multiple classes.
Also, if there is only one class that is unique to the element you wish to find, you only need to search on that one class.
Lastly, only use a elements for navigation. If you simply need something to click, just about any object can have a click event handler.
var edit = document.querySelector(".btn-modify");
edit.addEventListener("click", function(){ console.log("clicked")});
setTimeout(function() {
edit.click();
}, 3000);
// Addtional test
var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1];
edit.addEventListener("mouseover", function(){
console.log("moused over");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group">
<a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse">
<i class="stm stm-goog">X</i> <!-- <-- You missed a semi-colon here. -->
</a>
<a href="#" data-id="29508"
class="btn btn-xs btn-inverse btn-modify">
<i class="fa fa-pencil"></i> Edit
</a>
<a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&q=11"
class="btn btn-xs btn-inverse">
<i class="fa fa-bar-chart">X</i>
</a>
<button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>
Because you are trying to select the element by its class you need to loop through the elements.
So if you wanna use jQuery you would do like so:
$(".btn-modify").each(function(){
$(this).click(function(){
your code here
});
});
If you want to fetch the element having all the class, try this:
JQuery
$(".btn.btn-xs.btn-inverse.btn-modify")
Plain JavaScript
document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")
Giving a space in between a class names in a css like selector meant that (next one) is a nested element in any depth. use . to indicate its a class, and write them together (without a space) you are searching for elements having all the lasses. And getElementsByClassName is not a css like selector, its can take only a class name and all those element having that class.
I can't seem to make the drop-down work. When you click on 'action' nothing happens.
I double-checked the CSS and JS links and all seems ok, tried with Bootstrapv4 and 3.3.7 and none works. Any thoughts?
Check my app https://codepen.io/thomasfaller/pen/NpGpPP
<iframe height='265' scrolling='no' title='XE.com WebApp' src='//codepen.io/thomasfaller/embed/NpGpPP/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/thomasfaller/pen/NpGpPP/'>XE.com WebApp</a> by Thomas Faller (<a href='http://codepen.io/thomasfaller'>#thomasfaller</a>) on <a href='http://codepen.io'>CodePen</a>.
You are trying to use bootstrap dropdown as a select input. Dropdowns are supposed to just call some actions, not behave like "select" elements. So there is no such functionality out of the box as you want. You have to have some JS to make it work.
So my very quick and dirty solution just to make it work:
1) Assign id="selected" to currently selected value:
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-eur" aria-hidden="true" id="selected"></i>
</button>
2) Assign onclick handler on dropdown items:
<a class="dropdown-item" onclick="select('eur')"><i class="fa fa-eur" aria-hidden="true"></i></a>
3) And this handler could be like this:
function select(currency) {
let selected = document.getElementById('selected');
selected.className = `fa fa-${currency}`
}
Codepen: https://codepen.io/anon/pen/KWdOxa
But you still have to save somehow a selected value to make your calculations proper in JS code.
So you had better use a special bootstrap element for select inputs - https://silviomoreto.github.io/bootstrap-select/
I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!
Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})
the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})
Should be:
$(this).next('.show-share-box').slideToggle('slow');
$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');