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
Related
Please bear with me since I am a newbie in this web development world.
I have a Hamburger Menu Button in my site and right now the only way to show the full page OffCanvas Section (and by doing so, will hide the Homepage Section) in Hamburger Menu Button is by the Click Function.
I want to change the Click Function with Hover Function to make it easier for the visitor. And if the visitor is not interested to click the options inside the OffCanvas Section, they able to exit the OffCanvas Section (and go back to the Homepage Section) using Click Function.
I tried to tweak this JavaScript code for a few times, but it didn't work.
Here is the code.
jQuery('.menu-button').click(function(){
jQuery('body').toggleClass('offcanvas-opened');
});
Any help would be much appreciated. Thank you.
There is the simple trick behind it
let me suppose you use the class "offcanvas-colosed" to hide
it
like this
.offcanvas-colosed{
display: none ;
}
/* now to change it with hover just do this */
.offcanvas-colosed:hover{
/* just overwrite the older function */
display: block ;
}
in simple words take the css part of offcanavas-opened class to the hover of the closed class.
and will see the change
there is no need to toggle the class
I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!
I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});
The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)
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:
New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.