Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Responsive sliding panels #5163

Closed
toddparker opened this Issue Oct 12, 2012 · 90 comments

Comments

Projects
None yet
Contributor

toddparker commented Oct 12, 2012

A simple widget we should try to land would be a generic panel utility that would allow peolple to make collapsible panels and menus. The idea is to have a button that can show the panel when tapped.

  • behavior: slide over the page or push the page over (like the Facebook nav)
  • position: left, right at a minimum but maybe top or bottom if not too messy
  • expand: show panel in the layout at wider widths, collapse into a button panel at narrower

We're going to do some initial prototyping to see the feasibility of adding this widget. We'll use this code as a starting point:

https://github.com/filamentgroup/Slidenav
http://filamentgroup.github.com/Slidenav/demo/

@ghost ghost assigned Wilto Oct 12, 2012

Contributor

jasondscott commented Oct 12, 2012

We currently have this in BlackBerry 10 theme http://jsbin.com/eciwes/3.
Both the slide and the push.

Contributor

toddparker commented Oct 12, 2012

Good call @jasondscott - can you link to the files for this in the BB10 repo?

Any progress on this guys? :-)

Little wish from me (if it's possible): make the menu fixed on 100% height and disable the scrolling on the normal page (like facebook's menu).

m-vdv commented Nov 11, 2012

+1 for a good SlideNav, JQuery Mobile really needs this!

@baansport Aldo Lugo created a jQM FB style slide nav, but it's far from perfect.. see here:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

For best UX, I'd suggest the following:

  • Work out "Push Left" first (This should also be the default behaviour).
  • Push the page Top Bar as well.
  • Disable scrolling of the pushed page.
  • Enable scrolling within the Slide Nav (For nav's with a lot of menu items).
  • 100% Height on Slide Nav.
  • Enable Swipe left/right events to open/close nav. (See Aldo's demo, he implemented this).
  • While nav is open, clicking somewhere on the pushed page should close the nav again.

I recently stumbled upon Sidetap (http://sidetap.it/)
So far it's the best jQuery based sidenav I've seen, you might want to check it out ;)

As always, huge thanks to the entire jQuery Mobile Team!

Contributor

toddparker commented Nov 20, 2012

@jasondscott created a prototype here in a branch:
http://jquerymobile.com/branches/SlidingPanel/docs/content/content-overflow.html

I think for 1.3, we should just focus on the left/right and push/over modes and skip top/bottom.

m-vdv commented Nov 20, 2012

@toddparker Great to see you're actively working on this! :D

Looks and already works quite good in webkit on the desktop.. A whole lot of bugs left on mobile unfortunately :/
I could provide you a list of the bugs I can find, if that would be helpful but I assume you're already aware of them since it's just a prototype.

Good luck!

Contributor

toddparker commented Nov 21, 2012

Initial API work here:
http://oksoclap.com/C1Lv3eBfTF

Will the panel widget be placed within the page like normal widgets? Would be great if this widget could be placed outside the page to avoid double code (in fact, in every page).

Contributor

toddparker commented Nov 26, 2012

@baansport - I agree, but I think this will require larger changes to our widgets. We need to look at updating all our widgets to live outside page, slated for 1.4

Owner

arschmitz commented Nov 26, 2012

@toddmparker i think thats a good idea for the 1.4 review might as well try to get all these larger widget issues done at once

Toddparker: "I think for 1.3, we should just focus on the left/right and push/over modes and skip top/bottom."

I totally agree (for what that is worth :-D). Having these features would be just great. This widget, and also the gorgeous new table widget, would really make a difference. Love what you are doing and waiting patiently. :-) Thnx!

josh-io commented Dec 1, 2012

Really looking forward to this! Here at TapCanvas, we built our own homegrown solution (see an example at http://tapcanvas.com/go/sampleapp). We're happy to contribute our code, or just feel free to view source and incorporate what's useful. :)

Contributor

toddparker commented Dec 3, 2012

@jamerrill - thanks, yours is really slick. @jlembeck and I have been hacking away on the plugin and initial decs/demos.

We're looking at adding a 3rd display type (Push) that would essentially turn the panel into a collapsible column at wider widths. Demo isn't working right here for that, but here' is where we are now:
http://jquerymobile.com/branches/slide-panel/docs/panels/index.html

josh-io commented Dec 3, 2012

@toddparker Thanks! Here are a few observations:

  1. I think you'll want a way to prevent horizontal scrolling when the panel is open. Our method was to give the body a class consisting of: position:fixed;top:0;right:0;bottom:0;left:0;overflow-x:hidden;.
  2. It can be problematic if the height of the panel equals the height of the page, i.e. if a user open the panel using a link in the middle of the page, he/she can't see the navigation in the panel without scrolling to the top.
  3. The "pan" display mode slides the panel in. My ideal visual effect is for the page to "reveal" the panel underneath. :)

Sooooo happy this is going to be a part of jQM!

Contributor

toddparker commented Dec 4, 2012

@jamerrill -

  1. Good tip
  2. We've been discussing this. How do you handle this? Scroll to the top when the panel opens?
  3. Subtle, but you're right. We can change pan so the panel is there and the page just slides away

Great stuff, thanks for the info. I've been looking at your code and we're going to flip this over to use translateX like you do to make things smoother. Do you use a feature test for that?

josh-io commented Dec 4, 2012

  1. Thanks! :)
  2. Our panel gets position:fixed and top:0;right:0;bottom:0;left:0;—then it can scroll independently of the page. -webkit-overflow-scrolling: touch; makes scrolling feel great, too.
  3. Cool!
  4. TranslateX makes a huge difference. We used a feature test, but we found that older versions of Android were lying to us, so we ended up just specifying iOS and Chrome. :)
