I'd like to show the AppBar when a page fragment loads, but this code running in the ready function isn't working as expected:
function ready(element, options) {
var appBar = document.getElementById("appBar").winControl;
appBar.disabled = false;
appBar.show();
}
How do I show the AppBar when the page fragment loads?
Assuming you are creating the appbar correctly in the HTML file.
Then, in the ready method, you should first call
WinJS.UI.processAll(elements)
.then(function () {
var appbar = document.getElementById("appBar");
if (appbar) {
appbar.winControl.show();
}
});
According to MSDN documentation, processAll function "applies declarative control binding to all elements, starting at the specified root element." (i.e. turning all the html element into WinJS controls)
I've tried the following piece of code:
document.getElementById("appBar").winControl.show()
And it works as expected(app bar is shown on page load).
The same way also used at the msdn sample:
App bar sample
It seems that you have another problem(invalid controls on app bar or something else).
Could you please provide more details or even app sample?
If you get null error call WinJS.UI.processAll() in your initialization code.
WinJS.UI.processAll();
appBar.winControl.show();
HTML
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
Related
I have a .Net MAUI app that uses Shell TabBar for navigating. Besides navigating to various pages, some tabs should just execute some code without showing any content. As TabBar does not provide such a functionality, I used OnAppearing() method of a dummy empty page, and after my code call
Shell.Current.GoToAsync("..");
to return to the previous page. But for some reason, this does not work, and the empty page is still displayed. If I use some actual page, e.g.
Shell.Current.GoToAsync(nameof("SomePage"));
the navigation works as expected, and SomePage is displayed.
Why doesn't ".." work for me?
Here is the code I use:
public class Page1 : ContentPage
{
protected override void OnAppearing()
{
// Some code I need to execute
Shell.Current.GoToAsync("..");
}
}
I have a ListView that displays a list of Panels, one below the other. Every panel features a button (implemented via AjaxLink) that closes the panel and removes it from the list.
This is how the ListView is initalized and how the panels are created:
panelsList = new ArrayList<MyPanel>();
pnlContainer = new WebMarkupContainer("pnlContainer");
ListView<MyPanel> pnlItems = new ListView<MyPanel>("pnlItems", panelsList) {
#Override
protected void populateItem(final ListItem<MyPanel> item) {
item.add(item.getModelObject());
item.add(new AjaxLink<Void>("pnlClose") {
#Override
public void onClick(AjaxRequestTarget target) {
panelsList.remove(item.getModelObject());
target.add(pnlContainer); // repaint panel container
}
});
}
};
pnlContainer.setOutputMarkupId(true);
pnlContainer.add(pnlItems);
add(pnlContainer);
This works so far - the actions that trigger adding new panels (usually also AjaxLinks) do what they should and the new panel is added and displayed correctly. But I have problems getting the close button to fully work.
Please see the following steps:
1) I start the server and navigate to the main page. The ListView is initially populated with one panel.
Close-button-code of this panel:
<a wicket:id="pnlClose" id="pnlClose7" href="javascript:;">Close</a>
Searching the page code for pnlClose7 finds the following javascript code that makes the button work as expected:
Wicket.Ajax.ajax({"u":"./?0-1.IBehaviorListener.0-pnlContainer-pnlItems-0-pnlClose","e":"click","c":"pnlClose7"});;
Note: I do not press the button now, if i would, it would work as expected (thoroughly tested).
2) I trigger an action that opens a second panel. The panel is displayed below the first one as expected.
Close-button of the first panel:
<a wicket:id="pnlClose" id="pnlClosef" href="javascript:;">X</i></a>
Close-button of the second panel:
<a wicket:id="pnlClose" id="pnlClose10" href="javascript:;">X</i></a>
But now, neither searching for pnlClosef nor pnlClose10 finds some javascript code. The buttons (both!) do not work. I can still find the javascript code for pnlClose7.
3) I reload the page via pressing F5.
The button IDs change to pnlClose1a and pnlClose1b. Both IDs have javascript counterparts and work.
4) I press the first button (upper panel, ID pnlClose1a). The panel is closed as expected.
The remaining button's ID changes to pnlClose1c, again without a javascript counterpart. Javascript code for pnlClose1a and pnlClose1b is still present.
To make a long story short, the javascript handlers for my AjaxLinks seem to have shyness issues and only appear after I press F5 or reload the whole page in any other manner. I guess thats because repainting the pnlContainer changes the IDs of the current panels - but why is the linked javascript not updated at the same time? Is there anything I can change in my code to update the whole page without completely reloading it?
Wierd thing is that I am pretty sure this worked before... But I checked the whole class history and can't find any major change that would have triggered that. The ListView-code is mainly static since I added it.
I was had similiar problem. if you have any hardcoded javascript code in your page or panels html file (using <script> tag) remove it and set that js code in renderHead of your panel.
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.
I have implemented a fancybox which opens and loads ajax content without any problems. But when I load new ajax content into a div in the FancyBox using jquery I need to center the FancyBox on the screen again.
function refreshContent(url) {
$("#content").fadeOut("slow", function(){
$.fancybox.showLoading();
$("#content").load(url,false, function() {
$.fancybox.hideLoading()
$("#content").fadeIn("slow");
$.fancybox.reposition();
});
})
As you can see, I have tried with the reposition() method, but with no effect. The same applies to center()
What am I missing here?
I'm using Fancybox ver 2.0.5
Maybe is a little late but in fancy 2 there is a method:
$.fancybox.reposition();
You can see the other methods here:
http://fancyapps.com/fancybox/#docs
Regards
Probably need to put you reposition call inside the complete function of the fadeIn. Otherwise it gets called before the content is visible.
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.