I have a css rule like this:
.foo:active {
background-position: 0px -382px;
}
.foo is applied to an anchor.
I have a set of several buttons displayed side by side.
I need to have a very common behaviour here:
When the user clicks on button 1, it stays active.
If the user clicks on button 2, that should be active and the orders shouldn't.
If we click on button 3 the same thing... and so on...
So, we should only allow one active button.
Can we deal with this using javascript or should we rely on a server side language?
Perhaps javascript will do the job, since, here, we are not refreshing the page each time the user clicks on one of those buttons.
What is the logic behind this ?
Update:
I should add something to onclick event, I should allow to onclick, apply a class that places the background in a way that the element looks active. But, I'm not sure, how to deal with the part that ONLY ONE of those 9 should be active. :s
Note: should I provide more details, please, let me know.
CODE SAMPLE:
function showDetails(eid){
$.post(baseUrl+"/index/show.details",{id:eid},function(e){
...
//remove ativoFinalista class from all elements with .botoesEquipas class.
$('.botoesEquipas').removeClass('ativoFinalista');
//add the class to the clicked element
$(this).addClass('ativoFinalista');
}, 'json');
}
Css:
I have nothing defined for .botoesEquipas.
.ativoFinalista {
background-position: 0px -130px;
}
The anchor:
<a class="botoesEquipas botaoFinalista<?php echo $e["cod_team"];?>"
href="javascript:;" onclick="showDetails(<?php echo $e["cod_team"];?>)"><?php echo$e["name"];?></a>
You can use jQuery, but note that a class fooactive is needed:
$('.foo').click(function() {
$('.foo').removeClass('fooactive'); // Remove active class from all elements of class foo
$(this).addClass('fooactive'); // Add active class to this specific one
});
Then code CSS like:
.foo { /* default foo style */ }
.fooactive { /* extra styles when active */ }
Edit: You bind click functions the old way. In that case, pass the element like:
onclick="showDetails(123,this)"
and
function showDetails(eid, element){
$('.foo').removeClass('fooactive');
$(element).addClass('fooactive');
}
http://jsfiddle.net/eEJma/
I would use jQuery. There is no need to call back to a server-side language:
Logic:
Remove all active classes
Add active to the clicked button.
Related
I'm bulding a hero section that consists of four horizontal accordion items, they expand when user clicks one of them.
One element is active on page load, because I pre-styled it with class "active".
I have code, that removes active class from an active element and sets the active class to the one that's been clicked.
The code looks like this:
<script>
$(".tabs_link").on("click", function () {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
$(this).next(".tabs_content").addClass("active");
});
</script>
The issue with code above is that it only works while users interact with the element, and I need those elements to open/close based on anchors in the link.
I have four anchors, I'd like them to open specific accordion by adding class "active" to the proper element.
The anchors:
#recover
#active
#mother
#kids
each one of .tabs_link and .tabs_content have combo classes so I could set the anchor to the specific child item f.e. .tabs_link.is-blue
Basically i have 4 url scenarios and i need the function to remove active class and set it on each element:
I was thinking to make a template and copy&paste it a couple of times.
f.e.
if(window.location.href.indexOf("#mother") {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
*// I don't know how to declare to what should I add class,
$(this).next(".tabs_content").addClass("active");
Heres the link to the website if you want to check it out and get to know the case better.
[https://fysioo.webflow.io/][1]
You can just use location.hash to add the class to the desired a tag.
Something like this:
function showContent() {
$(".tabs_link, .tabs_content").removeClass("active");
const aTag = $(`.tabs_link[href="${location.hash}"]`);
aTag.addClass('active');
aTag.next('.tabs_content').addClass('active');
}
showContent(); // on page load
I am working on a side navigation bar and have a label around the actual links in the sidebar to provide padding and borders. I would like the user to be able to click anywhere in this label and go to the link. I wrote this function for that:
function allowLabelClick(control) {
$(control).find('a')[0].click();
}
If you add this inline to the onclick of an individual label and pass (this) as the paramter, it works fine. However I basically have 100 or so links all with the class 'outerLabel' and don't want to add an onclick to each one manually. Instead I'd like to add it to all elements with the class outerLabel. To do that I wrote this line:
$('.outerLabel').on("click", allowLabelClick());
in my javascript. However I don't know what to pass in the parameter for allowLabelClick. I want it to be the DOM element that was clicked on but "this" doesn't work and I'm not sure what else to try.
Thanks
Use an anonymous function:
$('.outerLabel').on("click", function() { allowLabelClick(this); });
Actually you don't need JS for this. You can solve this with css
.nav a {
display: block;
padding: 10px;
margin: 10px;
...
}
Sorry for the title, I found no better way to describe it.
I have a list-group and want the buttons to show a specific color when active.
but somehow, the embedded spans capture the click and seem to not count as part of the a.
how can I fix this?
I want the button to change color, no matter where I click (on span or anywhere else)
The code is here:
https://jsfiddle.net/zj6uwmvu/
thanks
Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.
$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
e.preventDefault()
target.closest('.list-group').children(".active").removeClass('active')
target.addClass('active')
})
https://jsfiddle.net/zj6uwmvu/11/
instead of getting the item by "a", try getting it by its class like this:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
background-color: red; //instead of red put the color that you want.
}
initially i say that i'm newbie with jquery and js :D , i need to create a function in jquery to add a css rule after click event on a button, i have done it and it works:
$(".resp-toogle").on("click",function() {
$(".fit").css('top','200px');
});
in this case when there's a click action on .resp-toogle, there's a css rule added for fit css class. But i need that clicking again on .resp-toogle , would be a reset top margin for fit class.
I have checked documentation and tested something but i don't find solution.
I know i need study and test with jquery :).
Assuming that you want successive clicks on the element to enable/disable the top CSS positioning on the .fit element, you can use toggleClass.
Firstly, setup the class in your CSS:
.fit.top {
top: 200px;
}
Then, use the toggleClass() function in your jQuery code:
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('top');
});
Example fiddle
What you need is a sort of toggle button so try this:
add a css class
.themargin{
top: 200px;
}
then toggle the class on each click
$(".resp-toogle").on("click",function() {
$(".fit").toggleClass('themargin');
});
function docs here
I can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.
<li>
<div class="yearaction year1">
</div>
2007
</li>
<li>
<div class="yearaction year2">
</div>
2008
</li>
<li>
<div class="yearaction year3">
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
This implementation doesn't affect the other links. How do I make this toggle work correctly?
You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
You have to toggle it individually. A good workaround is to attach data-* to each link.
Then
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});
It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});
It doesn't affect the other links because by using:
$(this)
you are referring only to that particular instance of .gotoslide class (the one that was clicked).
To affect all the other elements with .gotoslide class, refer to them with:
$('.gotoclass')
You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});
You have to first clean up the other links and then set the clicked link to the correct class.
Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Working example here: http://jsfiddle.net/hVLML/4/