frequent / multiview Goto Github PK

i use the JQM 1.2.0-rc2, and foud an issue in panelheight() function when calcualte the conents margin-top and margin-bottom:

in multiview.js line 1238:

                    ct.css({    "max-height": setH, 
                                "margin-top": blacklist == true ? glbH + lclH : 0, 
                                "margin-bottom": blacklist == true ? glbF + lclF  : 0
                            })
                    }

when the blacklist is false, the margin-top and margin-bottom value is set to 0, infact ,it should be lclH and lclF.

is right?

On my iPad scrolling the menu column, in many cases will not redraw the list. Moreover the browser will wait the scroll to stop before render the list again. Any suggestion on how to fix this?

Hi, I just experienced a bad behavior when I changed the width of a page.

You can test this with demo version. Here you can see a screenshot of the issue (tested it with Firefox and Safari).

http://cl.ly/1E0I2c451C3h3I0K3I2y

Any hints how to solve this?

Thanks in advance and thanks for your great framework! It is awesome!

best regards,

Fabian

Hello,

First of all thanks for the work on multiview, it looks really powerful and actively maintained, which is great. I really believe this functionality should go into the core of JQuery Mobile because it is so essential !

I'm having a real issue. I've started my code using the examples from : http://jquerymobile.com/test/docs/pages/page-dynamic.html before actually integrating with multiview, and all seemed to work fine.

Now I'm trying to get it to work with multiview but whenever I click a link I get a blank page. I've seen that maybe I should specify the pageContainer myself, so I've tried adding that. Right now here is the code I'm using :

    var pageSelector = urlObj.hash.replace(/\?.*$/, "");
    console.log('pageSelector=' + pageSelector + ' node=' + node);
    if (node) {

        if ($(pageSelector).length == 0) {
            console.log("showNodeDetails: unable to find page with selector " + pageSelector + ", aborting rendering !");
            return;
        }
        var $page = renderNode(pageSelector, node);

        // We don't want the data-url of the page we just modified
        // to be the url that shows up in the browser's location field,
        // so set the dataUrl option to the URL for the category
        // we just loaded.
        options.dataUrl = urlObj.href;
        options.pageContainer = $('div:jqmData(id="main")');

        // Now call changePage() and tell it to switch to
        // the page we just modified.
        if (!refresh) {
            console.log("showNodeDetails: Now changing page dynamically...options.pageContainer=" + options.pageContainer);
            $.mobile.changePage($page, options);
        }
    } else {
        console.log("No valid node for " + nodePath + " was found !");
    }

Despite specifying the pageContainer (and I checked by debugging that I to get a valid object), whenever I change the page it becomes completely blank, as if the pageContainer was being ignored or something.

I'd appreciate any help, especially since I have to demo this in two days and would love to give multiview a nice plug :)

Regards,
Serge Huber.

Hi.

I have another questions :-).
I want to fill a select dynamically with options. But I think there are some bugs yet.

Have a look at http://www.stokkers.mobi/jqm/multiview/demo_dialog.html and click on the select in the main page something seems to be currupted.

In my implementation I have no chance to set the options? Is that my fault?

Greetings

how can i make the Menu First column like split view?
mean menu is fix there so i can scroll menu itself and the other content on the otherside

like Issue #7, in fullscreen mode the main panel is small and want to utilize all the space the content so I don't use global footer. I can't seem to get the footer to be displayed in the menu panel like in splitview plugin. The footer always span like the global footer.

Hey. This isn't an "issue", per se, but more a question of how to accomplish something somewhat unique.

Using SplitView on an iPad with PhoneGap. Pretty standard layout and functionality so far.

I'm also using an HTML5 editor to create an editable area for the user. I would like this to be accessed like this:

User uses navigation and main panels to view content and information, like normal splitview. I want to place a control in the lower-right-hand corner that looks basically like a page-flag. Tapping this control will open a "drawer", i.e. a div outside the normal flow of navigation will slide into view, occupying the lower-half of the main panel's area. The main panel and navigation panel will both still be displayed when this extra panel is visible. Tapping this page flag again will hide the 'drawer' without disturbing the main or navigation panels.

Any ideas on how to accomplish this? Anything inside SplitView I can use that will make this easier?

Thank you!

Rubik

