I have a node.js script which i am working on.
I have multiple html files which I want to merge using handlebars into one file. This is what I want to get done.
Please I hope you do not mind the output from the editor. It kept on converting the code into html output so I had to format my output in this format.
This is my desired output the main html file.
< html >
< head >
< title>My node file</title>
< link rel=stylesheet href=bootstrap/css/bootstrap.min.css> <!-- load bootstrap css -->
< link rel=stylesheet href=bootstrap/css/font-awesome.min.css> <!-- load fontawesome -->
< /head> <br>
< body> <br>
< div class=container>
< div class=col-sm-6 col-sm-offset-3>
< h1><span class=fa fa-sign-in></span> Login</h1>
< form action=/login method=post>
< div class=form-group>
< label>Email</label>
< input type=text class=form-control name=email>
< / div>
< div class=form-group>
< label>Password</label>
< input type=password class=form-control name=password>
< /div>
< button type=submit class=btn btn-warning btn-lg>Login</button>
< /form>
< p>Need an account? <a href=/signup>Signup</a></p>
< p>Or go <a href=/>home</a>.</p>
< /div> <br>
< /div>
< /body>
< /html>
These are the different files
content.html
<!doctype html>
< html>
//include header.html
< body>
< div class=container>
< div class=col-sm-6 col-sm-offset-3>
< h1><span class=fa fa-sign-in></span> Login</h1>
//include form.html
< hr>
//include another.html
< /div>
< /div>
< /body>
< /html>
form.html
< form action=/login method=post>
< div class=form-group>
< label>Email</label>
< input type=text class=form-control name=email>
< /div>
< div class=form-group>
< label>Password</label>
< input type=password class=form-control name=password>
< /div>
< button type=submit class=btn btn-warning btn-lg>Login</button>
< /form>
header.html
< head>
< title>My node file</title>
< link rel=stylesheet href=bootstrap/css/bootstrap.min.css> <!-- load bootstrap css -->
< link rel=stylesheet href=bootstrap/css/font-awesome.min.css> <!-- load fontawesome -->
< /head>
another.html
< p>Need an account? <a href=/signup>Signup</a></p>
< p>Or go <a href=/>home</a>.</p>
in php you can do something like this
include('file1.php');
some other text which can be added to the html
include('file2.php');
Related
i'm having syntax issues with a 'razor inside html inside razor if statement' Where is the problem with my code ?
This is for a login page
# {
ViewBag.Title = "UserDashBoard";
}
< fieldset >
< legend > User DashBoard < /legend>
#if (Session["UserName"] != null)
{< text >
Welcome #Session["UserName"].ToString() < /text>
} < /fieldset>
error in line 8 missing '}'
Thank you it was all about blank spaces
#{
ViewBag.Title = "UserDashBoard";
}
<fieldset>
<legend> User DashBoard </legend>
#if (Session["UserName"] != null)
{<text>
Welcome #Session["UserName"].ToString() </text>
} </fieldset>
i feel dumb...
I have a table in whose column I show both a image and text.Image is being displayed on upper side and text is being displayed below it.But I want to show both side by side.Moreover I want table to be fit on screen i.e I don't want to have scroll bars.
My Html code is
<% #page language = "java"
contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1" %>
<% #taglib uri = "http://java.sun.com/jsp/jstl/core"
prefix = "c" %>
<% #taglib prefix = "fmt"
uri = "http://java.sun.com/jsp/jstl/fmt" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "refresh"
content = "30" >
< title > Insert title here < /title>
<style>
.green {
color: green;
text-transform: capitalize;
}
.red {
color: red;
text-transform: capitalize;
}
</div >
< /style>
</head >
< body style = 'margin:0;padding:0;' >
< jsp: useBean id = "bs"
class = "beam_Status.BeamStatus_Bean" >
< /jsp:useBean>
<div id="loadData">
<CENTER><H1>BEAMLINE STATUS</H1 > < /CENTER>
<center>
<table border = "1" width="100%" height="60">
<tr>
<th><h1><b>BEAMLINES</b > < /h1></th >
< th > < h1 > < b > STATUS < /b></h1 > < /th>
</tr >
< c: forEach
var = "country"
items = "${bs.beam_CurrentStatus()}" >
< h3 > < b >
< c: choose >
< c: when test = "${country.value == 'IN OPERATION'}" >
< tr >
< td class = "green"
style = "text-transform: uppercase;" > < center > < h2 > $ {
country.key
} < /h2></center > < /td>
<td class="green" style="text-transform: uppercase; " ><img style="vertical-align:middle;" src = "red.png" height="50" width="50" / > < h2 > $ {
country.value
} < /h2></td >
< /tr>
</c: when >
< c: otherwise >
< tr >
< td class = "red"
style = "text-transform: uppercase; " > < center > < h2 > $ {
country.key
} < /h2></center > < /td>
<td class="red" style="text-transform: uppercase; " ><img style="vertical-align:middle;" src = "green.png" height="50" width="50" / > < h2 > $ {
country.value
} < /h2> </td >
< /tr>
</c: otherwise >
< /c:choose>
</b > < /h3>
</c: forEach >
< /table>
</center >
< /div>
<script>
< /html >
My output.
I want the second column text and image to be aligned side by side and table to fit the screen.
Thanks in advance.
Got it, just added
display: inline-block
<h2 style="vertical-align:middle; display: inline-block;">
I think it's simpler to break the column with image and text in 2 distinct columns: 1 for the image and 1 for the text. In css you can use: table {width:100%}
Make the following changes in the image tag:
add display:block and add float:left
In the text to show it side by side, just add float:left assuming text is inside a block element like a p tag.
For table to occupy full screen use width:100%;
How do I align add this text properly?
my code :
data[0]=hello 123
data[1]=hellowq 345
data[2]=heloowaaa 678
for (var i = 0; i < data.length; i++) {
obj += "<pre><li>" + data[i] + "</li></pre>";
}
my actual input :
hello 123
hellowq 345
heloowaaa 678
output :
hello 123
hellowq 345
heloowaaa 678
I would like to get output like this:
hello 123
hellowq 345
heloowaaa 678
You have invalid HTML, the only valid child of either a <ul> or <ol> is an <li> element; the <pre> elements should be within the <li> elements:
for (var j = 0; j < data.length; j++) {
obj += "<li><pre>" + data[i] + "</pre></li>";
}
And the CSS for the <pre> elements set to white-space: pre-wrap (or similar), this is the usual default styling of that element, but it's possible that the defaults have been overwritten or set differently in your browser.
As I claimed in the comments, you probably add the same amount of spaces to each label/value-pair. The solution is probably in the code we don't see where you would have to subtract the length of your label+value from the number of whitespaces generated.
A better way to do this would be to layout in html/css instead. A quick and dirty example.
HTML
<ul>
<li>Domdido <span class="value">$8</span></li>
<li>Domdido123 <span class="value">$8</span></li>
</ul>
CSS:
ul{list-style:none;padding-left:0;
width:50%;
}
.value{float:right;}
http://jsfiddle.net/tqs2rvrd/
This jade:
h1 a < b
Produces this HTML:
<h1>a < b</h1>
How can I get it to automatically escape the <? (i.e. not typing in < myself)
<h1>a < b</h1>
this h1 a < b is a shortcut for h1!= "a < b"
just use this here:
h1= "a < b"
I have this string of html code and I want to display it in a Powerpoint Text box properly formatted as per the HTML code using VBA.
Any suggestion on how I do that?
I inserted some spaces in the code below to make it visible
Code:
< div> < font face=Arial color=black> </font><font face=Arial size=2 color=black><strong>Heading < /strong>< /font>< /div>
< div> & nbsp;< /div>
< div>< font face=Arial size=2 color=black>Text Sample< /font>< /div>