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!
Related
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.
I'm using the elastic grid plugin for a grid display system on a site, but I want to be able to simply click off the expanded view and it automatically close without having to click on the thumbnail or 'x' button as the plugin suggests.
I've had a bit of a look through the code and think this is where I need to edit
function initEvents() {
//when clicking an item, show the preview with the items info and larg image;
//close the item if already expanded.
//also close if clicking on the item's cross
$items.on( 'click', function(e) {
hidePreview();
return false;
} ).children( 'a' ).on( 'click', function(e) {
var $item = $( this ).parent();
//check if item already opened
current === $item.index() ? hidePreview() : showPreview( $item );
return false;
});
However, I'm not sure exactly how to do this. I was trying to implement this method mentioned here but am having no luck.
Any guidance in this would be appreciated.
The plugin for reference:
http://demo.phapsu.com/jquery.elastic_grid/
if you haven't found an answer yet, add this your js page, it will close the expanded view if you click any where in the page except the expanded view it self.
$('body').click(function(evt){
if(evt.target.class== "og-expander")
return;
// For descendants of menu_content being clicked, remove this
// check if you do not want to put constraint on descendants.
if($(evt.target).closest('.og-expander').length)
return;
$(".og-close").trigger("click");
});
I am using event.preventDefault() on touchmove event to working panel slide properly. But it stops all scrolling in my app.
Without this code I am not able to open side panel smoothly. (It opens after 3-4 attempts)
$(document).on('touchmove', function(event){
event.preventDefault();
});
Code to open/close panel on right swipe by finger
$(document).on('pageinit', function(event){
// Bind the swipeHandler callback function to the swipe event on div.box
$( "[data-role='page']" ).on( "swiperight", function( event, ui ) {swipeRightHandler($.mobile.activePage.attr('id'));} );
function swipeRightHandler( page_id ){
$( "#"+page_id+"_panel" ).panel( "open" );
}
});
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 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" );
});