I have a SideMenu page fragment in my app. On each and every page, I have a copy of this page fragment.
My intention was to create a SideMenu with openable SubMenus (only one sub menu could be open at a time), but I could not get it done to make the app "remember" the state of the SideMenu( like which SubMenu should be open, and which ones shouldn't), because on each site there is a different widget, so when in my code ( in my onClick events) I refer to the widget, I am not handling "a global SideMenu" but rather a specific copy of it, unique to that page.
Sadly, this took several hours of debugging to realize, I am defeated.
Is there anyway to place a page fragment on a page, so I can handle that widget on its own, not just it's copies?
Thanks in advance, I can try to specify more the question if it's needed.
I agree with #MarkusMalessa. You need to invoke the widget on every page and then apply whatever change on it. I am doing the samething on a project in which I intend to shrink and expand the sideMenu. To give you an idea, evertime I click a button on the side menu responsible for the logic, this is the code that's invoked:
var pages = app.pages._values;
pages.forEach(function(page){
var sideMenu = page.descendants.sideMenu1;
if(sideMenu){
if(widget.text === "chevron_right"){
sideMenu.getElement().style.width = "300px";
} else {
sideMenu.getElement().style.width = "60px";
}
}
});
That way every sideMenu widget inside each page that has it receive the same changes.
Related
This is a single page website with navigation consisting of anchor links to different sections of the page. When the navigation is clicked URL updates to ex.(.com/#photos) and makes the browser add as a new page for each anchor link clicked. This makes the user have to click back multiple times if they wanted to get back to a previous website. I would like to have at max 2 back button presses, 1 to go to top of the page, 2 to go to previous website. I am really at a loss on where to implement this code, or if it is even ideal to mess with how the browser acts to the user. My google-fu turned up very little information on this issue.
You can attach a function to window.onpopstate event and then check if window.history.length has changed. If it has not changed, probably it is the back button press.
Like this..
var prevHistoryLength = -1;
window.onpopstate = function(e){
if (prevHistoryLength == window.history.length)
document.location = document.referrer;
prevHistoryLength = window.history.length;
}
I am trying to create an anchor in order to be able to build such an URL :
www.mysite.com/#myAnchor
which should automatically link to the div wanted, even from an exterior website.
However, when I am trying to implement it, here is the adresse to which I am redirected : www.mysite.com/#/myAnchor
So far, I tested different things such as :
<a name="myAnchor" />
<a name="#myAnchor"></a>
<a name="myAnchor"></a>
<span class="anchor " id="myAnchor"></span>
But nothing seems to work.
However when I am on the page I can change the url to go there but from "outside" this just redirects to the top of the page.
Thanks for your help.
That most likely happens because the first anchor is done by the browser, and when the page loads for the first time I assume the content is not all loaded yet (using views?).
If that is the case, then you need to call the service $anchorScroll that angular provides somewhere in your code after the view has been loaded (on a ng-init maybe?). Something like
<a name="myAnchor" ng-init="loadScrollToAnchor()"></a>
And then in your controller, after injecting the service $anchorScroll.
var scrolled = true;
$scope.loadScrollToAnchor = function () {
if ( !scrolled ) {
$anchorScroll();
scrolled = true;
}
};
Update: The scrolled variable is there to make sure that the code is only executed once (at page load), and thus this code should reside in an application-wise controller and not a controller specific to a route or view. However, there are still some shortcomings to this approach that might need to be countered, like if the view that the user loads the page first has no ng-init calling the function, and then he moves to another view that does: the code will execute, and the user viewport will possibly be changed against the user's intents.
To solve it, I actually only had to add this line of code without anything else :
This is doing the trick.
I'm working on a application where I load a XAML page inside a usercontrol,
depending on which menu item was clicked.
After figuring out how to load in XAML page in a XAML page (using usercontrol), I'm running into the next problem: Navigation.
I added a picture to illustrate what I'm working on.
When you launch the app, you see the left state (state open), where the menu is presented and a little bit of the content on the right.
If you click the red button, the page scrolls to a "full screen" of the right state (state closed). This is still the same page, the MainPage.xaml, but with a new page loaded in the usercontrol. Let's say the loaded page is news, where you can select an article by clicking.
This all works great.
The problem is, when I try to use the navigationservice to see a detail of the news, the app fails. (it does work when I set the news page as start page, but it won't work inside the usercontrol).
I tried fixing this by the following code:
NewsDetail detailpage = new NewsDetail();
this.Content = detailpage;
Actually, this works.. but then I can no longer pass a querystring to load a certain article on the page.
Any ideas on how to fix this problem?
You can use a static variable in App.xaml.cs when querystrings become useless.
just declare a static variable of type say string in app.xaml.cs
public static string MyString;
just assign it a value before navigation
App.MyString="Hello";
And get this value where ever you want to get it.
string ss=App.MyString;
I have a phone page which navigates to another. Is there a way to prevent the fist page from getting into the backstack when navigating to the second?
I'd rather not remove the first page from the backstack in the code for the second page.
The most obvious way kind of works:
NavigationService.Navigate(new Uri(...));
NavigationService.RemoveBackEntry();
But it may fail - see submision problems described here.
If you were to remove the BackStack Entry on the second page (and thus disperse the knowledge of the first page behaviour in context of navigation), you would to that in OnNavigatedTo, which occurs after the navigation is completed and the entry is placed on the BackStack. PhoneApplicationPage similarly has OnNavigatedFrom method, which is also called after the navigation is completed (OnNavigatingFrom is called before navigation and allows cancelling). So first page could remove itself in the following way:
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
NavigationService.RemoveBackEntry();
}
However, this method is incomplete, as OnNavigatedFrom is called not only after a succesfull Navigate, but also after pressing any of the three device buttons or showing a Launcher or Chooser (from Microsoft.Phone.Task). In those cases current page will not be placed on the BackStack (I guess that's why the BackStack corrections are applied usually on other Pages). So to fix the above method you could check if the last entry is what it should be:
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
var entry = NavigationService.BackStack.FirstOrDefault();
if (entry != null && entry.Source.OriginalString.Contains(...))
{
NavigationService.RemoveBackEntry();
}
}
I have the same requirement when implementing a login page. Upon navigation to the authenticated area of the app, I want to remove the login page from the backstack.
To do this, I simply pop the stack after the call for the navigation out of the login view.
NavigationService.Navigate("/Page2.xaml");
NavigationService.RemoveBackEntry();
This doesn't require code in your Page2.xaml.
No, there is no way. Why won't you remove it if you don't want it to be there?
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.