Contributor

toddparker commented Dec 4, 2012

I just tacked on a todo list here for the changes and items remaining for the panels - feel free to add items:
http://oksoclap.com/C1Lv3eBfTF

Contributor

toddparker commented Dec 6, 2012

Contributor

forresst commented Dec 6, 2012

I tested the page and I have two comments:

  1. the "push" mode does not work the same way as the other 2 modes: if we are not on the top of the page and you click on the link "push", the framework is positioned above of the page. For the other 2 modes, it remains in the same place (it is not positioned at the top). (Tested on Chrome 23)

  2. Small error in doc: replace
    "The panel Behaves just like at narrow widths pan goal at WIDER viewports (above 600 pixels)"
    by
    "The panel Behaves just like narrow widths reveal at goal at WIDER viewports (above 600 pixels) "

In any case it is the great work!

Contributor

toddparker commented Dec 6, 2012

@forresst - for #1, are you talking about the layer to dismiss the panel? RIght now, we hide that overlay at wide breakpoints to allow you to basically open the panel and leave it open as you work with the page, sort of like a collapsible column. Is that what you're referring to?

Docs need an update for sure.

josh-io commented Dec 6, 2012

Looking really nice! I'd still love it if the left/right panels didn't scroll with the page content—if you open the panel using the "Open panel" link 1/3 down the page, it's actually impossible on iPhone to see the panel contents. :)

One fun thing: a swipe event could be added to close the panel. :)

Member

jaspermdegroot commented Dec 6, 2012

Swipe to close the panel works with "reveal". Not sure if we should also use that for "push".

josh-io commented Dec 6, 2012

Ahh. Looks like the swipe event is bound to the revealed panel, when it should be bound to the page. (The idea is that the user is "pushing" the page back with their thumb.)

For the Push method, it doesn't matter where the swipe event is—both the panel and page are moving back to their original position.

m-vdv commented Dec 6, 2012

@ugomobi I believe Swipe events should work for all open/close panel methods, unless there is a good reason not too that I haven't thought of? Btw the swipe close doesn't seem to work on Android (Standard/Chrome browser)

@jamerrill Definitely with you on that, the panels shouldn't scroll with the page. But scrolling within the panel must remain possible! (think of panels with lot's of content).

This is starting to become really great, can't wait to implement this!

josh-io commented Dec 6, 2012

@webslash Agree with you there, the panel should scroll independently of the page.

