I'm attempting to display multiple tabs using code from here http://www.w3schools.com/howto/howto_js_tabs.asp
Here is my code :
index.pug :
html
head
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
title= title
body
h3= message
<link rel="stylesheet" type="text/css" href="style.css">
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
style.css :
/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
I receive this error :
9| // Get all elements with class="tabcontent" and hide them
10| tabcontent = document.getElementsByClassName("tabcontent");
> 11| for (i = 0; i < tabcontent.length; i++) {
---------------^
12| tabcontent[i].style.display = "none";
13| }
14|
malformed each
at makeError (/Users/node_modules/pug/node_modules/pug-lexer/node_modules/pug-error/index.js:32:13)
at Lexer.error (/Users/node_modules/pug/node_modules/pug-lexer/index.js:58:15)
at Lexer.each (/Users/node_modules/pug/node_modules/pug-lexer/index.js:911:12)
at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
at Lexer.advance (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1343:15)
at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
at Lexer.getTokens (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1371:12)
at lex (/Users/node_modules/pug/node_modules/pug-lexer/index.js:12:42)
at Object.load.string.lex (/Users/node_modules/pug/lib/index.js:93:27)
at Function.loadString [as string] (/Users/node_modules/pug/node_modules/pug-load/index.js:44:24)
How to mix javascript with pug ?
There is a small example with inline javascript on the pug npm page (https://www.npmjs.com/package/pug). Basically its this:
html
head
script (type="text/javascript").
/* your javascript here */
title= title
Also I'm not sure why you're using partial pug syntax and partial HTML. For example you have this:
<link rel="stylesheet" type="text/css" href="style.css">
When it should be this:
link(rel="stylesheet" type="text/css" href="style.css")
As an alternative (for the javascript) you can use the include directive, as explained here: https://pugjs.org/language/includes.html, or you could put the javascript in an external file (like you did with your css) and simply do this:
script(src='app.js')
First thing to try ( whitout more details )
if you're using strict mode change this:
for (i = 0; i < tabcontent.length; i++)
to this
for (var i = 0; i < tabcontent.length; i++)
If it works it teach you a lesson: Declare everything, everywhere. Always.
If not, we need more details
I am working on a project about speech recognition, but my html file cannot find microphone.I mean that when I click the button "start recognition " it should pop a bar for allow or deny access to the microphone, but it doesn't.I figure out that I should enable web audio input from chrome://flags, but in chrome://flags there is no option for web audio input.
what should I do?
please help me.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Web Speech API</title>
<style type="text/css">
#controls {
text-align: center;
}
#start_button {
font-size: 16pt;
}
#transcript {
color: darkred;
font-size: 16pt;
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
#instructions {
color: darkblue;
font-size: 14pt;
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="transcript"> </div>
<br>
<div id="instructions"> </div>
<div id="controls">
<button id="start_button">Click to Start</button>
</div>
<script type="text/javascript">
var finalTranscript = '';
var recognizing = false;
$(document).ready(function() {
// check that your browser supports the API
if (!('webkitSpeechRecognition' in window)) {
alert("Sorry, your Browser does not support the Speech API");
} else {
// Create the recognition object and define the event handlers
var recognition = new webkitSpeechRecognition();
recognition.continuous = true; // keep processing input until stopped
recognition.interimResults = true; // show interim results
recognition.lang = 'en-GB'; // specify the language
recognition.onstart = function() {
recognizing = true;
$('#instructions').html('Speak slowly and clearly');
$('#start_button').html('Click to Stop');
};
recognition.onerror = function(event) {
console.log("There was a recognition error...");
};
recognition.onend = function() {
recognizing = false;
$('#instructions').html(' ');
};
recognition.onresult = function(event) {
var interimTranscript = '';
// Assemble the transcript from the array of results
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalTranscript += event.results[i][0].transcript;
//me sunarthsh js na to kopseis kai na pareis tis lekseis kai na allazeis auta pou thes
} else {
//console.log("event.results[i][0].transcript: " + event.results[i][0].transcript);
//if (event.results[i][0].transcript == "equals") {
//... = "=";
//}
//else if (... == "by") {
//... = "*";
//}
//else if (... == "divide") {
//... = "/";
//}
//else if (... == "square") {
//... = "^2";
//}
interimTranscript += event.results[i][0].transcript;
}
}
console.log("interim: " + interimTranscript);
console.log("final: " + finalTranscript);
// update the page
if(finalTranscript.length > 0) {
$('#transcript').html(finalTranscript);
recognition.stop();
$('#start_button').html('Click to Start Again');
recognizing = false;
}
};
$("#start_button").click(function(e) {
e.preventDefault();
if (recognizing) {
recognition.stop();
$('#start_button').html('Click to Start Again');
recognizing = false;
} else {
finalTranscript = '';
// Request access to the User's microphone and Start recognizing voice input
recognition.start();
$('#instructions').html('Allow the browser to use your Microphone');
$('#start_button').html('waiting');
$('#transcript').html(' ');
}
});
}
});
</script>
</body>
</html>
You need that page to be served by a webserver, but it sounds like you're just trying to open the HTML file with your browser. Chrome will block access to the camera/microphone unless the page was served from a webserver. You can create a local server on your machine to serve the page using the command python -m SimpleHTTPServer in the folder with your html file. (assuming you're on a MacOS/linux system).
See this answer for more information
WebRTC - Browser doesn't ask for mic access permission for local html file
I am trying to render an html+js page in nodejs using jade. I used the online available html to jade converters to convert my html to jade and then render it from my nodejs app. However, I am not able to render the jade properly.
The example that I used is the one provided by google in their documentation for google maps API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map-canvas"></div>
</body>
</html>
I tried many converters to convert but each of them gave me one or the other error. The http://html2jade.vida.io/ was able to convert it into jade.
I saved the file as maps_marker.jade in my views directory and from one of my APIs in web.js I made a call "res.render('maps_marker',{})" to render this page.
However the page rendered the following html as text
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Marker animations with google</title><style><html>, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</html><div id="panel">{position: absolute;top: 5px;left: 50%;margin-left: -180px;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;}</div></style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script><var>berlin = new google.maps.LatLng(52.520816, 13.410186);</var><var>neighborhoods = [</var><new>google.maps.LatLng(52.511467, 13.447179),</new><new>google.maps.LatLng(52.549061, 13.422975),</new><new>google.maps.LatLng(52.497622, 13.396110),</new><new>google.maps.LatLng(52.517683, 13.394393)</new>];<var>markers = [];</var><var>iterator = 0;</var><var>map;</var><function>initialize() {</function><var>mapOptions = {zoom: 12,center: berlin};</var><map>= new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</map><function>drop() {for (var i = 0; i < neighborhoods.length; i++) {setTimeout(function() {addMarker();}, i * 200);}}</function><function>addMarker() {markers.push(new google.maps.Marker({position: neighborhoods[iterator],map: map,draggable: false,animation: google.maps.Animation.DROP}));iterator++;}</function><google window load initialize class="maps event addDomListener"></google></script></head><body><div id="panel" style="margin-left: -52px"><button id="drop" onclick="drop()">Drop Markers</button></div><div id="map-canvas"></div></body></html>
Can someone help me understand how to render such html+js in node.js.
I am currently try to use the jade template engine, but am open to using any other template engine as well.
UPdated to add snippet from my web.js and input from
I have an index.html(in public folder) with the following form within it
<form id="searchForm" action="/submit_search" method="POST" enctype="multipart/form-data">
<input name="latitude" type="text" id="latitude"/>
<input name="longitude" type="text" id="longitude"/>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
In my javascript - I submit the form.
IN my web.js I have the following snippet for submit_search API
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.post('/submit_search', function(req,res){
console.log(JSON.stringify(req.body));
pg.connect(database_url, function(err, pgclient, done){
if(err)
{
console.log("Error in fetching pgclient from pool");
res.send(500, "Load the error connection page");
}
else if(pgclient != null)
{
console.log("Got an instance of pgclient");
generateDataForMap(req, res, pgclient, done);
}
});
});
And then I have defined my generateDataForMap method
var generateDataForMap = function(req, res, pgclient, done){
... some processing.....
..... create the required json.....
res.render('maps_marker',json);
}
I have put the maps_marker.jade file in the views folder..
The jade file produced by http://html2jade.vida.io/ is not valid. To fix it, you need to add a . (dot char) after the style and script tags to turn them in to style. and script. respectively.
doctype html
html
head
meta(charset="utf-8")
title Marker animations with google
style.
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
script.
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
body
#panel(style="margin-left: -52px")
button#drop(onclick="drop()") Drop Markers
#map-canvas
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;
My page has a scatter plot of data values for a list of genes. The list can be 30,000+. I have all the data on the client, so my autocomplete is as follows:
html:
<label>Search for a specific gene:</label> <input size=25 maxlength=100 id=gene_autocomplete class="autocomplete" />
css:
.ui-autocomplete {
max-width: 275px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
ul.ui-autocomplete li.ui-menu-item {
font-size: 11px;
margin-right: 15px;
}
Javascript:
$(document).ready(function () {
...
$("input#gene_autocomplete").autocomplete({source: data.ids, minLength:4});
... followed by parsing a data file
parseGct: function(dataText) {
var rows = dataText.split('\n');
this.vals = new Array();
this.colNames = rows[2].split('\t').splice(2);
for(var i = 3; i < rows.length; i++) {
var cols = rows[i].split('\t');
if(cols.length < 2) continue;
var data = cols.slice(2);
this.toFloat(data);
this.vals.push(data.slice());
}
},
I have experimented with different delays (0 to 700), to no avail. Generally the browser times out. What can I do to speed this up?