PS - Split View is AMAZING. Has totally saved my bacon on this project. Thank you so much for developing it and sharing it with the JQM community.

If i call twice this changepage function

$.mobile.changePage('#side_list', { pageContainer: $('div:jqmData(id="menu")') });

the back button will switch the panel to a blank page.

Hi, Frequent.

Thanks again, for your help, and for producing multiview, it's still in the works for our project, and for a separate project of mine sometime after this one.

We're having an issue to do with mathml, and, separately but still importantly, failure of a script called MathJax to run (or even get loaded into the DOM, from what I can see), when it sits in an external page loaded into the main view of a splitview.

I've tried the MathJax folks, who pointed out that their code should be loaded into the body, which, even if I place the script inside of, it still fails to appear in the code.

Meanwhile, mathml placed inside a math block will render, and then vanish, I can see the rendering during the initial transition to the external page containing it but then it disappears entirely.

You can see examples of both problems in the test case I posted:

http://www.noahjscales.com/multiview/wrapperandstartpages.htm

, then navigate to the external page.

I'm not sure if I missed a spot in your extensive docs that described how to handle javascript or events used in external pages, to ensure code is loaded properly. I didn't find anything, but I probably missed it, if you want to just me to it, I'll figure it out from those.

Thanks again, you're busy after returning from work on another project, I know, so I recognize that you've a lot to do, and that your reply might have to wait.

-Noah

Hi Frequent,

First of all, great work with multiview!

This is more of a query rather than an issue. It is actually quite an easy answer,.,.

basically I want to have the main panel to dynamically load data from the selected list item from the menu panel
So far I have a menu that contains list like so...

<li><a href='#main_model?make=Honda" data-panel='main'>Honda</a></li>
<li><a href='#main_model?make=Toyota" data-panel='main'>Toyota</a></li>
<li><a href='#main_model?make=Suzuki" data-panel='main'>Suzuki</a></li>
etc.

I would like it so whenever a person clicks on one of these links, it would update the main panel.

So far I can get the page to load the first time... however whenever a person would click on another item on the menu,
the script doesn't detect a page change as it's calling the same id "main-model".

So my question is how can I detect if a user has clicked on a menu item to trigger a page change?

and would it be better to parse the data through something like data-id
<li><a href='#main_model" data-id="Honda" data-panel='main'>Honda</a></li>
<li><a href='#main_model" data-id="Toyota" data-panel='main'>Toyota</a></li>
<li><a href='#main_model" data-id="Suzuki" data-panel='main'>Suzuki</a></li>

thanks

Hello Sven,

First, thanks for working on this very promising plugin, exactly what I am needing for a mobile project I'm working on.

Q1.
I noticed that although the initial width parameters for the left menu panel are set as options, they are also used inline in the jQ code. I tried to change them to other values (e.g. 33%, 320px), but the margin-left for the right panel is then not computed correctly (it should be set to the computed width of the left panel).

Q2.
I also noticed that several methods are currently commented out, like checkWidth(), splitView(), popupBtn()... Is this intentional? Are they no longer required or are they work in progress?

Q3.
I also noticed that you have included a version of ScrollView(). Does this mean that MultiView user's should not include the current standalone version of ScrollView?

Thanks!

Peter