Contributor

toddparker commented Dec 6, 2012

I just changed this so swipe anywhere on the page closes the panel, regardless of mode or direction.

We've added a bunch of hardware acceleration and it's way better now. Still refining.
http://jquerymobile.com/branches/slide-panel/docs/panels/index.html

^^ The preview is updated hourly and is probably not in sync with Git yet.

Making the panel scroll independently of the page won't work well on a lot of our platforms so that's going to be tricky. If you just set overflow:auto on a container, it can make the overflow content inaccessible on quite a few platforms. Position:fixed also needs lot of qualification, that should never be directly applied in your CSS because it breaks a lot of platforms. I think both of these may be needed to get that effect and it will need a lot of qualification and testing so that may be a later refinement. Adding a scroll top top may be a low-tech approach for now.

Contributor

forresst commented Dec 7, 2012

@toddparker I'll try to be more explicit (still under chrome 23 desktop):

For mode reveal or mode overlay

  1. scroll the page to the section "Setting panel display mode"
  2. click on the link "reveal" (or "overlay") => the panel opens and scroll position of the page (right side of the screen) does not move ( test OK )
  3. click again on the "reveal" (or "overlay") => the panel closes and the scroll position of the page (right side of the screen) does not move ( test OK )

For mode push

  1. scroll the page to the section "Setting panel display mode"
  2. click on the link "push" => panel opens but the scroll position of the page (right side of the screen) returns to the top of the page ( test KO )
  3. click again on the "push" => panel closes and the scroll position of the page (right side of the screen) remains to the top ( test KO )
Contributor

toddparker commented Dec 13, 2012

We’ve decided to tweak the sliding panel code a bit and API to simplify internals and support the most common use cases. So instead of the link being used to configure the panel position (left, right) and display (reveal, push, overlay), these are now set on the panel and the link just points to which panel to display. Work being done in the slide-panel-refactor branch.

Contributor

scottjehl commented Dec 13, 2012

Perhaps similar changes should roll into a future popup update too, simplifying the code by decoupling links from popups.

On Dec 13, 2012, at 11:17 AM, Todd Parker wrote:

We’ve decided to tweak the sliding panel code a bit and API to simplify internals and support the most common use cases. So instead of the link being used to configure the panel position (left, right) and display (reveal, push, overlay), these are now set on the panel and the link just points to which panel to display. Work being done in the slide-panel-refactor branch.


Reply to this email directly or view it on GitHub.

m-vdv commented Dec 27, 2012

I've taken the time to test out the slide panels inside an Android WebView (on SGS2 with ICS 4.0.4)

Refactored Slide Panel
http://jquerymobile.com/branches/slide-panel-refactor/

Overlay
Panel doesn't show, only the panels shadow appears a little.
However a phone rotation change does force the panel to show up.
But the fixed header is on top of the panel.

Reveal
The page content is pushed aside but once again no panel just whitespace.
Again a phone rotation change does force the panel to show up.
But the fixed header is on top of the panel.

Push
The page content is pushed aside but no panel just whitespace.
Again a phone rotation change does force the panel to show up.
Panel is on top of fixed header.


(old) Slide Panel
http://jquerymobile.com/branches/slide-panel/

Overlay
Animation is a little choppy but it works

Reveal
Works well

Push
Works as it should

Right panel which has the form does show some issues.
Push & Overlay show the panel for a second then the panel dissapears and there's only whitespace.
Didn't find issues on phone rotation change.

So to my findings the "old" slide-panel works a lot better then the refactored one in an Android WebView.
Hope this helps you guys out, I can put together a test WebView app which loads the slide panel pages if you want it to test on your own devices, just let me know!

Good luck and I hope to see a stable slide-panel with reveal in JQM 1.3 ;)

Contributor

toddparker commented Dec 27, 2012

@webslash - thanks for the report. The only thing I can think of is the hardware acceleration may be causing issues? Seems to work great in all the Android versions we have in a browser so it must be a difference between the browser and a webview. From my testing, ICS had the worst animation performance and we're still thinking about whether we should kick them out of transitions manually.

