I want to create an app bar for my javascript app , as we know we see app bar when pressing right click , but I want it to be show by default , without right click. here is my html code
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<!-- Commands for show/hide -->
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'showHideButton', label:'Show/Hide Picker', icon:'view'}">
</button>
</div>
thank you
In your app startup code, get the appbar element and call "show()" on it.
// This is essentially what you need to do inside your app startup code
// After all the elements are loaded (After the WinJS.UI.processAll() I believe)
document.getElementById('appbar').show();
Related
having a really strange issue where components that are imported into app.js, do not refresh/reload when changes are made to them, but changes made to app.js are reflected in the simulator and my phone.
So if I change something in the navigation component, nothing happens. If i change the ActionBar title, the change is reflected but the first change made in navigation is still not.
That only takes effect if I reload the whole project.
<template>
<Page>
<ActionBar title="Welcome to the Shop"/>
<GridLayout columns="*" rows="*">
<Label class="message" :text="msg" col="0" row="0"/>
<navigation></navigation>
</GridLayout>
</Page>
</template>
<script>
import navigation from '#/components/navigation/Master.vue';
export default {
components: {
'navigation': navigation
},
data() {
return {
msg: 'Hello World! This is Big D.'
}
}
}
</script>
Actually Webpack used to watch for those changes in Nativescript and it hasn't become matured in re rendering the native elements. I face this problem often too! And I observed that this used to happen for people whose tutorials i used to watch even.
And if u add or remove any files at ur applications, u need to delete the platform folder and run the tns run command.
But I would recommend u to use Sidekick as it used HMR, it works better than the normal tns cli. It's lot more comfortable to use. here's the link SideKick
Click any of the CodePen links on (for example) this page: https://vuetifyjs.com/en/components/navigation-drawers
Notice the flash of unstyled content. How do you eliminate this?
I see it in my project when I do a hard refresh. I tried v-cloak but of course that did not work.
You need to first hide the app
<div id="app" hidden>...</div>
Then use mounted.nextTick to unhide the app once it is ready
new Vue({
el:'#app',
mounted:function(){this.$nextTick(function(){
this.$el.removeAttribute('hidden')
})}
});
I am currently developing a Xamarin.Forms application. I am using IconizePlugin. The app is tabbedPage based and on toolbar I'm trying to include icons for some actions.
This is whay I'm getting:
Icons are showing well and in Xamarin.iOS gets the click event, while it is not working in Xamarin.Droid.
I included the corresponding nugets and followed every steps told in documentation and can't archive this. Other iconize controls in Droid are working fine except the IconToolbarItem.
Please help!
The workaround I found was to declare de IconToolbarItem in the c# code instead of xaml. Although I don't know why it wasn't working while on xaml.
Declaring the item li
ToolbarItems.Add(new IconToolbarItem
{
Icon = "fa-plus",
IconColor = Color.White,
Command = new Command(this.addBono)
});
I open my Firefox extension window in a browser's tab. Is it possible to set a favicon for that tab?
The code from the Mozilla site does not work correctly - it produces the following error message: "Warning: XUL box for box element contained an inline link child, forcing all its children to be wrapped in a block". If this code is placed between 'window' tags it messes up all other controls on the window. If it is placed between 'box' tags, window controls are rendered fine, but still there is this error message. The problem was solved by adding the display property and setting it to "none".
The working code looks like this:
<window xmlns="mozilla.org/keymaster/gatekeeper/there.is.only.xul";
xmlns:html="w3.org/1999/xhtml">
<!-- Icon from chrome -->
<html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"
style="display:none"/>
Create this Folder structure inside the chrome folder
\icons\default
if your window id is mainwindow create a file named mainwindow.ico or mainwindow.xpm
You can easily create an icon for a XUL window. By creating files yourwindow.ico or yourwindow.xpm where yourwindow is the ID of your XUL window. And place the files in your directory structure like this : chrome/icons/default
This will override the global icon files.
More Information about XUL window and icon can be found here : https://developer.mozilla.org/en/XUL/window
I'd like to use the Chrome developer console to look at variables and DOM elements in my app, but the app exists inside an iframe (since it's an OpenSocial app).
So the situation is:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
Is there any way to access things happening in that iframe from the developer console? If I try to do document.getElementById("foo").something, it doesn't work, probably because the iframe is in a different domain.
I can't open the iframe contents in a new tab, because the iframe needs to be able to talk to the containing site as well.
In the Developer Tools in Chrome, there is a bar along the top, called the Execution Context Selector (h/t felipe-sabino), just under the Elements tab, that changes depending on the context of the current tab. When in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the Console will operate. Select your frame in this drop down and you will find yourself in the appropriate frame context. :D
Chrome v59
Chrome v33
Chrome v32 & lower
Currently evaluation in the console is performed in the context of the main frame in the page and it adheres to the same cross-origin policy as the main frame itself. This means that you cannot access elements in the iframe unless the main frame can. You can still set breakpoints in and debug your code using Scripts panel though.
Update: This is no longer true. See Metagrapher's answer.
When the iFrame points to your site like this:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
You can access iFrame DOM through this kind of thing.
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
In my fairly complex scenario the accepted answer for how to do this in Chrome doesn't work for me. You may want to try the Firefox debugger instead (part of the Firefox developer tools), which shows all of the 'Sources', including those that are part of an iFrame