After countless days of seeking help on this platform, I am finally making my first post here to express my gratitude for all the support I have received.
I am diving into the world of mobile app development with my very first project - a calculator/converter app using PhoneGap (jquery + html). My background is primarily in .NET development with a few years of experience under my belt.
My current challenge involves hiding the menu after clicking an item. Despite trying different methods like .toggle() and .slideToggle(), none seemed to work perfectly for me.
Once I make a selection from the menu, everything functions correctly both in the browser and on PhoneGap. However, after execution, I notice that I need to click somewhere else on the page as if the focus has shifted elsewhere. I suspected it could be related to &ui-state=dialog, but even setting changeHash to false didn't resolve this behavior.
I've scoured through various threads for solutions without much success. Any assistance or guidance would be greatly appreciated :)
<a href="#hamburgerPopup" id="burgerLogo" data-rel="popup" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false">
<img src="hamburger.png" style="width:50%;" />
</a>
<div data-role="popup" id="hamburgerPopup" data-theme="a" >
<ul data-role="listview" data-inset="true">
<li data-icon="false"><a href="#" id="calc" onclick="GoToCalc()">Calc Weight</a></li>
<li data-icon="false"><a href="#" id="faq" onclick="GoToFAQ()">FAQ's</a></li>
</ul>
</div>
and the jquery
$('#burgerLogo').on('click', function () {
$('#hamburgerPopup ul').css("display", "block");
});
function GoToCalc() {
$("#about").hide();
$("#divCalculator").show();
}
function GoToFAQ() {
$("#about").show();
$("#divCalculator").hide();
}
$(function () {
$("#hamburgerPopup li").click(function () {
$('#hamburgerPopup ul').css("display", "none");
//$("#logo").click(); - I tried this to simulate a click, does nothing
//$('#hamburgerPopup').trigger("click");
//$("#hamburgerPopup").hide();
})
});