Mind adding this CSS rule to your page to negate the hardware acceleration to see if it makes a difference?

.ui-panel-3dtransforms.ui-panel-content-wrap,
.ui-panel-3dtransforms ~.ui-panel-content-wrap .ui-header {
    -webkit-backface-visibility: visible;
}

Would you also mind testing that page in the default browser and Chrome on your phone? Is it better or worse?
Lastly, if you turn off animations, how well does it work?

josh-io commented Dec 27, 2012

Just checked out the refactored slide panel on iOS 6.2 running on iPhone 5. Awesome! I did have an issue when using the phone in landscape mode: the panel scrolls with the page, whereas in portrait mode, it does not.

m-vdv commented Dec 28, 2012

@toddparker You're welcome! I didn't set Hardware acceleration to "true" for the WebView, so that's probably not it.
The android WebView behaves quite differently from the standard browser or Chrome and to my findings it's the worst of all :/ However I believe PhoneGap uses the Android WebView as well, so good support for it would be welcomed by many.

Now I haven't had time to test your suggestions yet, but here's the app I made which allows you to input a URL and it'll open the page inside an Android WebView (hardware acceleration not set), that way you can test things easily ;)

Download: http://www.webslash.be/clients/jqm/jQMWebView.apk

m-vdv commented Dec 28, 2012

@toddparker Tested the refactored slide panel with the suggested css rule but it appears to have no effect within WebView. (In standard browser and Chrome the slide panel still works)

Also tested with animations turned off, exact same behaviour (slidepanel only shows after a phone orientation change), just without the animations.

The best slide panel I've seen so far is the one Google has on it's mobile website, it also works perfectly within WebView so it might be worth checking out how they put it together.

Let me know if there's anything else I can do to help ;)

Owner

arschmitz commented Dec 28, 2012

@toddmparker I installed the app from @webslash and tested on htc thunderbolt w/ 2.3. and galaxy nexusw/ 4.1 2.3 works perfectly 4.1 is exactly as @webslash described with 4.0

Owner

arschmitz commented Dec 28, 2012

@webslash Thank you very much for this app it will help out a lot with issues involving webviews on android previously this was very difficult for us to work with. Iv already put it on two test devices and plan to use it to work on some other long standing android / webview issues

m-vdv commented Dec 28, 2012

@arschmitz That's great to hear! ;)

Member

jaspermdegroot commented Dec 28, 2012

@webslash - I installed your app as well... really awesome! Thanks!!

Member

jaspermdegroot commented Dec 31, 2012

The cause of the Android WebView issue reported by @webslash is:

.ui-panel-3dtransforms {
    position: fixed;
}
Contributor

toddparker commented Dec 31, 2012

I think we might want to kick Android 4.0 out manually by failing the 3D test. Animations are pretty bad in ICS and the fixed positioning is killing PhoneGap.

Seems like 4.1 is fine on both counts so I think this is just a case where 4.0 isn't quite up to snuff on some pretty basic CSS stuff.

@scottjehl @zachleat @arschmitz @ugomobi - What do you think?

Owner

arschmitz commented Dec 31, 2012

@toddparker both @ugomobi and myself were able to reproduce this in 4.1 also :(

Owner

arschmitz commented Dec 31, 2012

A few more issues i have noticed using the panels
1.) if you set dismissable to false it throws an error on every open or close its from this line https://github.com/jquery/jquery-mobile/blob/slide-panel-refactor/js/widgets/panel.js#L232 you are adding and removing a class from _modal which is undefined if dismissible is set to false
you can see this issue at http://jsbin.com/uzaret/613
it also does a similar one for close
to fix use if(self._modal !== null) to check if its a modal first
2.) if you call close on a closed panel then open it it opens then squashes the panel to the left because its not removing the class ui-panel-closed gets added at end of open for some reason. it looks like this is because you are running the transition on the closed panel which dosent complete so it dosent call complete. I wouldnt think close should do anything on a closed panel. maybe the whole method should be wrapped in if(this._open) and not do anything if its not open

Member

jaspermdegroot commented Dec 31, 2012

