I was wondering why dojo isn't responding to changes on a element?
I made an easy example to show my problem!
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
]);
require(["dojo/dom","dojo/on","dojo/domReady!"], function(dom, on){
on(dom.byId("tester"),"resize", function() { console.log('window on resize') });
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/ContentPane" style="width: 50%;" >
<div data-dojo-type="dijit/layout/BorderContainer" id="tester">
</div>
</div>
</body>
</html>
Everything works fine when I use on(window,"resize", function()); but I have no idea why the example above doesn't work.
Try this (use aspect instead of on):
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function(BC, CP){
require(["dojo/aspect","dojo/domReady!"], function(aspect){
var bc= new BC({}, "tester");
bc.startup();
aspect.after(bc, "resize", function() { console.log('window on resize') });
});
});
</script>
</head>
<body>
<div id="tester" style="width: 50%;height:100%;">
</div>
</body>
</html>
Related
I am self-studying Vue.js. I am using v-bind to add the highlight class to the span element, which is supposed to add newBorder style to the element, but the style doesn't get applied.
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="{loadClass,highlight}">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
Appreciate it if you can point out my mistake.
Thanks
Just change the class binding the array syntax instead of object :
<span v-bind:class="[loadClass,highlight]">
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="[loadClass,highlight]">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
Why the following code failed to show the markdown-editor?
Why Failed to show markdown-editor using VueSimpleMDE by CDN?
<html>
<head>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link href="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.css" rel="stylesheet">
<script src="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.js"></script>
<script src="https://unpkg.com/vue-simplemde#0.4.6/dist/vue-simplemde.min.js"></script>
</head>
<body>
<script>
Vue.use(VueSimpleMDE);
</script>
<div id="vue-app">
{{ content }}
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
</div>
<script>
var vue = new Vue({ "el": "#vue-app", data: { content: "kdfljads" } });
</script>
</body>
</html>
I have a problem when initiating jqxButton inside jqxWindow:
Expected: When I click Add button, the Confirm button caption will be set to "Add", otherwise when I click Edit button.
Problem: The Confirm button caption is set to proper button at the first time I clicked, but then the caption will not changed.
Note: The problem raised if i set window property autoOpen: false.
This problem raised when I use jQWidgets V5.1.0.
When I use jQWidgets v4.3.0, this problem does not happen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Add" });
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Edit" });
});
var jqxWidget = $('#jqxWidget');
var offset = jqxWidget.offset();
$('#window').jqxWindow({
autoOpen: false,
minWidth: 200,
height: 300,
width: 500,
initContent: function ()
{
$("#confirm").jqxButton();
}
});
});
</script>
</head>
<body class='default'>
<div id="jqxWidget">
<div style="float: left;">
<div>
<input type="button" value="Add" id="btnAdd" />
<input type="button" value="Edit" id="btnEdit" />
</div>
</div>
<div id="mainDemoContainer">
<div id="window">
<div id="windowContent">
<input type="button" id="confirm" />
</div>
</div>
</div>
</div>
</body>
</html>
This comes late of course, but does the change in the caption have to occur through the jqxButtons properties only? After testing your code I came to following:
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', "Add"); // Works !
//$("#confirm").jqxButton('val', "New Value"); // Does not work the first time only
//$('#confirm').jqxButton({ value: "Button" }); // uncaught exception: Invalid property: value
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', 'Edit');
});
May this answer help others who meet this issue.
I need some help. The input box doesn't seem to be appearing. I am not using app.js as it gives me problem with Buefy. Anything I did wrongly? Thanks.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/vue2.4.2.js') }}"></script>
<script src="{{ asset('js/buefy0.4.6.js') }}"></script>
<script src="{{ asset('js/axios.min.js') }}"></script>
</head>
<body>
<div id="app">
<hr>
<div class="container">
<datepicker name="test" placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</div>
</div>
<script type="text/javascript">
Vue.use(Buefy.default)
var app = new Vue({
el: '#app',
components: {
'datepicker': DatePicker
},
data: {
name:'test'
},
methods: {
}
});
</script>
</body>
</html>
I think it should be:
components: {
'datepicker': Buefy.Datepicker
}
In the app.js file
import Buefy from 'buefy';
Vue.use(Buefy);
Do not use
Vue.use(Buefy.Default);
I want to hide the content until the page is fully loaded,
but i cant finde the problem why it dosent work.
the alert shows up, but not the content.
<!DOCTYPE html>
<html>
<head>
<style>
#content{
visibility:hidden;
}
</style>
<script type="text/javascript">
checkLoad();
function checkLoad(){
if (document.readyState === "complete"){
document.getElementById("content").style.visiblity = 'visible';
alert(document.getElementById("content").style.visiblity);
} else {
setTimeout('checkLoad();', 1000)
}
}
</script>
</head>
<body>
<div id="content">
<div id='tc1'>Content Text</div>
</div>
</body>
</html>
There's a typo in your code:
document.getElementById("content").style.visiblity = 'visible';
should be :
document.getElementById("content").style.visibility = 'visible';
(note the missing i in visibility)