i have a simple Vuejs projet that only have an index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="app.js"></script>
</body>
</html>
and app.js File
const HelloVueApp = {
data() {
return {
message: 'Hello VueXYZ!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
The problem is that i dont have any IntelliSense for the code in
<script src="https://unpkg.com/vue#next"></script>
when i hover the mouse over a method of the Vue Object it only show (ANY)
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I'm following the basic tutorial for Leaflet-angular-directive. I am able to see the leaflet map component display in the browser, but the map is blank. The example:
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script>
var app = angular.module("demoapp", ['leaflet-directive']);
app.controller("BasicFirstController", [ "$scope", function($scope) {
// Nothing here!
}]);
</script>
</head>
<body ng-controller="BasicFirstController">
<leaflet width="100%" height="480px"></leaflet>
<h1>First steps, basic example</h1>
</body>
</html>
I don't see where the API key or tile urls is passed, or is it not required?
Thanks!
You code is ok. It works form me with these dependencies ( Angular 1.4.9 ) :
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>
There is no need for API key.
I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem?
Thanks advance!
here demo is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
$(function(){
$('.swiper-container, .swiper-slide').css({
height: ($(window).height()) + 'px',
width: '100%'
});
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: false,
keyboardControl: true,
// mousewheelControl: true,
onSlideChangeStart: function(swiper){
pageCurrentNum = swiper.realIndex;
$('#currentPage').text(pageCurrentNum + 1);
gridster = null;
gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
if(!confingInfo.isDebug){
gridster.disable();
}
},
});
})
</script>
</head>
<body>
<div class="swiper-container responsive">
<div class="swiper-wrapper" style="background:red;">
<!--First Slide-->
<div class="swiper-slide ">
page1
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</div>
<!--Second Slide-->
<div class="swiper-slide">
page2
</div>
</div>
</div>
</body>
</html>
I solved the problem by using the codes underline:
$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
e.stopPropagation();
});
Hope this can help you who has happened the same problem like me!
I know this is old question.
But on Swiper 3, Dean's answer does not work.
My solution is add class="swiper-no-swiping" to SELECT tag.
Hope this helps.
Or if you don't need the touch events on desktop, you can disable it with the option simulateTouch.
See: http://idangero.us/swiper/api/
I need to add some custom tags into tinyMCE. It's ok if they are in body tag alone, but if I put them into the div tags then editor removes it. Here is the example:
I need to add "unsubthis" tag, so I've got this configuration file
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
verify_html : false,
skin: "o2k7",
theme: "advanced",
entity_encoding: "raw",
plugins: "fullpage,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_toolbar_align: "left",
custom_elements: "unsubthis",
valid_children: "+div[unsubthis]",
extended_valid_elements: "unsubthis"
});
If I open the editor and put into HTML this
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<unsubthis></unsubthis>
</body>
</html>
and Update then everything is fine and if I look into the HTML, code looks same. Problem comes if I try put into HTML this:
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<unsubthis></unsubthis>
</div>
</body>
</html>
Then unsubthis will be stripped out after update and I'll get this code
<html>
<head>
<title>Document Title 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div></div>
</body>
</html>
Problem occurs only if the unsubthis tag is empty, how can I fix it?
I'm currently using 3.5.6 version.