I tested http://jquerymobile.com/branches/slide-panel-refactor/ on Galaxy Nexus Android 4.1.1.

Default browser:
overlay + push: white blink on panel
reveal: no blink on panel, but problems with header. It doesn't slide with content and there is a redraw at end of the transition.

Chrome:
Only problem with reveal. It looks like a redraw of the content/header during the transition. You see a flash of the dark (panel) background through the content/header.

Owner

arschmitz commented Dec 31, 2012

@webslash We were wondering if you would mind if we put your app in our demos and contributing guidelines to help other people test in web views we think this could be really helpful to some people. We will make sure to give you full credit (not to mention its in the app lol).

I noticed that reflowing the content of the page in Push mode is not consistent in all browsers (all on Windows Vista with http://jquerymobile.com/branches/slide-panel-refactor/docs/panels/index.html):

  • FF (17.0.1)
    Content does not reflow the first time the panel is opened in Push mode. After closing the panel and reopening, again using Push, the content is reflowed.
  • Chome (23.0.1271.97)
    Content is not being reflowed after opening the panel in Push mode.
  • Safari (5.1.7)
    Content is reflowed nicely after opening the panel in Push mode.
  • IE (9.0.12)
    Content is not being reflowed after opening the panel in Push mode.
  • Left and right hand side panels
    It looks like left and right hand side panels behave equally as far as reflowing is concerned.

Hope this helps. Let me know if I need to retest.

Jasper

m-vdv commented Jan 2, 2013

@arschmitz No problem, go ahead!

Contributor

zachleat commented Jan 2, 2013

While working on tests for the slide panel, I noticed an issue with the transitionend events not firing on panel open in Firefox. It wasn't animating the panel at all.

The culprit was:

.ui-page-active.ui-panel-page-block{
    overflow-x:hidden;
}

I've removed this in the PR with the tests here: #5412

I'm guessing that removal may have some bearing on some of the testing happening here.

Owner

arschmitz commented Jan 5, 2013

panels are now merged into master and good to go!

@arschmitz arschmitz closed this Jan 5, 2013

Contributor

toddparker commented Jan 5, 2013

Woo hoo! That was easy :)

m-vdv commented Jan 6, 2013

I can't believe this got merged into the master already!
This is jQuery MOBILE so it should work well on mobile devices first..
None of the webview issues have been fixed and the standard Android browser and Chrome both still show issues.
I do appreciate all the hard work nonetheless

Contributor

toddparker commented Jan 6, 2013

From our testing, the panels work well in all the mobile browsers. Android webviews seem to just be broken with fixed position and there isn't much we can do other than surface an option to turn off fixed position and recommend that people do that for android apps. That option will labs early next week. We can't fix broken implementations, just try to avoid them.

That said, landing in master doesn't mean it's 100%. Please post specific details here along with test pages and we'll continue to reduce and debug as head head to 1.3 final.

Owner

arschmitz commented Jan 6, 2013

@toddparker @webslash the option to remove position fixed was actually landed prior to the merge though its not documented yet. Setting data-position-fixed="false" will disable fixed positioning and fix the issue in web views

Contributor

toddparker commented Jan 6, 2013

Ah, great news. I almost added that to the docs yesterday. I did just test master on Android 4.0 and 4.1 via browser stack and there does seem to be a regression. The panels don't work right at all, but are fine on 2.x and iOS. We'll need to dig into this more...

Owner

arschmitz commented Jan 6, 2013

@toddparker I looked into the android issue. It seems that for some reason the stock browser is now showing the same bug as the webviews setting data-position-fixed="false" fixes the issue on 4.0 and 4.1 stock. Im curious to find exactly what caused the issue to show on stock browser perhaps this could lead us to a fix for for web views possibly? I'm going to git bisect this on monday probably wont have time before then.

Owner

arschmitz commented Jan 6, 2013

@toddparker I looked into the android issue. It seems that for some reason the stock browser is now showing the same bug as the webviews setting data-position-fixed="false" fixes the issue on 4.0 and 4.1 stock. Im curious to find exactly what caused the issue to show on stock browser perhaps this could lead us to a fix for for web views possibly? I'm going to git bisect this on monday probably wont have time before then.

