How do I to write HTML code in Jade?
<div class="profile-env">
<section class="profile-info-tabs">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary" data-collapsed="0">
`enter code here`
<div class="panel-body">
<h2>University Admins <span><a href="add-admin.html" class="btn btn-default pull-right">
<i class="entypo-user-add"></i>
ADD Admin
</a></span>
</h2>
<br />
</div>
</div>
</div>
</div>
</section>
</div>
Please help me before I throw this computer out of the window.
You can use a online conversor like this: http://html2jade.org/
I believe it's called pug now, check this out for some basics;
https://codeburst.io/getting-started-with-pug-template-engine-e49cfa291e33
.profile-env
section.profile-info-tabs
.row
.col-md-12
.panel.panel-primary(data-collapsed='0')
| `enter code here`
.panel-body
h2
| University Admins
span
a.btn.btn-default.pull-right(href='add-admin.html')
i.entypo-user-add
| ADD Admin
br
Related
I have the following code being generated in a c# asp.net mvc application:
<div class="col-5">
<div class="row">
<div class="col-9">
<div class="card">
<div class="card-body">
<h5 class="card-title">You are currently saving a total of <b>15%</b> of your paycheck</h5>
<hr />
<p class="card-text" style="font-size: smaller">
<b>Pre-tax</b><br /><b>9.00%</b> per paycheck<br />Est. <b>$93.75 bi-monthly
</p>
<hr />
<p class="card-text" style="font-size: smaller">
<b>Roth</b><br /><b>6.00%</b> per paycheck<br />Est. <b>$62.50 bi-monthly
</p>
<hr />
<button class="btn btn-primary btn-lg btn-block" type="submit" id="submitButton">Review and Submit</button>
</div>
</div>
</div>
</div>
</div>
I have no custom css files and I am making use of all generic bootstrap css files.
This is what it looks like when the page is generated:
In the card on the right, the Pre-Tax literal, the percent, and the dollar amount and literal are bold. The text "per paycheck" and the text "Est." are not. But it looks like the entire section for "Roth" is all bold. Any suggestions as to why this is happening? I am trying to get the bolding for the "Roth" section to be the same as the "Pre-tax" section.
Any help is greatly appreciated. Thank you.
I am trying to find the parent of the span element with label First Name and go up the DOM until i get to the input element with class "mat-input-element"
I have attempted with the following xpath, but did not get the result i needed:
//div/div/span[contains(.,'First Name')]/parent::div[#class='add-users']/lib-text-input-v3/div/mat-form-field/div/div/div[1]/input
Any help would be appreciated. Thanks!
You can try with the below xpath.
//span[normalize-space(.)='First Name']/ancestor::div[#class='input-v3']//input[#class='mat-input-element']
Sample HTML: From jsfiddle
<html><head></head><body>
<div class="add-users">
<lib-text-input-v3 errortext="”Error" a="" valid="" first="" name”="">
<div class="input-v3">
<mat-form-field class="mat-form-field">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<input class="mat-input-element" type="text">
<span class="mat-form-field-label-wrapper">
</span>
</div>
</div>
<div class="mat-form-field-underline>
<span class=" mat-form-field-ripple"="">
</div>
<div class="mat-form-field-subscript-wrapper">
<div class="mat-form-field-hint-wrapper">
<div class="mat-form-field-hint-spacer">
</div>
</div>
</div>
</div>. //closes mat-form-field-wrapper class
</mat-form-field>
<div class="input-v3__label"> // same level as input-v3 class
<div class="input-v3__label--text">
<span class="ng-tns-c11-01">First Name
</span>
</div>
</div>
</div> // closes input-v3 class
</lib-text-input-v3>
<lib-text-input-v3>…..
</lib-text-input-v3></div></body></html>
I am posting the code. In the line <div class='qrcode-value'></div> it will scan the qr code and I want to make it as link so that it will redirect to the other website once clicking on it. Instead of copy and paste.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value'>
</div>
</div>
<a href="http://google.com">
<div class='qrcode-value'>
anything
</div>
</a>
fiddle https://jsfiddle.net/athulmathew/r73pn4w8/2/
You can use JavaScript to do this.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value' onclick="location.href = 'https://stackoverflow.com/questions/56946816/link-to-same-page-using-div-class';">
</div>
</div>
Read more about onclick event here.
Here is my messageboard project, I don't know why the different will influence my css layout...
I just test english,chinese,thai they both work great, but only japanese will destroy my css style..
I use en_US,ja_JP,zh_TW,th_TH php file to change language
When use English
When use japanese
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=1">
<span>This was just test the title length of board name</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:26</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=1" title="carry0987">
<span>carry0987,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=2">
<span>Default</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:6</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=2" title="carry0987y">
<span>carry0987y,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
And this is my css code
.board_list {
border-width: 1px;
border-style: solid;
border-color: #E9E9E9;
}
You should add new div inside .board_list this class and add css property clear:both;
Something like this :
Also read this article : https://www.w3schools.com/cssref/pr_class_clear.asp
here is my codepen https://codepen.io/syedsadiqali/full/BwaMEW.
I'm trying to make a Wikipedia viewer project by freecodecamp. everything is working good except I the snippets from the Wikipedia API, the html entities can't be decoded and span tags can't be replaced. I tried many things. help needed, please.
HTML
<div class="container">
<div class="row row1">
<div class="col-md-6 text-center">
<div class="text-center">
<h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2>
</div>
<input type="text" id="querybox">
<div>
<button class="btn btn-primary" id="querybutton">Search</button>
<div>
<a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a>
</div>
<div class="data" id="put"></div>
</div>
</div>
<div class="col-md-6">
<div id="target" class="list-group"></div>
<script type="x-tmpl-mustache" id="template">
{{#search}}<h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p>{{/search}}
</script>
</div>
</div>
<div class="row">
</div>
<footer>
<h3 class='text-center'>Made with love by Syed Source Code would be soon available to you on my Github</h3>
</footer>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.row1{
font-family:"Pacifico",sans-serif;
}
.btn{
margin-top:10px;
padding:20px;
font-size:30px;
}
.row{
margin-top:20px;
}
input{
font-family:sans-serif!important;
}
JavaScript
$("#querybutton").on("click",function(){
data=document.getElementById("put"); query=document.getElementById("querybox").value;
url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?";
$.getJSON(url,function(json){
var view=json.query;
var template = document.getElementById('template').innerHTML;
Mustache.parse(template);
// render the data into the template
var rendered = Mustache.render(template,view);
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
});
});
Result
https://codepen.io/syedsadiqali/full/BwaMEW
as #Paul Abbott commented I needed to use {{{snippet}}} triple mustache to render the data from Object as HTML. thanks for the answer, this answer I'm just writing to close this Question Right Answer was given by #PaulAbbott. thanks again.