I have had trouble with a different splitview plugin (https://github.com/asyraf9/jquery-mobile/#readme) working with the PhotoSwipe plugin. So, before I go wasting another day trying to get it to work, I was wondering if anyone has used this for a split view with photoswipe gallery already.

Hi, Frequent, thanks for an awesome plugin, I'm integrating multiview into a project requiring a straightforward splitview with ability to data-switch (hide the menu). I don't have mid, but would like to integrate it, it's perfect for our project.

For the menu I have:

<div data-wrapper="true" data-role="page" data-switchable="true" data-scrollMode="true" />
<div data-role="panel" data-id="menu" data-panel="menu">
<div data-role="page" id="contents" data-show="first">
    <div data-role="header"  data-theme="b">
        <h1>Contents</h1>
    </div>
    <div data-role="content"  data-theme="c">
        <ul data-role="listview">
            <li><a href="#menu_page" data-panel="menu">Submenu</a></li>
                     </ul>
.
.
.
<div data-role="page" id="week11">
    <div data-role="header" data-theme="b">
        <h1>Submenu</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a  data-panel="main" href="main1.html"  data-icon="arrow-r" data-iconpos="right">A Page in the Main panel</a></li>
            <li><a  data-panel="main" href="main2.html"  data-icon="arrow-r" data-iconpos="right">Another Main panel page</a></li>
                   </ul>
.
.
.

and for the main section

<div data-role="panel" data-id="main" data-panel="main">
<div data-role="page" id="main_first" data-show="first">
    <div data-role="header" data-position="fixed" data-theme="b"> <a href="#"  data-icon="home" data-iconpos="notext">Home</a>
        <h1>Main</h1>
        <div class="headWrapRight ui-btn-right">
            <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div"></div>
        </div>
    </div>
    <div data-role="content">
        <p> this is the starting content section of the page</p>
    </div>
</div>
</div>

The behavior I'm seeing is that it works initially, and then fails in desktop test in FF 14 on Win 7. I am seeing, both with my code, and the example code online, back buttons appearing on the left underneath the menu toggle buttons in the header of pages contained in the main panel. The pages loaded into the main panel by the submenu links in the menu panel are regular JQM pages containing one div with data-role="page" each.

Ideally, the main panel section will be navigable using a separate script-generated navigation (previously working fine), dropped into the local page header of external pages, but without a back button created for the main page. Adding data-add-back-btn="false" to the main pages has no effect on the back button created by the multiview js (named after the title of the page in teh prior history).

How can I turn off that navigation feature of a labeled back button in the main panel?

Also, main2.html navigated to from splitview.html#submenu shows main2.html loaded into the main panel. However, a browser refresh only shows me main2.html in the browser, the multiview wrapper container is gone.However, browser refresh with the original splitview page "splitview.html#submenu" brings up the proper submenu visible in the menu panel.

Is there a way to avoid browser refresh causing this problem of loading a file intended to appear inside the main panel?

Thanks for your help, Frequent, and any advice or direction you can give me on better using your powerful plug-in.

Hi Frequent,

For navigation between the panels, I used $.mobile.changePage and the syntax as mentioned like:

$.mobile.changePage('#page', {pageContainer: $('div:jqmData(id="your-panel-name")') });

Here, as per the documentation, it says data-panel="your-panel-name". Where should this data-panel="your-panel-name" be provided?? Because the data-panel takes Menu|Mid|Main|Popover values.

Should this data-panel="your-panel-name" be provided on the anchor tag like this:

<a href="javascript:void(0)" data-panel="menu1" onclick="navTo('menu1');">Menu 1</a>

where navTo is a custom function as below:

function navTo(pageId) {
var id = ''div:jqmData(id="menu1")'';
if (pageId == 'menu2') {
id = ''div:jqmData(id="menu2")'';
} else if (pageId == 'menu3') {
id = ''div:jqmData(id="menu3")'';
} else if (pageId == 'menu4') {
id = ''div:jqmData(id="menu4")'';
}
$.mobile.changePage('#' + pageId, {pageContainer: $(id)});
}

After doing this, the navigation was unsuccessfull.

Here is my sample code (have just pasted the body part of the html):

<body>
<!-- wrapper -->
<div data-role="page" id="container" data-wrapper="true">
<!--- panel --->
<div data-role="panel" data-id="menu" data-panel="menu">
<div data-role="page" id="menu_first" data-show="first">
<div data-role="header" data-position="inline" data-theme="b">
<a href="javascript:void(0)" data-icon="star" iconpos="right">Sync</a>
<h1>Menu</h1>
<a href="javascript:void(0)" data-iconpos="notext" data-icon="gear" iconpos="right">Settings</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="javascript:void(0)" data-panel="menu1" onclick="navTo('menu1');">Menu 1</a></li>
<li><a href="javascript:void(0)" data-panel="menu2" onclick="navTo('menu2');">Menu 2</a></li>
<li><a href="javascript:void(0)" data-panel="menu3" onclick="navTo('menu3');">Menu 3</a></li>
<li><a href="javascript:void(0)" data-panel="menu4" onclick="navTo('menu4');">Menu 4</a></li>
</ul>
</div><!-- /content -->
</div>
</div>
<!--- panel --->
<div data-role="panel" data-id="main" id="main" data-panel="main">
<div data-role="page" id="menu1" data-show="first">
<div data-role="header" data-position="inline" data-theme="b">
<a href="javascript:void(0)" data-icon="star" iconpos="right">Done</a>
<h1>Contents</h1>
<a href="javascript:void(0)" data-iconpos="notext" data-icon="gear" iconpos="right">New</a>
</div>
<div data-role="content">
Menu 1 Contents
</div>
</div>
<div data-role="page" id="menu2">
<div data-role="header" data-position="inline" data-theme="b">
<a href="javascript:void(0)" data-icon="star" iconpos="right">Done</a>
<h1>Contents</h1>
<a href="javascript:void(0)" data-iconpos="notext" data-icon="gear" iconpos="right">New</a>
</div>
<div data-role="content">
Menu 2 Contents
</div>
</div>
<div data-role="page" id="menu3">
<div data-role="header" data-position="inline" data-theme="b">
<a href="javascript:void(0)" data-icon="star" iconpos="right">Done</a>
<h1>Contents</h1>
<a href="javascript:void(0)" data-iconpos="notext" data-icon="gear" iconpos="right">New</a>
</div>
<div data-role="content">
Menu 3 Contents
</div>
</div>
<div data-role="page" id="menu4">
<div data-role="header" data-position="inline" data-theme="b">
<a href="javascript:void(0)" data-icon="star" iconpos="right">Done</a>
<h1>Contents</h1>
<a href="javascript:void(0)" data-iconpos="notext" data-icon="gear" iconpos="right">New</a>
</div>
<div data-role="content">
Menu 4 Contents
</div>
</div>
</div>
</div>
</body>

Could you please advise me on this?

Thanks,
Balaji.S.N

Hi,
The multiview plugin looks VERY promising to support my need of different layouts and behaviors based on the available screen size.

However, I cannot seem to see the demo render on any of my devices. The plain html quickly display an unformatted menu, then all goes to a light grey but otherwise empty page. http://www.stokkers.mobi/jqm/multiview/demo.html, from the readme.md on github.

It works on non of my android based cells or tablet using stock Android (WebKit) browser on my cell, stock browser or Chrome browser on my Acer tablet (Ice Cream Sandwich). BTW it doesn't render on my Windows PC either (not on IE8, nor on Chrome).

JQM 1.1.0 otherwise works on all those browsers.

I'd bet it is a trivial test that fails and prevent to render on the current demo page.

Googling a bit, i found http://www.stokkers.mobi/valuables/multiview/show/index.html which is workable page. Is it current?

Or is this (http://www.stokkers.mobi/jqm/multiview/test/fix_triplePop.html) a better demo? It looks awesome in functionality.

Thanks for pointing me to the most recent working demo.

Regards.

Hi.
Is it possible to create a menu-wide footer for a menu with 3 submenus/pages, so that you can switch the menu page by clicking on a link in the footer?
Something like:

Hi, love multiview.. hope to see it fully fleshed out.

When trying, I turned my iPad to Portait and I get a large white swatch running on left side, turning back to Landscape produces more white space. I can provide screen shot if needed.

Thanks for al your work!
Dave

how can i hide the mid menu for the 1st load?

Hi frequent

if you add several selects, for example when u have a form, no matter if it's in the menu or in the main, when you start playing with them, the page crashes. I've just used your demo page http://www.stokkers.mobi/jqm/multiview/demo_dialog.html and copied the select u already have there several times.

Thanks in advance.

Thanks for this plug in. It's a very fundamental feature that is missing in jQM.

I am having some problems making the links work at all. I have copied the code from the sample, which works fine, but if, for example, I want to add a link to the second page in main, this is how I am trying to do it:

<a href="#main_second" data-panel="main">Link to page two</a>

But this doesn't work.

I am using the version for jQM 1.1.0. Thanks for your help!

Media query works only once you narrowing the screen. It doesn't work once you (ex.) switch the tablet to landscape.

I'm using multiview and have menu and main panels (no mid). On mobile (fullscreen) mode how do I default to menu instead of main? I want my users to land on the menu (search) panel first because main is the search results and it's always empty on initial visit. Is this possible? A workaround now is I populate the same page from menu into main but don't like the look in splitscreen mode. Thanks in advance.

Hi,
first of all thank you for your great work and for your help, I'm trying to display a fullscreen page and then changePage to a different .html page, splitted in a 'menu' and a 'main', this one contain a dinamically generated listview.
The following step would be changePage() to a 3rd .html, in wich the main content is dynamically generated.

My code should appear like this: in the page1.html I got a

  div data-role="page" id="foo" data-wrapper="true">
     div data-role="panel" data-id="foo-main-panel" data-panel="main">
         div data-role="page" id="foo-main" data-show="first">
           

In this way the content doesn't appear splitted, then I call a $.mobile.changePage( "page2.html" ); and my page2.html will be like this:

 div data-role="page" id="foo2" data-wrapper="true">
     div data-role="panel" data-id="foo2-menu-panel" data-panel="menu">
         div data-role="page" id=foo2-menu" data-show="first">
             
         /div>  
     /div>
    div data-role="panel" data-id="foo2-main-panel" data-panel="main">
        div data-role="page" id="foo2-main" data-show="first">
             
        /div>
    /div>
 /div>

The page will be splitted and the listview correctly loaded. From the link in the listview I call $.mobile.changePage( "page3.html", {pageContainer: $('div:jqmData(id="foo3-main-panel")') } );
My page3.html code should be like this:

 div data-role="page" id="foo3" data-wrapper="true">
     div data-role="panel" data-id="foo3-menu-panel" data-panel="menu">
         div data-role="page" id=foo3-menu" data-show="first">
             
         /div>  
    /div>
    div data-role="panel" data-id="foo3-main-panel" data-panel="main">
         div data-role="page" id="foo3-main" data-show="first">
             

The result is a blank page, the error displayed is data.fromPage is undefined.
I would understand if the approach is correct. My purpose is to load the main content from foo3.html in the right panel, also want to understand how I can control menu panel, in either case I wanted to keep menu foo2.html or loading the one from foo3.html.
What is the proper way to control that?
Thanks in advance and keep with it

"All other pages can be loaded in externally, so you can start with a multiview-shell and load pages as you need."

How does, for example, external.html (as opposed to #interal) need to be structured to simply load in the main panel keeping the menu panel intact? External.html doesn't need to have the html structure on index.html with the menu structure etc right?

How does the link to external.html in index.html need to be constructed (with a data-panel="main", data-context, etc)?

Hey Hi,
I am uses your multiview plugin for popover. Can you please guide me how can I show or hide popover in JavaScript. and Does your recent changes includes any fixes for popover?

I'm going to release an app in a couple of week and looking for a stable combination. I don't need many of the features, just splitview with scroll on right panel, 2 panels only in landscape, left pane on a popover in portrait mode.

Hi Sven,
i've a problem with your jqm multiview controller.
I'm using a webserver with the defined Port '8000' and if i click on a link in the menu panel, nothing happens. There is just a message fired in firebug ("Syntax error, unrecognized expression: 8000").
If i load the page on the local storage, it still works fine.

Do you have some ideas?

Thanks for your help
best regards
Michael

Please update to latest JQM 1.2.0 (beta) and/or describe your patches to JQM in detail so we can patch it on our own.

Please add an option to prevent creating/insering back buttons automatically.

I'm experimenting an issue with dialogs.

Declaring, opening and working on them is fine but the moment I close them a phantom dialog (div) remains that blocks buttons and links.

My multiview configuration is very simple, just a menu panel and a main panel (and using scrollview for scrolling lists) and this issue is being baffling me for some time, so, I'm wondering if dialogs are not supported, declaring them is different from vanilla jquery mobile or is it an issue within multiview that could be resolved in the future.

Thanks for your help and excellent work with multiview, I love it.

Hi frequent,

The doc says "Popovers can be any size...". Where and how to achieve this? I would like to have my popovers in different sizes. Thanks.

Strange behavior I haven't been able to figure out.

In the navigation panel, there is a UL containing two LI. Each LI has a UL within it to create the tiered navigation structure. This works as intended just fine.

When I open the app and tap on one of the top-level LI, its "sub-menu" slides into view with a back-button that returns me to the main list. When I tap on one of the top-level LI again, either the same LI or a different LI, that LIs "sub-menu" appears BUT there is no back button!

Any ideas on what I have going on that could be causing this?

Thank you!!!

Garrett Rohde
Atlanta, Georgia

i have set data-scrollmode="overthrow" to my demo file.... below link is with the old js file which is able to scroll the menu n mid panel.

http://g2o.com.my/mobi

below this link which is using today new update .. on the js ... but it doesn't able to scroll the menu and mid panel.
http://g2o.com.my/mobi2

Hi.

Is it possible to hide the text for the automatically inserted back buttons on the main panel header?

Greetings

I'm using Template Toolkit for my HTML pages. For instance I have these templates
(note: I remove the tailing > tags to show on this comment)

header.tmpl

wrapper page
menu panel
main panel

ftooter.tmpl

</ body
</ html

By default main.tmpl loads the header.tmpl and footer.tmpl and all is fine. JQM theme and everything else looks just fine. I inspected the HTML source via a browser and there is no missing components.

However, on the search menu I have search index link say (href="?cmd=browse&s=A") which loads search.tmpl and this template has the same multiview layout requirement as main.tmpl (wrapper, menu and main panel). The search results returns successfully but I cannot use the custom jquery script here until I physically hit the browser refresh button.

The custom jquery script simply allows the user to Check All and Clear All the items from a form in listview with checkbox. The script works fine when refresh the page on demand. Any idea how to achieve this with JQM MultiView? Thanks a lot in advance.

I love your currently implementation. Do you have any plans to port it to JQM 1.1?

Here is the error i get:

Uncaught TypeError: Cannot call method '_trigger' of undefined jquery.mobile-1.1.1.multiview.js:2835
transitionPages jquery.mobile-1.1.1.multiview.js:2835
$.mobile.changePage jquery.mobile-1.1.1.multiview.js:3477
$.mobile._registerInternalEvents.$.mobile._handleHashChange jquery.mobile-1.1.1.multiview.js:3821
$.extend.onPopState jquery.mobile-1.1.1.multiview.js:3955
f.event.dispatch jquery-1.7.1.min.js:3
f.event.add.h.handle.i jquery-1.7.1.min.js:3

Hey I tried suggested approach in previous issue thread. But It still not working. can you please suggest when showPanel() and hidePanel() function going to available.

Hello, I'm testing tour amazing plugin but i have some strange issues with the bottom bar. It keeps flashing and disappearing.
I noticed this strange behaviour also on your demo page.

Btw I run it on an iPad 1st gen.

Regards.

Hi

Is it possible to have a right panel as well as a left panel - so instead of menu, mid, main, the "mid" panel would be on the right - menu, main, mid?

Also, is it possible to change the name of the toggles for the "main" and "mid" panels when they appear at the top of "main"?

Thanks!

I'm experiencing this strange behavior. Say I have two pages, index.html and search.html. Each page has two panels, menu and main. Both have unique id in wrapper. The problem is when I click a link from index.html's menu to load search.html?s=A it shows 3 panels. I inspected the html source and it looks just fine. How do I get rid of the mid panel?

Hi,
I have followed your steps and try to implement the multiview plugin but at the start of the page load I am getting error at line number 8546 "this.element is undefined". Please guide me to resolve this error.

Hi,

It's not an issue, but i have tried to do a changePage programatically to a panel page and I can't get it work although it works for a link that includes data-target="main" :

$.mobile.changePage( $("#ProductOptions"),
{
pageContainer: $("#main"),
changeHash: true,
reverse: true,
transition: "flip"
});

Any suggestions?

Thanks in advance!!!

I downloaded your project and used the DemoSplitview.html.
On iPad, I have the splitview with menu and main div area. On iPhone I see the main area, but I want to see the menu area instead. How can I achieve this?

Also if I check this demo in a desktop web browser with full screen size, I see the slit view. Everything fine. Resizing the web browser and make the dimensions smaller, at some point, it only shows the main area, but I want to display the menu area (I think it is the same "problem" iPhone <-> iPad, described above).

Resizing the screen again and make it bigger again (not reloading the page), the split view does not fit anymore to the big screen size. The width of the main and menu area are fixed. Reloading the page in any size, the splitview fits well again. So is there a possibility to "refresh" the page while resizing, so the split view will looks after any resizing of the web browser well?