Member

jaspermdegroot commented Jan 6, 2013

@toddparker @arschmitz

I landed option positionFixed last friday night, but didn't add it to the documentation yet. Sorry.

When I test http://jquerymobile.com/test/docs/panels/index.html on Android 4.1 (Galaxy Nexus) stock browser and Chrome I still see the same issues as I mentioned in my previous comment.
Alex, when you say "the same bug as WebView" do you mean you don't get to see the panel at all? I can't reproduce this. Would be great if investigating this leads us to a solution that fixes it on WebView too, so we can drop the option positionFixed.

We use addClass() a lot which is quite "heavy". When looking into the issue on Firefox when we set overflow-x: hidden; for a class that we add to the page just before the transition kicks of, I noticed the browser wasn't ready applying the CSS while the transition already started. It could be the issues (redraws) I see on Android 4.1 have a similar cause.

Owner

arschmitz commented Jan 6, 2013

@ugomobi yes I don't see panel at all I am on browserstack like @toddmparker though. I won't have actual 4.1 until Monday

Not sure if this has been said yet but there is an issue on iOS 6.0.2 with the reveal panel. At first it looks fine, but when you scroll down then the panel stays where it was initialised and on the touchend it will redraw to the correct position.

Oh, I'm using the default browser by the way.

In the Chrome browser it's even worse.. it has the same redraw problem on the touchend BUT I'm also able to scroll to the right (so back in to the page). This only occurs with the left panels (overlay, reveal, push) but NOT with the right panels.

Hope you lads understand it as my English isn't perfect lol. I can make a demonstration video if you like... :)

I tested at /test

Contributor

toddparker commented Jan 7, 2013

I just updated the docs for accuracy and broke it up into the standard index/options/methods/events pages.
http://jquerymobile.com/test/docs/panels/index.html

I also created two more realistic pages under demos. Both are the same content-wise, but the first one has fixed positioning off for the panels because the buttons are at the top of the screen so it's not worth the overhead of fixed since scrolling isn't an issue:
http://jquerymobile.com/test/docs/demos/panels/panel-nav-form.html

Issues found in Chrome/Mac:

  • the footer doesn't shift over correctly for the left menu with the reveal display. Oddly, this works fine on the panel index page so maybe this is a docs css issue?
  • I added the ui-responsive-panel class on the page wrapper and it's not working here, but works fine on the index page. Need to track that down.
  • If you first open the left nav panel, close it, then open the form accessed via the "+" button in the header, tapping the toggle flip switch causes the panel to freak out and either open up a space in the left or hide but leave a space behind.

In the second demo, I have fixed toolbars and fixed panels.
http://jquerymobile.com/test/docs/demos/panels/panel-nav-form-fixed.html

Issues found:

  • If you open the nav, then close it you will see the nav appear under the page contents if your monitor is large enough to have space under the footer
  • If you first open the left nav panel, close it, then open the form accessed via the "+" button in the header, the left nav will appear in addition to the form panel.

It wouldn't surprise me if some of these issues were me doing something wrong but I wanted to capture them all here so we can track them down tomorrow.

All this experimentation is making me wonder if we should default to the fixed panel positioning option being false instead of true. Since most apps have panel links in the top header, fixed isn't super important because you're not scrolled down. Fixed does seem to change quite a few things and add flakiness so an opt-in might be a good idea. Thoughts?

In addition, we need to track down the overflow-x change - removing this killed the swipe to close behavior so that needs more research.

Contributor

scottjehl commented Jan 7, 2013

the footer doesn't shift over correctly for the left menu with the reveal display. Oddly, this works fine on the panel index page so maybe this is a docs css issue?

Hmm - I don't recall adding the logic to accommodate fixed footers actually, just headers. Maybe that's the issue (unless it was already added by someone else).

I added the ui-responsive-panel class on the page wrapper and it's not working here, but works fine on the index page. Need to track that down.

