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.
Related
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
I have an issue with loading Leaflet map using Vue.js and Bulma tab components (via Buefy).
If map is placed inside tab then it does not load all tiles until browser window is resized.
If map is placed outside of Bulma tabs component then it loads without any issue.
Calling map.invalidateSize() seems to help, but to do it automatically when tab changes I have to call it using setTimeout and put very big delay, like 1sec - which is very ugly.
How to get this working without this invalidateSize workaround?
Example with the issue: https://codepen.io/alxxnder/pen/zyYxwd
Example without the issue: https://codepen.io/alxxnder/pen/LMYEjr
Code:
new Vue({
el: '#app',
data: {
map: null,
},
methods: {
invalidateSize: function() {
this.map.invalidateSize();
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Leaflet Test</title>
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
</head>
<body>
<div class="section">
<div class="container" id="app">
<b-tabs position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
</html>
As explained in Data-toggle tab does not download Leaflet map, the issue is caused by the fact that your map container does not have yet its full size when you initialize it. You may understand it more easily if your map had been in an initially hidden tab (e.g. in tab 2).
As for your initially active tab (i.e. tab 1), it is probable that Buefy / Bulma still takes some time to reveal the tab content.
Since there is no event when the tab transition completes, you have to wait for the transition duration before calling the invalidateSize method. In your case, 300ms seems to be fine.
Then you should also call it again when the user changes the tab (see Buefy tabs events), otherwise should the browser had changed size while your tab was hidden, the same issue would happen again.
Demo with maps in the 2 tabs:
new Vue({
el: '#app',
data: {
map: null,
map2: null,
tabMaps: []
},
methods: {
invalidateSize: function(tabIndex) {
setTimeout(() => {
if (typeof tabIndex === "number") {
this.tabMaps[tabIndex].invalidateSize();
} else {
// invalidate all maps
this.tabMaps.forEach(map => {
map.invalidateSize();
});
}
}, 300);
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
// map2 in tab2
this.map2 = L.map(this.$refs.map2).setView([38.63, -90.23], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
this.map2
);
this.tabMaps.push(this.map); // 0
this.tabMaps.push(this.map2); // 1
this.invalidateSize();
}
})
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
<div class="section">
<div class="container" id="app">
<b-tabs #change="invalidateSize" position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
<div class="map" ref="map2" style="height: 400px; width: 100%"></div>
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
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 a Toggle Switch in the settings pane. Problem is that the text in the title and labelOff, labelOn is not visible. I am not sure how can I change the front color or styles from the WinJS.UI.ToggleSwitch so that this text start displaying. Any examples will be highly appreciated.
Here is my html.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="mypage fragment"
id="mysettings"
data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width:'narrow'}">
<div class="win-header">
<button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
</button>
<div class="win-label">My Settings</div>
</div>
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
</div>
</body>
</html>
Below is my css
.fragment.mypage .mytoggle .win-title .win-labelOff{
color: green; }
you can refer the css styling classes for WinJS.UI.ToggleSwitch here.
default.js:
app.onsettings = function onsettings(e)
{
e.detail.applicationcommands = {
about: { title: 'About', href: '/pages/settings/about.html' },
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
/pages/about/about.css:
.myflyout .win-content .mytoggle .win-title
{
color: blue;
}
/pages/about/about.html page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGFLYOUT -->
<div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'about'}">
<div class="win-ui-light win-header" >
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">About</div>
<img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
</div>
<div class="win-content">
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title: 'example of toggle'}" >
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
As of 2016 I failed doing this with ".win-title". Instead used ".win-toggleswitch-header".
Hi I have a simple one as shown below that displays bordercontainer and contentpane.
I do not understand why the bordercontainer's id is registered twice since I only have one
id defined for bordercontainer.
The error stated: Error: Tried to register widget with id==main_bContainer but that id is already registered
Please advise where I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../dojo1_8/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" href="../common.css"/>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 5px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body class="soria">
<div id="main_bContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
<div class="cP_Left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Content Pane A
</div>
<div class="cP_Right" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
Content Pane B
</div>
</div>
</body>
<script>
var dojoConfig =
{
parseOnLoad: true,//replace web controls based on theme soria
isDebug: true,//true for debuggin with aid from FireBug, Always set it to false, to avoid overhead
async: true,//
locale : "en-us"//
};
</script>
<script src='../dojo1_8/dojo/dojo.js'></script>
<script>require(["dojo/parser",
"dojo/ready",
"dojo/request",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser, ready, request)
{ready(function()
{parser.parse();
});
});
</script>
</html>
Thanks
Clement
Becuase you have parse() its 2 times.
Here dojoConfig = { parseOnLoad: true };
and here parser.parse();
Just parse only one the problem will solve.