I tried to add glyphicons at my HTML, something important to say is that I'm redering from Jade.
For inside buttons glyphicons I tried:
button(ng-click='doLexycalValidation()').btn.btn-default
span.glyphicon.glyphicon-search
| Evalular
For glyphicons at tables I tried:
tr.table.table-hover
td
span.glyphicon.glyphicon-search
| Evalular
But got not result at any of these. I'm importing Bootstrap from CDN this way:
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')
link(rel="stylesheet",href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css")
How can I make them work properly?
You can use this module JADE-Bootstrap
http://rajasegar.github.io/JADE-Bootstrap/index.html
install by => npm install --save jade-bootstrap
and use it like this
extends ../node_modules/jade-bootstrap/_bootstrap
block body
button.btn.btn-success(type='submit')
+icon("plus")
| Add
+a-btn-danger("#")
+icon('remove')
| Remove
this module JADE-Bootstrap is very good.It make jade and bootstrap 3 work together more easy.
Related
I was installed Nuxt via command npx create-nuxt-app with Vuetify plugin. Then I ran server via npm run dev or npm run build && npm start and in page source I see CSS styles of Vuetify in <head> tag. After some googleing I found advice add extractCSS: true, in build section of nuxt.config.js. After that when I run npm run build && npm start css files are generating and linking to pages, but I still see some CSS styling (~500 lines) in <style data-n-head="true" id="vuetify-theme-stylesheet" type="text/css">. How I can hide them to CSS file instead of displaying in <head> tag.
And how I can extract CSS when start npm run dev (pretty annoying to scroll this CSS when debug HTML layout)?
Not sure if this is exactly the same issue but I found had many lines of Vuetify colours CSS in the head of each pre-rendered html file. I eventually found https://vuetifyjs.com/en/features/theme/#variations.
When Vuetify generates your application’s theme, it creates 9 variants for each color. For majority of users, these variants are rarely used. This is an opt in feature that will be false by default in the next major version.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: { variations: false },
},
})
Adding options: { variations: false } as above (along with extractCSS: true in Nuxt.config.js) got rid of all superfluous CSS in the pre-rendered html.
I converted a dwg file to svg file.
Now this svg file I imported it into a html file.
<ion-scroll scrollX="false" scrollY="true" zoom="true" maxZoom="10">
<object id="svg1" data="assets/svgs/file.svg" type="image/svg+xml" style="width:400%;"></object>
</ion-scroll>
In the svg file on rectangles i put this :
onclick="btnClicked();"
<g id="P2" onclick="btnEvent($event)">
And here the problem, the click works but the function btnClicked() dosen't works.
It gives me this error (in the console)
Uncaught ReferenceError: btnClicked is not defined
at SVGGElement.onclick (file.svg:2946)
It seems like I have to check if this object is loaded and the call the function?
Something like this ?
var elementExists = document.getElementById("svg1");
svg1 is the id of object maybe if i check if it's populate with the svg it ll work?
Anyway this is js I ll do it in ts .
Sorry for my english.
UPDATE
When the page is ready I have to go inside the svg and listen all ids that starts with PI and capture the click. svgDwg is the id of the object. Now I'm not able to go inside, where is the svg.
a.contentDocument dosen't works.
ionViewDidLoad() {
var a = document.getElementById("svgDwg");
console.log(a);
}
I find the answer :
If you want to import in your ionic page a file.svg, without use functions like onclick but use something like listener (.on('click',...) in jquery), you can use a combination of jquery and angular-svg-icon
Install first jquery and import in your .ts ionic page :
$ npm install jquery --save
import * as $ from 'jquery'
Then install the plugin angular-svg-icon :
full description here
Import your file.svg in your html :
<svg-icon src="path/to/file.svg"></svg-icon>
Then write some .ts and jquery for your file.svg in ionViewDidEnter() function of ionic
This works for me (after 2 days of research)
Recently I was watching some video tutorials on youtube and came across this JADE thing, how do I install and use it for my web development?
I googled it around but didn't find a proper site that teaches step-by-step to proceed with. And the site jade-lang.com is not available. I did this from websites but node.js is throwing some errors. screenshot below:
first jade is deprecated and new name for jade is pug for more information about this check this link
pug documentation
second to install pug write this command npm install pug -g after you install pug create a new folder to your project and create a file inside your project file.pug and right click on your folder project + shift
and open command window here and write this command pug file.pug after you write this command it will generate a new file file.html
Third write this command pug input.pug input.html --watch --pretty
--watch to compile your code after saving in file.pug
--pretty to write a code with format of html(organized code) not minimized code
to write a tag in pug write the name of tag like
html tag and we will compile to <html></html>
a(href='#' target='_blank') link compile to link
a(href='#' target=''): img(src='' alt='') compile to <img src="" alt=""/>
to write a comment // this is a comment compile to <!-- this is a comment -->
to write class name and content for tag for example p.demo this is a paragraph compile to <p class="demo"> this is a paragraph</p>
to write id and content for tag for example p#demo this is a paragraph compile to <p id="demo"> this is a paragraph</p>
to write a function
mixin list
ul
li foo
li bar
li baz
to use this function write the name of function +list and will compile to
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
to include file write include file_name
Finally this is a example for pug code
html
head
title Hello
link(href='' rel='stylesheet' type='text/css')
body
//this is a comment
p.item hello
p#item
br/
a(href='#' target=''): img(src='' alt='')
// to start a new line
|
|
a(href='google.com') Google
// write a function
mixin list
ul
li foo
li bar
li baz
// use function
+list
// include file
include content
For more information about pug check this link pug full documentation
Jade is now called "pug".
npm install pug -g
Here you will find how to use it if you scroll down:
https://www.npmjs.com/package/pug
I am a total beginner on node.js, I wanted to experiment with it a bit.
I followed the instructions on building a node webkit app. When I edit index.html, I added <script src="js/bootstrap.js"></script> and it threw the error and displayed a cloud floating around:
Uncaught node.js Error
TypeError: undefined is not a function
at file:///C:/Users/Daniel/Desktop/node-webkit/js/bootstrap.js:158:7
at file:///C:/Users/Daniel/Desktop/node-webkit/js/bootstrap.js:160:2
Bootstrap.js:
| +function ($) {
| ...
ln 158 | $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
| ...
ln 160 | }(jQuery);
Other than these lines, there are still a bunch of error lines, but it seems to display 2 at a time.
I do not want to invoke any node.js functions or methods, is there something in bootstrap that conflicts with node webkit?
Twitter Bootstrap's requires jQuery. It seems like you forgot to include it. You should download it and insert <script src="jquery-1.11.0.min.js"></script> right before where you include bootstrap.js.
Created a brand new express.js project by running the following commands on a windows command prompt
npm install express -g
express newproject
cd newproject
npm install
node app
I then open a browser window to http://localhost:3000/ and get the following error
500 Error: c:\projects\newproject\views\index.jade:5<br/> 3| block content <br/> 4| h1= title <br/> > 5| p Welcome to #{title}<br/><br/>`doctype 5` is deprecated, you must now use `doctype html`
3| block content
4| h1= title
> 5| p Welcome to #{title}
`doctype 5` is deprecated, you must now use `doctype html`
at Object.Compiler.setDoctype (c:\projects\newproject\node_modules\jade\lib\compiler.js:68:13)
at Object.Compiler.visitDoctype (c:\projects\newproject\node_modules\jade\lib\compiler.js:312:12)
at Object.Compiler.visitNode (c:\projects\newproject\node_modules\jade\lib\compiler.js:210:37)
at Object.Compiler.visit (c:\projects\newproject\node_modules\jade\lib\compiler.js:197:10)
at Object.Compiler.visitBlock (c:\projects\newproject\node_modules\jade\lib\compiler.js:278:12)
at Object.Compiler.visitNode (c:\projects\newproject\node_modules\jade\lib\compiler.js:210:37)
at Object.Compiler.visit (c:\projects\newproject\node_modules\jade\lib\compiler.js:197:10)
at Object.Compiler.compile (c:\projects\newproject\node_modules\jade\lib\compiler.js:52:10)
at parse (c:\projects\newproject\node_modules\jade\lib\jade.js:96:23)
at Object.exports.compile (c:\projects\newproject\node_modules\jade\lib\jade.js:152:9)
To fix your current project and any projects you build with the current version of Express, go to your layout.jade file and change the first line to: doctype html (the second line should read: html)
The issue with is known and has been resolved so it will not be an issue in a future version of Express.
https://github.com/visionmedia/express/pull/1875
Use :
doctype html
html(lang="en")
change "doctype 5" to "doctype html" on line 1 of views/layout.jade for your brand new project.