Is that the opt-in for the breakpoint? Are you sure we need that to be optional anymore? I thought we'd decided to bake-in the breakpoint because it's essentially only securing a max-width now, rather than doing broader layout changes?

If you first open the left nav panel, close it, then open the form accessed via the "+" button in the header, tapping the toggle flip switch causes the panel to freak out and either open up a space in the left or hide but leave a space behind.

It appears that this button is triggering a close on the panel, but the wrapper isn't getting the message. Not sure why.

2nd demo:

If you open the nav, then close it you will see the nav appear under the page contents if your monitor is large enough to have space under the footer

Hmm - I wonder if we lost our styles that clip the hidden reveal panels to width 0 and overflow hidden?

If you first open the left nav panel, close it, then open the form accessed via the "+" button in the header, the left nav will appear in addition to the form panel.

Not sure.

If these issues aren't happening in both pages, I wonder if it's a difference in configuration.

m-vdv commented Jan 8, 2013

Just letting you guys now it looks like creating a great side menu isn't that difficult in WebView on ICS after all..
Take a look at this site http://m.inze.it/, you can test it with the WebView app I posted earlier.
It works PERFECTLY, so definitely worth a look at how they got it done ;)

EDIT: Just noticed it's working on WebKit only.. So not that perfect after all..
But it still works great on Android and iPhone (the major players) so maybe a separate version for those could be created? How about creating something like a data-platform attribute, where you can specify which OS you wish to target? Then multiple versions of the panels could be created to give best performace per platform.
Since it's become rather clear that a real cross platform solution isn't possible yet :/

I'm trying to get the side menu from http://m.inze.it/ implemented, but haven't got it functioning yet..

If you have a "navbar" bellow the header, it will appear at the end of the content. This happens by ui-navbar not being included in $wrapper (line 7916).

$wrapper = self._page.find( ".ui-header, .ui-content, .ui-footer, .ui-navbar" ).wrapAll(...);
Contributor

toddparker commented Jan 12, 2013

Navbars should live inside toolbars or the content container. I don't think we tell people these can be siblings to head, content, and footers.

Great then, didn't know that. My bad. Thanks!

mmh... panel slide doesn't work at all...
the panel-content are always above the header... what's wrong?

my code:

https://gist.github.com/ec63eac8278e9d199d4e

Bildschirmfoto 2013-01-12 um 20 19 42

Member

jaspermdegroot commented Jan 12, 2013

@daniel-pscheid

This is a new widget in version 1.3. You use 1.2.
We will release 1.3 beta this week.

Using friday's code, I am noticing that in a multipage-template that all pages are appearing if there is a slide panel. (My panel is internal to the first page -- which is the only one which should be displaying...) (Simply changing data-role to a dummy value makes only one page show up -- as expected)

Member

jaspermdegroot commented Jan 14, 2013

@ChadPrice

Thanks for testing and giving feedback!
I just merged a branch in master in which me made many changes to panel. I could not reproduce the issue with latest code. Do you mind testing again?
If you still see the issue please include your markup in this JS Bin http://jsbin.com/ehowik/1/edit so we can look into it.
Thanks!

Member

jaspermdegroot commented Jan 14, 2013

@webslash @baansport @jaspergrannetia @jamerrill

We just finished another refactor. Those changes are on master now: http://jquerymobile.com/test/docs/panels/index.html
Looking forward to feedback! Thanks!

Using the non minified js and css code from http://jquerymobile.com/blog/2011/04/16/latest/ (monday, Jan 14) the issue I mentioned with multiple pages being visible is resolved. I am, however, seeing visible below my footer unpositioned popups which are in the various pages of my multi-template page. I'll try to simplify my example and post to the JS Bin http://jsbin.com/ehowik/1/edit.

Simple modifications to the example page for the slider does not lead to any issues.

Thank you for your assistance.

Member

jaspermdegroot commented Jan 15, 2013

@ChadPrice - I don't see your example. If this is not related to panels, please open a new issue for it and include a JS Bin test page.

My apologies; my example is out there -- but the various changes from Friday's (1/11/2013) latest to yesterday's latest (1/15/2013) has resolved the issue.

