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')
})}
});
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
I am trying to use native scrolling like this:
angular.module('MyApp').config(function ($translateProvider,$ionicConfigProvider) {
$translateProvider.preferredLanguage('en');
$translateProvider.useStaticFilesLoader({
prefix: 'languages/',
suffix: '.json'
});
if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
})
the issue that my scrolling stop working at all very similar to: code pen
my template:
<div class="list">
<a ng-repeat="item in items" class="item card"
href="#/tab/details/{{item.queId}}">
<div class="row">....
thanks For helping!
after looking on it looks that the issue happens only on chrome....
Native scrolling only works on Android platforms.
You can read more about it in one of the recent blog posts here and in the forum here.
The syntax you're using is ok:
if (!ionic.Platform.isIOS()) {
$ionicConfigProvider.scrolling.jsScrolling(false);
}
but you can only test it on an android device.
Your codepen scrolls fine without this line:
if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
Why are you disabling the scroll in non iOS platforms with this code?
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();
I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.
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