I want to make calendar in bulgarian language. I tried with:
<script src="<?= base_url(); ?>assets/js/datetimepicker.js"></script>
<script src="<?= base_url(); ?>assets/js/add-datetimeInputs.js"></script>
<script src="https://jquery-ui.googlecode.com/svn-history/r3982/trunk/ui/i18n/jquery.ui.datepicker-bg.js"></script>
In my assets/js/add-datetimeInputs.js file I have:
$.datepicker.setDefaults( $.datepicker.regional[ "bg" ] );
$(function () {
$('#datetimepicker1').datetimepicker();
});
But it's not in bulgarian language. How should I do that?
Related
I made a simple html file with vue-router.
I use x-template to define component template.
It works well on chrome browser, but I found that IntelliJ IDE show me a red line.
I cannot understand why IDE can't resolve this and why my code works well on the browser even though the symbol can't be resolved.
Does anyone have an idea? (The code is written below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router_App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/top">Top page</router-link>
<router-link to="/users">User page</router-link>
</nav>
<router-view></router-view>
</div>
<script type="text/x-template" id="user-list">
<div>User page</div>
</script>
<script>
let router = new VueRouter({
routes: [
{
path: '/top',
component: {
template: '<div>Top page</div>'
}
},
{
path: '/users',
component: {
template: '#user-list'
}
}
]
})
let app = new Vue({
el: '#app',
router: router
}).$mount()
</script>
</body>
</html>
I'm using markdown vue which is a plugin for vue. It says it's supposed to have superscript and subscript functionality built in, however when I run the code for a subscript I get something that looks like this
y = x b + e
i i i
In order to have this functionality I'm trying to use this plugin but I'm having a hardtime figuring out how it's supposed to be registered globally with the MarkdownItVue plugin. I tried doing this...
import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'
MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)
But this is working out...
I'm happy to change approaches too if there's a simpler fix for MarkdownItVue
Update
index.html
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<div id="app">
<div>
{{ msg }}
</div>
<markdown-it-vue :content="msg" class="md-body"></markdown-it-vue>
</div>
<script src="app.js"></script>
</body>
app.js
new Vue ({
el: '#app',
data() {
return {
msg: "$y_i = x_i + \\epsilon_i$"
}
}
})
It seems to be working just fine by default. See the example.
Anyway it seems from the docs that if you need to install additional markdown-it plugins, it needs to be done on component instance
const vm = new Vue({
el: "#app",
data() {
return {
content: "H~2~0 - 29^th^"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue :content="content">
</markdown-it-vue>
</div>
The LaTeX rendering requires the stylesheet from markdown-it-vue. Make sure you're including it as a <link>:
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
new Vue({
el: "#app",
data() {
return {
content: "$y_i = x_i + \\epsilon_i$"
}
}
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue class="md-body" :content="content"></markdown-it-vue>
</div>
Or importing the file from markdown-it-vue/dist/markdown-it-vue.css:
demo
I am using vuerouter really for the first time and I am trying to dynamically add a url name to the hyperlink of the route. Not sure what I am doing here, {{message}} would show the name and I am trying to concatenate that to the existing url--what am I doing wrong?
secondly, because these pages are dynamically generated, would I use vuex to store the state--? so that others could see the pages--?
const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})}
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link to="url/+'{{message}}+'">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the "to" with ":to"
Once you have that, the content of the attribute ":to" behaves as if it was javascript and you have access to all the properties of the vue component so you can just do:
<router-link to="'url/' + message">eCard</router-link>
However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter
{ path: '/url/:id', name: 'ecard', component: eCardComponent , props: true }
In this way you can call your route as
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
Then you can do whatever you need in that component, like loading info from a database for that particular id.
Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines.
const Home = { template: '<div>Home</div>' }
const eCardComponent = { template: '<div>Ecard :{{id}}</div>', props:['id'] }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})},
{ path: '/url/:id', name:'ecard', component: eCardComponent, props: true },
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
i use jwplayer 6 , i have problem when i want to Customize my player (put skin or autostart option .... ) the player disappear
this code work good :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
});
</script>
</body>
but when i put something like this the player disappear and show just (Loading the player...) :
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic'
autostart: true,
mute: true
});
</script>
</body>
or if there is any other way to customize player please tell me , thanks
Your code has error in the 'file' line, try this:
<body>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: 'https://www.youtube.com/watch?v=EgmXTmj62ic',
autostart: true,
mute: true
});
</script>
</body>
I want to use an observable object within a ListView in the Windows 8 RT (Developer Preview from BUILD 2011) (using JavaScript).
The code below seems like it should work. It has a simple template for displaying a title and a description of each object in the HTML and a basic use of the WinJS.UI.Listview component.
I expect to see a list of objects, but always see the "wait spinner" when the list contains observables.
Experimentally, I've noticed that if the code doesn't convert the entire list (all but 3) to observables, then the list will show up. From doing some debugging, it would appear that it's somehow timing related and that the WinJS framework miscounts and fails to render the ListView entirely (as some of the objects are "pending") for some reason (the miscount confusion happens deep in a call to realizeItems in the ScrollView code). If I comment out the enableFirstChanceException function call, it fails while comparing two objects (but I don't know if it's relevant) in the function itemChanged (circular reference in value argument not supported).
Any idea on how to make this work with observable objects?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024, height=768" />
<title>WinWebApp1</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript" src="/WinJS/js/base.js"></script>
<script type="text/javascript" src="/WinJS/js/ui.js"></script>
<script type="text/javascript" src="/WinJS/js/binding.js"></script>
<script type="text/javascript" src="/WinJS/js/controls.js"></script>
<script type="text/javascript" src="/WinJS/js/res.js"></script>
<script type="text/javascript" src="/WinJS/js/animations.js"></script>
<script type="text/javascript" src="/WinJS/js/uicollections.js"></script>
<script type="text/javascript" src="/WinJS/js/wwaapp.js"></script>
<!-- WinWebApp1 references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="itemTemplate" data-win-control="WinJS.Binding.Template" >
<div class="itemContainer">
<!-- Displays the "title" field. -->
<div class="itemTitle" data-win-bind="innerText: title">
</div>
<!-- Displays the "description" field. -->
<div class="itemDescription" data-win-bind="innerText: description">
</div>
</div>
</div>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixed-layout">
<div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemRenderer: itemTemplate}">
</div>
</div>
</div>
</body>
</html>
And the JavaScript:
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
//Debug.enableFirstChanceException(true);
var myData = [
{ title: "Banana", description: "Banana Frozen Yogurt"},
{ title: "Orange", description: "Orange Sherbet"},
{ title: "Vanilla", description: "Vanilla Ice Cream"},
{ title: "Mint", description: "Mint Gelato"},
{ title: "Strawberry", description: "Strawberry Sorbet"},
{ title: "Kiwi", description: "Kiwi Sorbet" }
];
// this works:
//var myDataSource = new WinJS.UI.ArrayDataSource(myData);
// this does not:
for (var i = 0; i < myData.length ; i++) {
myData[i] = WinJS.Binding.as(myData[i]);
}
var myDataSource = new WinJS.UI.ArrayDataSource(myData);
document.addEventListener("DOMContentLoaded", function (e) {
WinJS.UI.processAll()
.then(function () {
var basicListView = WinJS.UI.getControl(document.getElementById("basicListView"));
basicListView.dataSource = myDataSource;
// when the observable works correctly, this should work (and live change the list)
//setTimeout(function () {
// basicListView.refresh();
// myData[0].title = "Yellow Banana";
// myData[5].title = "Kiwisicle";
//}, 3000);
});
});
WinJS.Application.start();
})();