I have an off canvas navigation on a website that I am working on. The default state for the off canvas navigation is closed which works well on the mobile site as you can toggle it open and select your links but on the desktop having it closed and toggling it on hides information from the user and I would like it to be open by default when the user arrives at the page.
Currently the navigation uses jQuery to make the toggle:
$( "#main-menu-toggle, #main-menu-caption, .menu-mask" ).on( "click", function() {
// toggle the classes in the body the css does the rest
$( "body" ).toggleClass( 'main-menu-open' );
// for screen readers lets set the ARIA atributes
if ( $( "body" ).hasClass( 'main-menu-open' ) ) {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
});
And there is a call in there when the page loads as well as resizes to show and hide the menu depending on screen size:
// show or hide the main navigation menu when the page is loaded
showHideMenu();
$( window ).resize(function() {
waitForDraggingStop(function(){
showHideMenu();
}, 500, "window resize in progress");
});
// adds or removes the classes for the menu addition or removal
function showHideMenu() {
if ( 955 < $( window ).width() ) {
$( "body" ).addClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( "body" ).removeClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
}
The issue is that the menu has an animation associated with it and so when you arrive on the desktop there is a delay and then the menu animates out. This quickly becomes annoying to the user as they have to wait for the page to finish its animations before they can use the screen.
The Question:
Is there a better way to do this using the CSS/JS that will have the menu expanded by default when the user comes to the page above 955px and collapsed by default below the same mark AND allow for the direction to be reversed on the click of the toggle later on and avoid the delays associated with animation using JS to add the open class?
I ended up solving this using the method from my comments:
I treated the jQuery added class like a status toggle instead of a state like open or closed.
Above 955 the css would default to open in the absence of the toggle but its presence would close it and below 955 the absence would keep it closed but its presence would open it.
This would completely remove the jQuery adding the class on load as well as the resize function.
Additionally I renamed the body class to "main-menu-open-close" to reflect the toggle.
Related
I have a page with a menu the folds out. When the user clicks a menu link and browser starts to load a new page the old page loses its body class move-left. Using inspector I can see that it clears the body class before re-rendering the DOM. Can this behavior be prevented?
$( "#foo" ).click(function() {
$( "body" ).toggleClass( "move-left" );
});
Where foo can be a menu button etc.
I am trying to build an application. I want to allow users to create their own menu (with submenus also). I want to make this with JavaScript to be "live" (something like: to click add a button and then drag and drop to order etc).
Do you think is there any jQuery/JavaScript/etc menu builder already for download?
I have tried to search menu builder javascript/jquery but I only found online menu builders (not to download).
Any type of code is accepted (related to js) - jquery, js, mootools etc
Thanks a lot!!! If the question isn't asked in the right place I will delete.
Edit: I don't need custom styles like "select a design for menu". It only needs t generate HTML <ul> and <li>
Try using jQuery UI alongside with jQuery (you must put jQuery UI script after jQuery and you must include a CSS theme e.g UI lightness). Start off with a <ul> and give it an ID (e.g #menu). Put all the base <li>s inside of it with the default values and the drag-and-drop <ul>s in a different element, e.g #items. Then in your script file, put:
$(function() {
$( "#menu" ).menu();
});
This will turn the ul into a menu. Now you want to make the items drag-and-droppable. In the same function, add this underneath $( "menu" ).menu();:
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
This will let you sort the menu items. To let you move them from place to place, add this to your function underneath ...disableSelection();:
$( "li" ).draggable();
$( "#menu li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#items" );
}
});
$( "#items li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#menu" );
}
});
I have a piece of Jquery which I am using to force a div to have a 'slide in' effect upon a user clicking on another div (a button which I define). However, upon page load, the jquery has executed and the div which is supposed to slide in upon user click, has already appeared and been revealed. Please can someone tell me how to stop this, and make it so that it's not active upon page load, and only works upon user click. Thanks.
Here is my code :
$( "#open-nav-3" ).click(function() {
$( "#open-nav-menus" ).slideToggle( "slow" );
});
open-nav-3 is the button which the user clicks to make the content appear, and open-nav-menus is the div ( content ) which appears.
I expect this is probably very simple, but I am a novice with all things Javascript.
I guess you just need an additional
$( "#open-nav-menus" ).hide();
to hide the element on page load. Add it before the event handler:
var navMenu = $( "#open-nav-menus" );
navMenu.hide();
$( "#open-nav-3" ).click(function() {
navMenu.slideToggle( "slow" );
});
I am trying to place onClick actions on two buttons (Managed and Unmanaged) which determines the style of multiple elements that have the 'managed-only-trigger' class.
The clicking of the Unmanaged button works fine, but when clicking Managed, the removeClass function doesn't seem to be working (it should remove the 'cloud-text-managed-only' override class and return the div to a normal style), it's throwing the following error:
Here is the jQuery and an example element (for reference):
// Managed / Unmanaged Functions
$( "#tab-managed" ).click(function() {
// re-enable the managed features
$( ".managed-only-trigger" ).RemoveClass( "cloud-text-managed-only" );
});
$( "#tab-unmanaged" ).click(function() {
// Ensure that we switch managed elements to disabled:
$( ".managed-only-trigger" ).addClass( "cloud-text-managed-only" );
});
<li class="cloud-tick managed-only-trigger">Some text that when unmanaged is clicked will turn grey based on the stylesheet</li>
Any help is appreciated.
Its 'removeClass' Not 'RemoveClass' :
$( ".managed-only-trigger" ).removeClass( "cloud-text-managed-only" );
The goal is to have a page with two panels (left-panel, right-panel) that open and close on swipe events, but also enable a responsive design (such that when the screen is large enough, the user can keep 1 panel open while using the page-contents).
I found good examples on the JQM sites:
http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-swipe-open.html
http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/ (section on making the panel responsive)
I got really close. On a small screen, I can swipe open/close perfectly. On a large screen (where the panel is held and content is responsive), I can only swipe to close on the panel itself. If I swipe on the page contents, nothing happens. Testing the following code, I see that the swipe event is being called.
$( document ).on("swipeleft swiperight", "#index", function( e ) {
console.log('swiped!!')
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
I have also been looking at the css code:
.ui-responsive-panel .ui-panel-dismiss-display-reveal {
display: none;
}
(If I comment out display, it wont let me use the page contents on a large screen).
I figured the easiest way to fix this problem was to force close any open panels. After hours of searching, I just thought a little bit and came up with this modification:
$( document ).on("swipeleft swiperight", "#ticket", function( e ) {
console.log('swiped!!')
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
$( "#left-panel" ).panel( "close" );
$( "#right-panel" ).panel( "close" );
}
});
All it does is close any panels on a swipe event if they are open.
Another tip about responsive panels -- make sure you are using the css class that corresponds to your panel option.
If you use reveal, the class is .ui-panel-dismiss-display-reveal
If you use push, the class is .ui-panel-dismiss-display-push
Hope this helps someone out!