I have created a navigational menu with some of them having submenus. I want the menuitem with fa-chevron-down(down arrow icon) to change to change to fa-chevron-up (up arrow icon) when user clicks on that menu item and changes back when user clicks anywhere else. Plus i also have two request,
1) Since i am very new to jquery, the jquery code that i wrote seems to
do the trick but is there a better way? (notice when one menu item is clicked twice the sliding takes place twice. ITS ANNOYING)
2) When user resizes the window the html elements doesnot stays in place
and scatters.
Thanks in advance.
jsfiddle demo
UPDATE :
Thanks for solving my problem. I refined my problem further and it is working perfectly. Here is the final** JSFIDDLE**
For changing the icon you can easily do something like this in your click event:
$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');
for More take a look at jsfiddle example:
jsfiddle example
I think there is no need for changing the class.
If you only want to change the fa-chevron-down to fa-chevron-up icon, instead of switching the classes, just use toggleClass for fa-rotate-180. fa-rotate-180 will rotate your icon and it might solve your purpose. No need for adding/removing individual classes.
Let's say:
$('selector').click(function(){
$('menu-selector').toggleClass('fa-rotate-180');
});
It's just a sample. You can work around it.
Font Awesome v5 has changed things quite a bit.
This is the code I used to get a plus/minus collapse button working with Bootstrap, JQuery and FontAwesome.
HTML:
<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>
JQuery script:
$("#btn-collapse").click(function() {
if ($(this).hasClass('collapsed')) {
$(this).find('svg').attr('data-icon', 'minus');
} else {
$(this).find('svg').attr('data-icon', 'plus');
}
});
You should be able to substitute plus/minus for chevron up and down.
Related
I've got a basic example of a few buttons populated in a basic modular popup. I was going to ask how they change the state from active to inactive as in my code I don't see any visible change.
I was adding custom JS to add "active" class on click action and remove on the second click but still at least one button (recently clicked) remained selected even without "active" class attached to it.
I've prepared the code example in Codepen.io https://codepen.io/krzysztof-d/pen/rNLqdMv but I found out that those buttons over there behave even differently as they are not stay selected as they should by default, right?
Please let me know what I am missing
<button type="button" class="btn btn-outline-secondary w-100">1</button>
Update:
So the default behaviour of the buttons is different depending if in Desktop or Mobile view. You can test on Codepen example - in mobile last clicked button remains "selected/dark" (with change colour and focus around it) when in desktop view it instantly change back to white colour after mouse go away.
Now I work on selecting multiple buttons by adding active state - but I don't know how to handle this mobile behaviour as at least one button looks like selected even without "active" class attached to it.
My questions is how to make such button to look normal again (as other not selected) programatically?
In another words it doesn't seem to be a problem to make a multiple selection but I want to allow to deselect some buttons if someone make a mistake and this is where the weird part became. Here is the another link to Codepen with the same example with some JS added to add/remove active class from buttons - check it out in mobile view https://codepen.io/krzysztof-d/pen/OJXBwYm, try to select a few numbers and then deselect one or two.
Update with screenshot on request - button six in mobile view seem like selected but actually it was just deselected and class .active has been removed from it.
First or all, you don't need to write your own JavaScript to toggle the .active class on the buttons. Bootstrap has the button plugin you can use:
<button type="button" class="btn btn-outline-secondary w-100"
data-toggle="button" aria-pressed="false">1</button>
That would automatically toggle .active class when selecting/unselecting the button.
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/6/
Secondly, when you select a button, there are 2 things going on. Bootstrap addes .active (if you're using the button plugin) and .focus class:
.active: gives you the same background on the button just like when you hover it
.focus: adds shadows around the button
When you click somewhere else, only .focus class would be removed. That's why you should see the button is filled with the background color without the shadows, the same as you hover over it.
When you unselect a button but your mouse is still pointing at it, .active class is removed but the hover effect as well as .focus is still going on, making the button look like you haven't unselected it.
As soon as your mouse moves away, the hover effect is gone, and only .focus is left. That's why you should see the button only has shadows.
If you want to distinguish the select and unselect state of the button a little bit more, you can write CSS to disable hover effect if the button is .focus but not .active:
.selector .btn.focus:not(.active):hover {
color: inherit;
background-color: inherit;
border-color: inherit;
}
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/17/
Codepen demo: https://codepen.io/davidliang2008/full/yLJRZYy
A gif to show it's working properly in mobile view:
I have been reading many posts about toggling an icon and I got some code to work but it only works for one item and I have 23 of them.
Basically, it's an accordion of FAQ's and when you click on it the answer shows but I want a plus and minus sign to show and toggle depending on if it's collapsed or not.
I found this code and updated with my site and it works but only for the first FAQ.
$("#switch").click(function(event) {
$(this).find('i').toggleClass('fa-plus-square').toggleClass('fa-minus-square');
});
What do I need to do to make it so they all change?
I thank you in advance for your time.
Only one item on the page can have the id switch. Change this to a class and select using $('.switch') to apply the event to each item.
So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
Building a simple Multilevel push menu based on CSS classes, It has no javascript animations and runs on CSS transform/transitions. It works fine on every part other than toggling the is-open classes.
When a user clicks on a link, it should first remove the .is-open class. Then add it so the animation activates.
If i say change the .is-open class in the second stage to .addClass("foo"); it has no problem removing the .is-open class and adding the .foo class. So i'm wondering what the problem is with this section of the code.
You can find the code here http://jsbin.com/EjUQ/2/
On the demo you'll find that menus without a submenu load nothing. This is the correct behavior. The problem I'm having is that I would like the Menu to close before opening a new one. So removing the .is-open class then applying it again.
e.g
Link 1, 4,7 don't have submenu's so nothing with open on click/touch, clicking the menu button will prompt nothing to happen. This is the correct behaviour.
Link 2,3,5,6 have submenu's, so it opens on click/touch and the menu button will toggle the menu to open/close.
Hopefully someone can point me the direction of what i'm doing wrong. Thanks.
You should utilize the transitionend event. So that you listen for the animation to complete before adding the 'is-open' class back to the sidebar and content. Ex:
sidebar.one('transitionend', function() {
sidebar.addClass("is-open");
content.addClass("is-open");
});
Now, what I have here isn't perfect, but I believe it conveys the concept: http://jsbin.com/EjUQ/9
I am using JQuery Overlay from FlowPlayer.
I have this that opens my overlay:
<a rel="#overlay1" class="miniOpenBtn">Open</a>
$("a[rel]").overlay({mask: '#EFEFEF'});
I am bored of the standard close button and would like to add my own button, that's positioned anywhere inside my overlay:
<a id="closeOverlay" class="miniCloseBtn">x</a>
How can I get this link to close the overlay?
I looked at the documentation and they only give an example of replacing the original close button in the corner of the overlay, using class "close". I want to get rid of that original close button altogether and place additional ones inside the overlay.
I have looked at some old answers here on StackOverflow but having only started to learn JQuery last week, it's a little confusing to say the least.
Any help gratefully received.
You could just remove the div that the overlay is:
$('.miniCloseBtn').click(function(){
$('.overlay_div').remove();
});
If you can get a handle on the overlay to select against (say, it has an ID of 'overlay'), you can do this:
$('#overlay').find('.close').replaceWith('x');
In general, I think anything you create with a class of 'close' will close the overlay.
I tried this and got it working, after a long hard search in their forums. By applying (close:"a.closeOverlayBtn"), it allows me to use a different button for closing the overlay.
The JQuery
$("a[rel]").overlay({
mask: '#EFEFEF',
close: "a.closeOverlayBtn"
});
The Overlay Close Button
<a class="closeOverlayBtn" onclick="flashElement(<%=rsPhotoData.Fields("photoID")%>)">
x
</a>
Which as you can see allows me to call JS functions using my close button, the original one didn't easily allow this.