Change icon for expand collapse in angularjs - javascript

I am trying to change icon (i.e plus, minus) on click in expand collapse accordion, I am using Font Awesome class for icons. I know it is easily possible with jquery but if there is any way in angularjs, then please let me know.
HTML looks like:
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne{{test}}">
Test
</a>

You should be looking at ng-class.
Short example...
in your template:
<span ng-click="flag = !flag" ng-class="{ active : flag }">
click me!
</span>
in your css:
.active { color: red; }

Related

Bootstrap toggle element and JavaScript

I have and element that should be displayed or hidden from different menu entries (e.g. its visibility toggled), and a toggle button that should switch the visibility of the element, but there are menu locations the element should be visible regardless of the toggle button state.
<a class="menu-bar" data-toggle="collapse" href="#menu">
<span class="bars"></span>
</a>
<div class="collapse menu surcarte" id="menu">
<div class="dansmenu">
some nice stuff comes here
</div>
</div>
HTML above is OK. But if add this code in a top menu bar :
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 1 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 2 </a>
<a data-toggle="collapse" href="#menu" onclick="somejavascript();return false;"> link 3 </a>
Each link will toggle the #menu element, first showing it, then hiding it and so and. But i want them to allways show the #menu element. Only the element with the "bars" class should act as a toggler.
I tryed to solve it with $("#menu").show();
but the jquery command seams not working.
Then i tryed the following to find out what happened:
click the link of class "menu-bar" to make the div appearing.
use the command $("#menu").hide(); => WORKS
click the link of class "menu-bar" to make the div disapear : DOES NOT WORK ANYMORE
click the link of class "menu-bar" to toggle the div once more : no effect
use the $("#menu").show(); => WORKS again
click the link of class "menu-bar" to make the div disapear : WORKS
use the $("#menu").show(); => DOSN'T work anymore.
It seems that there is a double imbricated toggle command and i can't escape it.
How do i write a working $("#menu").show(); ?
I finally found out my problem.
I was trying this :
$("#menu").toggle()
where the right syntax was :
$("#menu").collapse('toggle')
Special thanks to Rory McCrossan who showed me the strating point.

Open Accordion only on click of the right symbol

I would like to disable the click event that opens the accordion if I click anywhere on the heading.Instead I would like to click only on the right most symbol....
Here it's opening if I click on the Save button..
<accordion-group is-open="status.open" template-url="accordion-group.html">
<accordion-heading>
I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here's the plunker..
link
in your html file i modified:
<accordion close-others="oneAtATime">
<accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html">
<accordion-heading style="pointer-events:none !important;">
I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
You should add css property: "pointer-events: none !important" on elements which you won't to react on mouse click event, and set "pointer-events: auto !important" on your icon indicator only. The accordion should be opened only when you click on the arrow icon. That should work :)
To make your solution more elegant you can make CSS classes like:
.disable-click-event {
pointer-events: none !important;
}
.enable-click-event {
pointer-events: auto !important;
}
There's also an option that prevents event bubbling ($event.stopPropagation()) but in this case i dont know where exactly event is invoked so it needs hard investigation to find it out.
One more hint: if any problem can be solve with CSS instead of JS it's completly worth to do it :) JavaScript events are not so easy to debug, so CSS fix will be much faster to find than dirty bug with event bubbling. I can recommend you to use simple CSS solutions with a clear conscience :) cheers

jQuery: hide by class name and then show next element by the same class name?

I'm trying to create a demonstration type of thing in my page.
basically the first element is showing on the page load and the rest are hidden.
once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the next() to show.
my html looks like this:
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
And my jquery looks like this:
$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});
My simple code will hide .bubs that is showing but it doesn't show the next .bubs
Could someone please advise on this issue?
Thanks in advance.
.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
The JQuery method "next" should contain the class of the next element you want to show.It should work if you use next(".bubs") like this :
$('.cls').click(function() {
$('.bubs:first').hide();
$(".bubs:first").next(".bubs").show();
});
Note : I assume that the element you want to hide is the first one who has "bubs" class.

voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter

Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
Also I have one js file for this voting
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
thank you.
To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.
Live example - http://www.bootply.com/6KzWhJefif
I wouls create a CSS class and add it to the '' tag your glyphicons are in. In this class you can set the 'font-size' which will size your iccn. You also should be able to adjust the padding which is what I assume your issue with the incorrect rendering is. If that doesn't help you'll have to use developer tools on your browser and see where you'll need to adjust the padding.
The final thing to do is to set your active, hover and focus on your a tag but using the class. If you've never did this before with CSS it's something like this.
.customClass > a:active, a:hover, a:focus{
color:#fff
}
Hope this helps. If you need more detail let me know but this should be all you need to get it working.

How to change bootstrap glyphicon color in jquery

I have glyphicon-ok in my li element.Initially as per my requirement I am giving green to all glyphicon-ok like this
.glyphicon-ok {
color: #41be47;
}
One li element is like the below
<li class="active">
<a href="#" onclick="return getQuestions(this);">
<span class="glyphicon glyphicon-ok"></span>
test
<i class="glyphicon glyphicon-remove pull-right" style="display: block;" ></i>
</a>
</li>
Now I want to change glyphicon-ok to white color when that particular is clicked.
So what should I write inside
function getQuestions(id) {
}
I tried
function getQuestions(id) {
$('span').find('.glyphicon-ok').css('color','#fff');
}
You just need to change the color property in the css. One of the major benefits of an icon font is that you can use font css properties on them.
Using the :focus and :active selector to apply these styles would be a better solution than using javascript.
Example
If you do decide to use javascript i would suggest using it only to add/remove a class rather than apply the styling itself.
If you're really willing to do it through javascript:
First option, listens to click on the icon
jQuery(document).ready(function($){
$('.glyphicon-ok').on("click", function(){
$(this).css("color", "#FFF000");
});
});
Demo at: http://jsfiddle.net/T9Dk9/1/
Second option listens to click on the li element:
Add class to the li (not essential, but easier in bigger projectes):
<li class="active clickable">
jQuery(document).ready(function($){
$('.clickable').on("click", function(){
$(this).find('.glyphicon').css("color", "#FFF000");
});
});
http://jsfiddle.net/T9Dk9/2/
But I guess there will be a method in Bootstrap do define a 'clicked' color for links
Try this
$('[element]').css({
color:'#ffffff !important',
});
demo Demo here
come on guys you must change class,
if you want that icon must be white alfer click add some class.
try it (on hover for example:)
$('span').hover(
function(){
$(this).addClass("white");
},
function(){
$(this).removeClass("white");
}
});

Categories