Currently I'm making vuejs SPA, and the build size is pretty big, so I want to place some loading indicator instead of blank page while vue is downloading its assets.
I've found out that in this case, the solution is v-cloak, but what I dont understand is, in every example the v-cloak is putted inside index.html, whereas in my project src there are no index.html, there is only main.js and vue.app.
there are index.html, but is located inside public folder(which i think its a build file?).
nevertheless, I've tried to put v-cloak directive inside Vue.app, and its still showing blank page while vue downloading its assets. please point me in the right direction.
thanks for all the help.
here's my App.vue:
<template>
<div id="app">
<div v-cloak>
<div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML -->
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML -->
<!-- Rest of the contents -->
<router-view />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
[v-cloak] .v-cloak--block {
display: block;
}
[v-cloak] .v-cloak--inline {
display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block;
}
[v-cloak] .v-cloak--hidden {
display: none;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none;
}
</style>
and when I put some loading indicator in public/index.html, it work, but how do I remove it after vue finished loading?
heres my public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
Loading
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
v-cloak is supposed to be used on the application's mounting point (the el specified in new Vue()), not within a component. Vue does not process v-cloak anywhere else but the mounting point, so it has no effect in App.vue.
To use v-cloak:
In public/index.html, add the v-cloak attribute to div#app, and a <style> block to hide it:
<div id="app" v-cloak></div>
<style>
[v-cloak] {
display: none;
}
</style>
Adjacent to div#app, add a loading icon, and style it so that it's hidden when the v-cloak attribute is removed (i.e., :not([v-cloak])):
<div class="loading">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
<style>
.loading {
display: grid;
place-content: center;
}
#app:not([v-cloak]) ~ .loading {
display: none;
}
</style>
demo
Related
I have an index.cshtml that includes a partial razor view called "_CustomPartial.cshtml". The view is rendered ok. I included 2 javascript files in my partial view that reference a div from my partial. This part isn't working. I think the scripts are not being loaded. Below is my code:
_CustomPartial.cshtml:
<div style="overflow: auto; width: 100%; height: 100%;">
<div id="gvplayer" style="width:50%;height:400px; float: left; border: thin solid black;">
</div>
</div>
#section JavaScriptIncludes
{
<script type="text/javascript" src='#Url.Content("~/js/PlaybackScript.js")'></script>
<script type="text/javascript" src='#Url.Content("~/js/PlaybackStateMachine.js")'></script>
}
PlaybackScript.js:
console.log('initializing Playback object');
const playbackObject = CustomWindow();
$('#gvplayer').val(playbackObject);
_Layout.cshtml:
<body>
...
#RenderSection("JavaScriptIncludes", required: false)
</body>
The scripts are not loaded because the I don't see the log in my console.
I'm experimenting Swiper js library. I managed to get it working. But some strange dots are shown when the slides wraps from the last to the first and the problem is happening when loop attribute is set to true.
The strange dots are displayed
Here is the html code. Note that loop attrib is set to true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
position: relative;
height: 100%;
}
.swiper {
width: 600px;
height: 300px;
}
.page1 {
width: 100%;
height: 100%;
background-color: #443321;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="page1">
</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script type="text/javascript" src="./index.js"></script>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
loopedSlides: 50,
observer: true,
obsereParents: true,
slidesPerView: 1,
spaceBetween: 30,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
<div class="swiper-slide">Slide 3</div>
...
I had this problem too. Your html code is generating those dots, after the Slide 3 element. It looks like the three dots may have been there when you copy/pasted a code snippet. Remove them and your problem will disappear
Simply remove the space between the slides and place a slide data in div and give margin on two sides of the div. By using this the box shadow will not cut.
My media tags dont seem 2 work even thought i have the viewport tag in my head. I am trying to change the font size when lowering the resolution. I am not sure what i am doing wrong but would love some help.
<? ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body style="background-color: #bdc3c7">
<div class="navBar">
</div>
<div class="container">
<div class="pLbl" style="font-family: 'Changa One';">
Enter Password to enter:
</div>
<div>
<input class="pInput" id="pInp" type="password"></input>
</div>
<div>
<div class="tooltip">
<button class="pBtn" onclick="pLogin()"></button>
<span class="tooltiptext">Submit</span>
</div>
</div>
</div>
</body>
</html>
<style>
.pLbl {
font-size: 24px;
color: rgb(50,50,50);
}
#media screen and (max-width: 640px)
{
.pLbl {
font-size 12px;
}
}
</style>
It's just because you forgot the colon after font size on media query :)
PS: While modern browsers have a code correction for invalid HTML, I suggest you put style tag in your head, declare the doctype and write your inputs with self-close tag.
I am using HTML5/JS to build my app and the CSS is not applying for some reason. I am still seeing the default color. Can I not override it when you press windows+I?
Here is the CSS for reference:
.win-settingsflyout {
background-color: #fff;
}
You can just create a class to apply the color.
<style>
.colors{background-color: lightblue;}
</style>
then add this class to your div tag. <div class='win-content colors'></div>
Hope it'll work!
you can't, you'll always get the color of your Start Screen
Here in my sample app for the 'about' flyout. Is the background is red.
<div class="win-content" style="background: red;">
The full code:
<!doctype HTML>
<html>
<head>
<title>About</title>
<script src="//Microsoft.WinJS.1.0/js/base.js" type="text/javascript"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js" type="text/javascript"></script>
<script type="text/javascript">WinJS.UI.processAll();</script>
<script src="/js/about.js"></script>
<link href="/css/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGSFLYOUT -->
<div class="apback" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout" data-win-options="{settingsCommandId:'about',width:'narrow'}">
<!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
<div class="win-ui-dark win-header" style="background-color: #333333"> <!-- Background color reflects app's personality -->
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label"><span data-win-res="{textContent: 'info'}"></span></div>
<img src="../images/smalllogo.png" style="position: absolute; right: 40px;"/>
</div>
<div class="win-content" style="background: red;">
<div class="win-settings-section">
<label>Test App</label>
<label>users</label>
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
You can "push" the change of you settings flyout background color with this CSS code:
.win-settingsflyout {
background-color: #fff !important; background: #fff !important;
}
I copied an example from the dojo site using Borderlayout. However, when I load in the browser , the entire data is shown for all the section . Then after a few second the content is refersh and the data is displayed correctly.
here is code that i copied . Thanks for your help
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; } #borderContainer
{ width: 100%; height: 100%; }
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.
What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.
So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.
You should add a preloader div and hide it once the page is parsed (see this example).
This is what it would look like for your example :
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html {
width:100%; height:100%; margin:0; padding:0;
}
#preloader {
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
}
#borderContainer {
width:100%; height:100%;
}
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function(){
dojo.fadeOut({
node:"preloader",
onEnd: function(){
dojo.style("preloader", "display", "none");
}
}).play();
}
dojo.addOnLoad(function(){
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function(){
dojo.parser.parse();
hideLoader();
});
});
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE){
addEvent(window, 'load', function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.addOnLoad(function(){
dojo.parser.parse();
});
});
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
disable parseOnLoad and manually add event to parse widgets for ie.