Changing bootstrap glyphicon onclick function - javascript

I'm trying to swap .glyphicon-menu-down to glyphicon-menu-up when user click on the link. What am I doing wrong? It's not working. Am I miss-using jquery?
Markup
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Admin
<span class="panelarrow glyphicon glyphicon-menu-down pull-right"></span></a>
Script
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});

In your case $(this) refers to .panelarrow and you are trying to find span element inside that .panelarrow.
Solution:
$(document).ready(function() {
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});
Or if you want to change your icon by clicking on the a element use this:
$(document).ready(function() {
$('[data-toggle="collapse"]').click(function(){
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});

Clicking on the span (which includes the glyphicon) will let you use "this" to refer to the span - then the toggle classes can be included in the one command:
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
});
});

Related

How to addClass and remove Class when clicking a link?

I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle

anchor tag data not accessible when clicking on glyphicons inside the anchor tag

How do I get the data when there is only a glyphicon in the anchor tag? Below is a demonstration of the problem...
http://jsfiddle.net/sua0yp4y/2/
HTML:
<h1 id="output1">OUTPUT1</h1>
<h1 id="output2">OUTPUT2</h1>
<a class="withIcon" href="#" data-taskid="1123" data-userid="5813"><span class="glyphicon glyphicon-time"></span></a>
<h1 id="output3">OUTPUT3</h1>
<h1 id="output4">OUTPUT4</h1>
<a class="withoutIcon" href="#" data-taskid="1123" data-userid="5813">without icon</a>
JS:
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).data('userid'));
$("h1#output2").text($(e.target).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(e.target).data('userid'));
$("h1#output4").text($(e.target).data('taskid'));
});
Add the closest('a') to find the closest anchor tag and get the data values:
$("h1#output1").text($(e.target).closest('a').data('userid'));
$("h1#output2").text($(e.target).closest('a').data('taskid'));
http://jsfiddle.net/sua0yp4y/3/
The user clicks over the image you can change the event:
$('body').on('click','.glyphicon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).parent().data('userid'));
$("h1#output2").text($(e.target).parent().data('taskid'));
});
fiddle
Use this instead of e.target to referece the element you clicked on.
Updated Fiddle - http://jsfiddle.net/sua0yp4y/5/
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(this).data('userid'));
$("h1#output2").text($(this).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(this).data('userid'));
$("h1#output4").text($(this).data('taskid'));
});
replace $(e.target) with $(this) your problem get resolved.
demo http://jsfiddle.net/sua0yp4y/8/

Condensing/Optimizing jQuery code

I have the following code for sliding down a hidden content area. It works, but I suspect it's too clumsy and may fire too many requests or events. Can someone suggest a way to combinee these functions more efficiently?
$(".toggler").click(function (event){
event.stopPropagation();
$("#mobile-top").animate({'height':'toggle'}, 250);
});
$("#mobile-top").click(function(event){
event.stopPropagation();
});
$('.toggler').toggle(function() {
$(this).html('Close This Box <em class="fa fa-chevron-up"></em>');
}, function() {
$(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>');
});
$('html').click(function(){
$("#mobile-top").slideUp();
$(".toggler").html('Connect With Us! <em class="fa fa-chevron-down"></em>');
});
I think the code could be improved by using variables when you can especially when using a certain selector more than once.
and try and use ID's not classes.
EDIT
UPDATED JSFIDDLE
Here is the code that is working and wont get confused when you click outside in the HTML area. (note that while naming a variable it can't contain a - character like I had put before)
$(document).ready(function(){
var toggler = $("#toggler");
var mobileTop = $("#mobile-top");
//top drop-down content animation
toggler.click(function(event){
event.stopPropagation();
mobileTop.slideToggle(250);
$(this).toggleClass('open');
$(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>');
$(".open").html('Close This Box <em class="fa fa-chevron-up"></em>');
});
$('html').click(function(){
mobileTop.slideUp(250);
toggler.html('Connect With Us! <em class="fa fa-chevron-down"></em>');
toggler.removeClass('open');
});
$(mobileTop).click(function(event){
event.stopPropagation();
});
});
And this should be more efficient as well.
a good read:
http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551

remove/toggle class when users clicks on the link

I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/

How can I swap an image on click and show it onclick or when clicked elsewhere?

My HTML structure is:
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Onclick of box_one or box_two I want them to go to an active state. I intend to use JQuery to do that. So when box_one or box_two is clicked the image color changes to reflect active state.
I am not sure how I can use JQuery to do this because instead of having two different images for each box I am using a sprite image.
I am new to Jquery but got up to this point:
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
});
});
})(jQuery);
How can I still use Jquery to change the image when clicked and change back to original when clicked on that image again and when something else is clicked?
My assumption is that your asking how to change the sprite on the element that was clicked. To do that you'd adjust the background-position of the clicked element as shown here:
$(document).ready(function(){
$(".box_one, .box_two").click(function () {
$(this).css('backgroundPosition', '0 -54px'); // replace values with appropriate sprite values
});
});
Please clarify if you're use case is different from this.
UPDATE: use an active class and toggle it. toggle active class by clicking on other elements.
<div class="box_container">
<a class="box_one active" href="#"></a>
<a class="box_two" href="#"></a>
</div>
$(document).ready(function(){
$(".box_one").click(function () {
$(this).toggleClass('active');
});
$(my_selected_elements).not(".box_one").click(function () {
$(this).toggleClass('active');
});
});
use classes for the swap
.box_one{
background : 'imgUrlOne'
}
.box_one.swap{
background : 'imgUrlOneSwap'
}
.box_two{
background : 'imgUrlTwo'
}
.box_two.swap{
background : 'imgUrlTwoSwap'
}
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Javascript
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
$(this).hasClass('swap') ? $(this).removeClass('swap')
: $(this).addClass('swap')
});
});(jQuery);
Updated Check Fiddle

Categories

Resources