How can I make the side panel content scrollable in case there are many items, without scrolling the content on the main page (in JQM 1.3 Beta)? I am trying to implement this for an application running on both Desktop and Mobile browsers.

JQM team, thank you for all the hard work!

Member

jaspermdegroot commented Jan 17, 2013

@yevheniyc - See @toddparker his comment at #5449

@ugomobi - Thank you. I was hoping there was a cross-browser solution out there.

atuttle commented Jan 20, 2013

There seems to be an issue when using panels to switch between multiple pages. Here's a jsFiddle that shows it in action.

  • Click the button in the header to open the panel
  • Choose any page that you're not currently on (3 pages included, home, page 1, page 2)
  • repeat a few times

The 3rd time you choose another page from a panel, the page does switch but the panel background stays visible behind the page content:

Member

jaspermdegroot commented Jan 20, 2013

@atuttle - You use branch "slide-panel" as source. Latest code is on branch master. I don't see the issue with latest code: http://jsbin.com/ehowik/23

atuttle commented Jan 21, 2013

@ugomobi thanks, you're right. I had copied all of the includes from this link earlier in the thread. My bad! I should have been looking at this one.

Hi. Love the feature but have a problem. Any content the relies on scripts like ad tags, API's etc that get called up in the data-role="content" container is disabling my jqm framework.

Member

jaspermdegroot commented Jan 26, 2013

@Kastansa

Do you mind opening a new ticket for that? Please include a test page. See the contributing guidelines for JS Bin template and instructions. Thanks!

@ugomobi. This is only a problem for me using the sliding panels. If i remove the class ui-responsive-panel the scripting in the content div works but obviously disables the feature. Still want me to open new ticket? Thanks.

Member

jaspermdegroot commented Jan 26, 2013

Hi @Kastansa

I thought you were talking about an issue that could affect other developers as well. If you don't think it is a bug that should be fixed in the framework there is no need to open a new ticket.
However, I am very curious how a class that opts-in some CSS in a media query can break scripts on your page (it disables the JQM framework?). All we do is setting some margin to make the content reflow.

Sorry for the delayed response. It seems the issue was caused by having javascript(ad tag) running in the footer on android devices. Once i change data-role="footer" to data-role="none" the panel framework kicked in again although there is obviously overflow issues with the footer by removing the data role.

Also, i noticed that on iOS if a fixed height is applied to the footer or an element inside the footer, it causes stutters and freezes on the page scroll.

js08 commented Feb 5, 2013

how to make the menu button icon to appear only for iphone screens...... the menu button appears in all the desktop version too.... but i wanted the menu button functionality to work only for iphone.... how to achieve it...

http://jsfiddle.net/QYvrt/2/

rex12 commented Feb 20, 2013

Great work, thanks jQuery team! I read somewhere in the documentation that multiple panels can be opened (programmatically) at the same time. Now I do not find any info on how to open multiple panels, or keep already opened panel open while opening another, etc. In my case I need 2 panels open on left and right. Is it possible today? If not, are you planning to make it possible?

Member

jaspermdegroot commented Feb 20, 2013

@rex12

Thanks!

That info was in the 1.3 beta release but we removed it afterwards. When we started witing the code for the panel we made it possible to programmatically open two panels. When working on the CSS it became clear that we can't support it, because we use 3D transforms for smooth transitions and don't just set a left/right offset.
You can also imagine it would cause problems on screens less than 34em width (twice the panel width). So we are not planning on supporting it in a future version.
We forgot to remove the info from the docs before the beta release, sorry.

rex12 commented Feb 20, 2013

@ugomobi
Thanks for your response.

It would be wise to update de documentation to reflect that last and important decission. I spent no few hours struggling to find a way to make 2 panels to appear :s

Member

jaspermdegroot commented Jun 28, 2013

@mogarick

The documentation has been updated right after @rex12 reported it.

http://api.jquerymobile.com/panel/

"When using markup to control panels, you can only have a single panel open at once. Clicking a link to open a panel while one is already open will auto-close the first. This is done to keep the markup-only configuration simple."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment