Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 64
Registered: ‎12-29-2012
My Device: None right now
My Carrier: BSNL

Sliding page on switching tab in Tab Overflow Menu

[ Edited ]

I am using BB10 jQuery theme. I am using the latest versions of this theme, ripple emulator and Chrome browser.

I have created a tab overflow menu by using code from actionbar_sample.html from this page https://github.com/blackberry/jQueryMobile-BB10-Theme/tree/master/kitchenSink

I have added two tabs by using this code :

For Panel:

 

<div data-role="panel" id="left" data-dark-modal="true" data-position="left" data-display="reveal" data-theme="a" class="bb10-panel">
				<ul data-role="listview" data-theme="a">
					<li id="o1-p" class="inBar ui-btn-active"><a href="#">Home</a></li>
					 <li id="o2-p" class="inBar"><a href="#page2">Page 2</a></li>
				</ul>
</div>

 

For Tab Overflow Menu:

 

<div id="action-bar-area" data-role="actionbar">
				<a id="tover" data-role="tab-overflow" href="#left"></a>
       </div>

 

The problem is when I select the tab to go to page 2, the panel does not close and the page changes with a fade transition. How do I change this behavior?

 

The correct behavior should be this: touch on a tab -> the page changes to page2 with slide animation.

You can see the correct behavior from this video

Developer
Posts: 64
Registered: ‎12-29-2012
My Device: None right now
My Carrier: BSNL

Re: Sliding page on switching tab in Tab Overflow Menu

[ Edited ]

Update: I tried changing the fallback transition to slide in BlackBerry-JQM-all.js

Since there are two pages in my html file page1 and page2, I want to see the slide animation when swtching to each page from their respective tabs in Tab Overflow Menu.

But there still occurs a problem. Selecting Page2 opens it with sliding effect without any problem. But when I switch to Page1 from Page2, the sliding animation works but the tab button on Page1 remains hidden till animation is complete and then appears.

I have made a demo here.

Can you tell me why transition fallbacks even when Google Chrome supports 3d transform?

Original code:

(function($) {
  $(document).bind("mobileinit", function(){
	$.mobile.buttonMarkup.hoverDelay = 0;

	// Use the simultaneous transitions handler for slide transitions
	$.mobile.transitionHandlers.cover = $.mobile.transitionHandlers.simultaneous;
	// Set the slide transitions's fallback to "fade"
	$.mobile.transitionFallbacks.cover = "fade";
	$.mobile.defaultPageTransition = "cover";
	$.mobile.listview.prototype.options.icon = false;
	$.mobile.selectmenu.prototype.options.nativeMenu = false;
	$.mobile.fixedtoolbar.prototype.options.tapToggle = false;

  });
})(jQuery);

 Changed Code:

(function($) {
  $(document).bind("mobileinit", function(){
	$.mobile.buttonMarkup.hoverDelay = 0;


	$.mobile.transitionHandlers.fade= $.mobile.transitionHandlers.simultaneous;

	$.mobile.transitionFallbacks.fade= "slide";
	$.mobile.defaultPageTransition = "fade";
	$.mobile.listview.prototype.options.icon = false;
	$.mobile.selectmenu.prototype.options.nativeMenu = false;
	$.mobile.fixedtoolbar.prototype.options.tapToggle = false;

  });
})(jQuery);

 

Highlighted
Developer
Posts: 64
Registered: ‎12-29-2012
My Device: None right now
My Carrier: BSNL

Re: Sliding page on switching tab in Tab Overflow Menu

[ Edited ]

Update: Changing transition effect with data-transition="slide" does not work on anything. I am only able to see a fade animation. What can be the reason?