How do I determine the page location immediately? - angularjs

I have a main menu on my website for every page except the login page. In my html, I have:
<div ng-if="$root.location !== '/login'">
<mainmenu></mainmenu>
</div>
This works in general, except the main menu flashes when I load the login page. I suspect this is because the menu is shown, then the variable $root.location becomes /login, then the main menu disappears.
How do I do this so the main menu doesn't flash?

Related

Animate on $stateTransition (both exit and enter)

I have figured out how to make animations happen by using $stateChangeStart or $stateChangeSuccess in a controller or in my main apps $stateProvider but I can't get it to work as I intend to.
I would like to initiate a solid color bar that wipes over the screen and then wipes back the other direction showing the content. I imagine that when I click a menu link the animation begins(wiping over the current page), once at full-width -> the static page or data-binded page/controller is loaded and rendered and then once that is complete the animation swipes back the other way revealing the new page content.
I need help understanding how to make sure that every time a link is clicked: the first animation happens/ page is loaded/ and the next page revealed.

Hide/unhide navigation buttons

In my AngularJS application I am using a panel that is divided into the header, the body and the footer. The start page contains a few buttons that lead to subsequent pages. In the footer I would like to have a "back button" on the left side and a "next button" on the right side that lead to the next/previous page. How can I achive that the buttons are only displayed where they make sense? Example: Buttons are not shown on the start page, a selection is made and a differnt page is loaded, the "back button" should be displayed in the footer. "Back button" is clicked, application goes back to the previous page (the main screen) and the "back button" is hidden.

Hide slide-menu/nav bar

Still learning ionic. I have a slide menu integrated into the app. The problem that I have is that I want to completely hide ionic nav bar and menu on top for my login view. I tried using ng-show to hide the nav bar based on whether or not current user is authenticated, but all it does is hide the content in the bar, but leaves empty nav bar container on top of the page.
I also tried using ng-if instead of ng-show, which does make the bar disappear completely, but when I need it to become visible again, the code produces an error: Cannot read property 'outerHtml' of null. I guess because the DOM object for the menu is not there anymore.
What is the best way to address this? Am I on the right path or is there a better way to show/hide

CakePHP + JQM + Popup Widget = Why the appended 'placeholder'and empty content?

I'm about to kill someone and I'm thinking of the JQM team at the moment. Sigh!
So, clearly I'm doing something stupid.
I've populated a JQM popup div with some info from my database and on first page load, clicking the button with the popup's id as HREF works great!
When I submit the form and return to the same page, it doesn't work. Inspecting the element I see that the ID of the popup is appended with '-placeholder' and the div simply has a comment in it.
Problem: On page reload, I can't click on the HREF that links to the popup (or I can but nothing happens - obviously because the markup has vanished).
Here's the view code of 1. the link to the popup div and 2. the actual pop up div on first and second page load.
Linking to popup:
Browse Database
Original popup div element
<div id="reqform_search_sicnaic" data-role="popup">
<div data-role="header" data-theme="b">
Random Header
</div>
<div data-role="content">
Random content
</div>
</div>
Popup div after form submission / second page load
<div style="display: none;" id="reqform_search_sicnaic-placeholder"><!-- placeholder for reqform_search_sicnaic --></div>
Obviously, I can't open the dialog on page load. :(

Redirect from iframe to main window

I have an iframe which when you press a button goes to the main page
self.redirect('/')
but the problem is that the content of the main page is shown inside the iframe, and I want to show it in the main window (not in the iframe)
How can we get that?
If I understand your question. You like to redirect to your mainpage and remove the iframe.
In your iframe You have to use a button to initiate a redirect and some javascript:
<input value="ReDirect" id="button" onclick="parent.parent.location.href ='... url ....';">
See also this question : How to dynamically close an iframe after form submit in JavaScript

Resources