Languages

Menu
Sites
Language
Open Context Popup Hardware Menu Button Press

I am trying to open a context popup menu when the menu button is pressed. What happens now is that the popup quickly appears and then disappears. Any ideas?  Thanks in advance.

HTML Code

<div data-role="page" id="upcoming_page">
	<div class="header" data-role="header" data-position="fixed">
	</div>
	<!-- /header -->

	<div class="content" data-role="content" data-scroll="y">
	</div>
	<!-- /content -->

	<div data-role="footer" data-id="upcoming_page_footer">
		<a id="upcoming_page_settings_menu_btn" href="#upcoming_page_settings_menu" data-role="button"
			data-icon="naviframe-more" data-rel="popup"></a>
		<div id="upcoming_page_settings_menu" data-role="popup">
			<ul data-role="listview">
				<li><a href="#settings_general_page">Settings</a></li>
			</ul>
		</div>
	</div>
	<!-- /footer -->
</div>

Javascript Code:

$(document).on('tizenhwkey', function(e) {
    if (e.originalEvent.keyName === "menu") {
		$("#upcoming_page_settings_menu_btn").click();
	}
});

 

List

Responses

12 Replies
Marco Buettner

I got the same problem. I resolved by using timeout of 20ms :)

Johnny Moralez

Thank you for your feedback Macro. I'm interested in this solution. How did you implement this timeout? Could you provide some code examples?

talari praveen kumar

Hi

try this 

   $('#upcoming_page_settings_menu_btn').popupwindow();

  $('#upcoming_page_settings_menu_btn').popupwindow('open');

Johnny Moralez

Thank you Talari. This did work and the settings menu did appear. However, it is different from the context menu popup that appears when pressing the menu button directly. It may be good as a last resort. Thanks again.

Maksym

Try to add class="ui-ctxpopup-optionmenu" to your popup

Johnny Moralez

Hello and thank you for your reply. I tried your suggestion, but still get the flashing menu where it appears and disappears quickly.

<div data-role="footer" data-id="upcoming_page_footer">
	<a id="upcoming_page_settings_menu_btn" href="#upcoming_page_settings_menu" data-role="button"
		data-icon="naviframe-more" data-rel="popup"></a>
	<div class="ui-ctxpopup-optionmenu" id="upcoming_page_settings_menu" data-role="popup">
		<ul data-role="listview">
			<li><a href="#settings_general_page">Settings</a></li>
		</ul>
	</div>
</div>

 

Maksym

Sorry, I didn't get that you want to open popup via upcoming_page_settings_menu_btn button.
Actually you do not need this menu button, the same as back button at all. You can handle this actions using tizenhwkey.

konduri sai swathi

Hi,

Try the below code :

<div id="navi" data-role="popup" class="ui-ctxpopup-optionmenu">
    			<ul data-role="listview">
					<li><a href="#" data-rel="back">Call</a></li>
					<li><a href="#" data-rel="back">Message</a></li>
					<li><a href="#" data-rel="back">Settings</a></li>
				</ul>   
</div>

<script>
		$(window).on("tizenhwkey", function(e) {
			if (e.originalEvent.keyName === "menu") {
					$("#navi").popup("open");
			} else if (e.originalEvent.keyName === "back") {
					window.history.back();
			}
		);
</script>

 

Johnny Moralez

Changing it to $(window) instead of $(document) fixed it! Thank you so much!

Marco Buettner

instead

$("#navi").popup("open");

you should use:

setTimeout('$("#navi").popup("open")', 20);
Sergey 
setTimeout('$("#navi").popup("open")', 0);

I always use 0.

Marco Buettner

The delay time is not very important.. More important is to use a timeout :) but it makes no different between 0 until 20 :)