I have a specific page that I want full screen, so I hide the top bar and have a custom back button that calls ionicNavBarDelegate.back(), it does nothing. I even tried to call the parent controllers ionicNavBarDelegate.back() with an event, with no success. I can make it go back using javascript but then the history gets all messed up. It's basically trying to have back button on pages with out a top menu. Any idea? Thanks
Related
I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO
I'm currently trying to figure out the best way of making a ui-view slide out of the header when it is triggered.
Basically I have navigation buttons and a view appears when they are clicked. It is the same view for each, but with different content. I am using NgAnimate. My problems are: 1) The animation is triggered each time the button is clicked and I only want it to be triggered when the view is NOT active. 2) I want to make it slide out and push the other content down and I'm struggling with that right now. Any tips or plnkr's would be greatly appreciated.
EDIT: I have created a small plnkr to show what I'm trying to do here:
http://plnkr.co/edit/5eW6aN?p=preview
When the user clicks on link 1, 2 or 3, I want the grey box to slide out but ONLY if it is not visible. If it is visible, I just want the content to change without it sliding out.
If possible, when the user clicks "Home", I want the grey box to slide back in too.
Edit 2: added animation - still not working: http://plnkr.co/edit/5eW6aN?p=preview
I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks
I have a jquerymobile template being implemented which will further be used for phonegap deployment for devices - iphone and android phones. I have 11 Div's with data-role as "page". Each Page header has a Back button which should actually go back to its parent screen. At this moment, I am doing it with an anchor
Back
So when I click on back in my above example, it takes me to Loginpage. But is there something else that can be tried instead of anchor tag, which is actually failing in the following scenario?
flow a. Screen 1 -> Screen 3
flow b. Screen 2 -> Screen 3
In flow "a" -> When I click "Back" in Screen 3 it should go back to Screen 1
In flow "b" -> When I click "Back" in Screen 3 it should go back to Screen 2
My flow fails here on Screen 3 using an anchor, because am not able to get the navigation back to which screen I actually navigated from.
Waiting for some help. :)
it is simple.
See jQuery mobile documentation here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
"Back" button links section.
<a data-rel="back">Go Back</a>
Also, the button can be generated automatically in each page header by adding the following to the page div:
data-add-back-btn="true"
You can also make every page to show back button by default by adding the following to the code which is run after jQuery mobile is initialized:
$.mobile.page.prototype.options.addBackBtn = true;
This as well as a few more options, such as the default back button text can be found here:
http://jquerymobile.com/demos/1.2.1/docs/toolbars/docs-headers.html
Section Adding Back buttons
Try setting data-rel="back"
Refer the documentation
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
You can also try something like this:
$('.anchors_you_need_to_capture').click(function(e){
history.pushState(e.target.href);
}
It adds a the clicked page to the history so when you click back it will go to the last clicked linked.
I am making use of the Lavalamp plugin from http://nixboxdesigns.com/projects/jquery-lavalamp/ and everything seems to be working fine except that there is a little quirk when using the back button.
For example:
If you are starting off from the home page, the hover is underneath the home menu.
Click on a new menu item, the hover appears underneath it
Click on the browser's back button, and the hover does not return to the home menu item, it stays at the previously clicked one.
I need to find a way to call the Lavalamp function when the back button is being triggered.
Hope to get some help here
It sounds like the OnBeforeUnload event is what you are looking for.