Changing Bootstrap Glyphicon on click - javascript

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.

I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');

This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});

I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}

If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.

Related

Clicking a button/href with JavaScript/Jquery by class name

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> &nbsp
<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.

How to change a Bootstrap class list-group-item active depending on page

So, I have got a couple of html files that share exactly some lines of the code. I have that code with an include and I call that in every single page. It's basically a menu or better saying, a Bootstrap list-group. Here is the code:
<div class="list-group">
<i class="glyphicon glyphicon-send"></i> Page1
<i class="glyphicon glyphicon-cog"></i> Page2
<i class="glyphicon glyphicon-question-sign"></i> Page3
<i class="glyphicon glyphicon-picture"></i> Page4
</div>
The problem with this is that, I need my active class to change depending on which page I'm visiting. Therefore, we can say that the menu is only 99% the same, I mean, that class needs to be changed.
What's the best approach, recommendation or solution to tackle this?
You can, on document ready, check the URL and then apply the active class to the element you need.
$( document ).ready(function() {
var url = window.location.href;
if (url.IndexOf('page1') > -1) {
$(".list-group:first-child").addClass("active");
}
// ... other cases, using switch for each
});
Something like that
You can done through jquery
$(".list-group-item").on("click",function(){
$(".list-group-item.active").removeClass('active');
$(this).addClass('active');
});

How do I take advantage of a property of Active in ajax

hi everyone i have a panel admin with ajax and I want to when click on the tag a and page was loaded, Change the background color active tag a
html
<a id="BtnS1">
<span class="glyphicon glyphicon-th">Dasboard</span>
</a>
js
$("#BtnS1").click(function(){
$("#main").load("page/Dashboard.php");
});
You can add an active class to the a element when is clicked:
$("#BtnS1").click(function(){
$(this).addClass("active");
$("#main").load("page/Dashboard.php");
});
And write some CSS for this class.
Is this what you need?
My recomendation:
By the way, I highly recommend that you change the way you are performing the menu. You should use class instead of id for this pourpuse. And maybe a data attribute inside your a elements to load the appropiate URL when you click on your menu items:
<a class="linkOfMenu" data-url="Dashboard.php">
<span class="glyphicon glyphicon-th"></span>
Dashbord
</a>
$(".linkOfMenu").click(function(){
$(".linkOfMenu").removeClass("active");
$(this).addClass("active");
$("#main").load("page/" + $(this).data("url"));
});
In this way it is much more simple and powerful. :-)
Create a css class active_a
<style>
.active_a{
background: green;
}
</style>
Now add this class using jquery
<a class="links" id="BtnS1">
<span class="glyphicon glyphicon-th"></span>
Dashbord
</a>
<script>
$(".links").click(function(){
$(".links").removeClass("active_a");
$(this).addClass("active_a");
$("#main").load("page/Dashboard.php");
});
</script>

Use jQuery to target a class within a div and perform additional changes within the same div

I have the following HTML code:
<div class="pack1">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack2">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack3">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
[...]
<div class="pack10">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
Using jQuery I would like to trigger an event on clicking the a tag with the optionButton class but I don't know how to limit the event to the div that the a tag resides in.
For example right now I have something like:
$(document).ready(function(){
$('.optionButton').click(function() {
$(".optionButton").removeClass('checked');
$(this).addClass('checked');
});
});
It works fine for the first selection, lets say when I click the First option in the pack1 div, but if I make another selection, lets say Third option in the pack3 div, the first one will disapear.
Also, there must be only one selected option for each pach.
You need to narrow down the selection of your removeClass, as right now it's selecting every occurrence of optionButton.
$(document).ready(function(){
$('.optionButton').click(function() {
$(this).siblings('.optionButton').removeClass('checked');
$(this).addClass('checked');
});
});
This will narrow it down by selecting siblings of the clicked element that have the class optionButton.
JSFiddle
EDIT: Woops, put the wrong class in there. Should be patched up now.
Because exact DOM structure is highly subject to change, your best bet is to almost always go to the parent and search your way down like so:
1) $(this).parent().find(".optionButton").removeClass("checked");
or you can simplify the selector results set (and make your code slightly more efficient) by saying:
2) $(this).parent().find(".checked").removeClass("checked");
You can also use the selector context parameter like so:
3) $(".checked", $(this).parent()).removeClass("checked");
The difference between 2 and 3 is purely syntactic. jQuery will convert 3 into 2 behind the scenes
I think this could work
$(document).ready(function(){
$('.optionButton').click(function() {
var parent = $(this).closest("div");//getting the parent content
parent.find(".optionButton").removeClass('checked');//remove the checked
$(this).addClass('checked');
});
});

On click to menu-toggle change the Menu to Log In

I have a nav menu.
On click of the Menu button, I want to replace it with Login text
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "container">
<!--Collapse menu with three lines-->
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--Actual menu-->
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active">
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Home</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Blog</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">About</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
I added a class like this
<div id="displaylogin" style="display:none;" >
LOG IN <i class="fa fa-bars"></i>
And trying to show hide like this using the JS.
$(function(){
$('.menu-toggle').click(function(){
$('.align-right').removeClass("visibleClass");
$('.displaylogin').addClass("visibleClass");
});
});
Here's the fiddle for the same.
It seems to me that you're trying to bind the click handler to the wrong element.
From what I can see, within the div#displaylogin you have an a element with the class menu-toggle however since the div#displaylogin is hidden you'll never click on it since it's not visible or clickable within a hidden element.
If you want your code to trigger in the first place you'd have to bind it to the button.navbar-toggle.
$('.navbar-toggle').on('click', function() {
// this line will not work provided the example code
// this is because this class is not in the example
// also this classname should not be used as a selector since you'll use it alot
// when you're using it all over the page jQuery will try to remove this class from every element with class 'align-right'
$('.align-right').removeClass('visibleClass')
// your element uses an ID, not a CLASS - therefore the '.' needs to be a '#'
$('.displaylogin').addClass('visibleClass')
});
The above example tries to point out what is going wrong however I have some additional recommendations so that your code won't turn into frog-soup later on in development.
When you want to bind something to a single element in JS, it's best to use an ID as they are (supposed to be) unique on the page.
This prevents screw-ups when it comes to you making changes later in your code.
also, using the class .align-right as a selector rings like a million alarm bells on my side since this class has such general naming I am assuming that you're going to re-use it on multiple elements.
In turn, every time you re-use that class on different elements it will try to remove the visibleClass from every element that has class="align-right". Can you see how that can become a problem?
This is all just advice so don't take it the wrong way, we're all trying to help each other here and that's what I'm trying to do right now :)
Fixing these issues and updating your question accordingly will allow us to help you until your problem is fixed.
It is also very important to understand that selectors are a very simple thing with very complex consequences when used improperly (as with this .align-right case).
I can't really say this is an answer but it's to large for a comment so I'm just going to keep updating this when more information is available.
Try to debug what you already have with my advice and come back to edit your question if you wish it to be solved, good luck in the process ;)

Categories