asyraf9 / jquerymobile-splitview Goto Github PK

Hi,

We are using the asyraf9 / jquerymobile-splitview in our application. At the left side panel we have a jqm listview. At the right panel we are displaying some details about the items located at the left panel listview. We also have some buttons at the right panel which performs some actions on the item displayed at the right panel. Those buttons trigger some java script actions where we call some pages (there are actually ASP.NET MVC action url's) by using the "http post" method. The thing is that those "post" callPage invokations broke the listview "back" button functionality (you have to click the back button twice to go the listview previous level)

Any idea about what may be going wrong?

Thanks in advance for your help!

Not sure if anyone else experiences the same issue, but when I open http://asyraf9.github.com/jquerymobile-splitview/#badz on IPAD, and then refresh the page, I get space between left and right panels.

I traced it down to the following code in function splitView()

$main.addClass('ui-panel-right')
.width(function(){
return $(window).width()-$('div:jqmData(id="menu")').width();
});

On IPAD $(window).width() returns 768, so the math doesn't work.

I set width to 75% and it seem to work fine now (not sure if there's better solution)
$main.addClass('ui-panel-right').css('width','75%');

Also, if the page switches to landscape and menu is opened, menu panel is moved left 10px in function popover() .css($.mobile.menuBtnSide, '10px');

But when orientation changes to landscape, left position doesn't get reset. I fixed it by adding .css($.mobile.menuBtnSide, '0') in function splitView right before setting width

Hope this help someone...

BTW, thank you for the life saving widget. Out of all split view/multiview implementations, this is the most stable. And with the above 2 fixed, it's even better :-)

The page renders blank. Here is the javascript error message in IE8 on Win7:
Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET CLR 1.1.4322; InfoPath.2; MS-RTC LM 8; .NET4.0C; .NET4.0E) Timestamp: Wed, 31 Oct 2012 18:09:57 UTC Message: 'body' is null or not an object Line: 9221 Char: 7 Code: 0 URI: file:///path/to/splitview/jquery-1.7.1.js

In IE9, the error is:
SCRIPT5007: Unable to get value of the property 'scrollWidth': object is null or undefined
jquery-1.7.1.js, line 9221 character 7

Hello,

thanks for your work !

I have many links in both panels, which have to be loaded on "_top" like ..
Is there a way ?

meta tag "base" is not working.
data-context="_top" also not.

Thansk for your answer.

Tested it side by side with the unedited jquery mobile 1.2 + phonegap and I have a working split view

In jqm 1.2 deviceready is fired, using the split view it isn't.

Hi, I added a html5 video tag in the right column and it play succesfully, nevertheless if i make full screen with the video when I come back, the left column disappears. If I turn my ipad vertically and I turn it horizontally again, the right column come back. I would like to know how can i prevent this, or how can i make some view refresh to see the left column all the time.
Thankyou

Just wanted to check if anybody uses it with latest version of jQuery. For me it is not displaying anything on page when used with jQuery1.10 or 2.0. I did not test it on Mobile device but I have tested it on Chrome and Mozilla Firefox.

Struggling to figure this one out...

On IPAD, when page is in landscape mode and focus fall on an input or a textarea, the keyboard appears. When keyboard gets dismissed, the whole page resizes to 1/3 of it's normal size. Keyboard doesn't trigger window resize event, so not exactly sure why it happens.

Thanks

I have found that at times the content of the left < td > (SplitViewContainer_leftpagepanel) can cause it to be wider than its default width of 400px. I was able to overcome this by setting the width of its inner div (SplitViewContainer_leftcontainer) in the javascript file and leaving the width of the < td > unspecified.

Hi
I have to refresh the page to display the page correctly
my application has 2 pages the index page contain a link which navigate to the other page which contain the plugin.
BUT
This plugin works great if the the split view on the index page but if I have a link to navigate to another page I get this error "Cannot call method '_trigger' of undefined "
and when I'm added the page and the script on the other page and set the link data-rel="external"

Hi asyraf9,

I'm struggling on changing the orientation of splitview overlay to rtl.
Your assistance will be much appreciated.

Great project btw

after Form submit on the right side i see a left side Menü on the right side!

how can i fix this?

Hi,
first of all I would like to thank you for creating splitview.

I have noticed that switching to newest jquery mobile creates bad blink effect on right panel when animation ends. I have tested it with the demo - http://asyraf9.github.com/jquerymobile-splitview just by changing the line 11 from jquery.mobile.js into http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js

Can you help me with this problem?
I need some features from jquery mobile 1.3 - that are tables and input for files.

Hello asyraf9, I am using phonegap and the iPad simulator . When I click any menu item that has a second level the left column disappears. I am wondering how to fix this issue. Thank you for any direction.

hi!

< div data-role="fieldcontain">
< label for="select-choice-3" class="select">Your state:
< select name="select-choice-3" id="select-choice-3" data-native-menu="false">
< option value="AL">Alabama
< option value="AK">Alaska
< option value="AZ">Arizona
< option value="AR">Arkansas
...


page-dialog with options-list doesn't open, as on official jqm-demo..

I have pages in different html files.When i link a page to a panel both the panels gets refreshed and i have a flickering effect. When i click on a button in the left panel both the panel have a flickering effect.
This problem is only in landscape mode and works fine in browser but not on ipad or any phone.
Can u plx help me out with it asap.It will be of great help.