i am trying to print full page but it doesn't work tried different codes but no success
here is tried code.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<table width="94%" style="margin-left:2%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
please help me with it.
thanks
are you trying to render your page through javascript? If yes the following tutorial may help.
http://www.w3schools.com/js/js_htmldom_html.asp
Recommend reading the following API of the tutorial
document.getElementById(id).innerHTML = new HTML
Hope this helps.
this should work for you:
<html>
<head>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<input type=button name=print value="Print" onClick="window.print()">
<table style="margin-left:2%;width:94%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
note: always construct you html properly. width is a part of style tag it is not a tag itself.
Related
I would like to know how to make this HTML site responsive. It contains many iframes grouped into one table.
First, the main page.
<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:200%;">
<table>
<tr>
<td rowspan="2"><iframe name="mainframe" src="youtube cover art.jpg" width="1345" height="720"></iframe></td>
<th style="width:10px;"> </th>
<th style="width:446px;height:215px;font-size:40px;">Apps</th>
<th style="width:446px;height:215px;font-size:40px;">An overview for the day</th>
<th style="width:446px;height:215px;font-size:40px;">Settings</th>
</tr>
<tr>
<th style="width:10px;"> </th>
<td><iframe src="apps 1.html" width="446" height="500"></iframe></td>
<td><iframe src="http://feeds.bbci.co.uk/news/world/asia/rss.xml" width="446" height="500"></iframe></td>
<td><iframe src="settings 1.html" width="446" height="500"></iframe></td>
</tr>
</table>
</body>
</html>
the iframe with apps 1.html as the src
<!DOCTYPE html>
<html>
<head>
</head>
<body style="width:425px;">
blank
wallpaper
<img src="youtube.jpg">
<img src="BBC News.jpg">
</body>
</html>
and the iframe with settings 1.html as the src
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var password = "Hudson1377";
var x = prompt("Enter in the password "," ");
if (x!== password) {
alert("Please try again.");
window.location.reload();
}
</script>
</head>
<body style="width:445px;">
log out
</body>
</html>
You must use css media query for make it responsive.
But you can using percentage in width value. Example: width=100%
You can use CSS media Queries for that make sure to use min-width and max-width property and break point should follow this grid standard.
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
Bicycle reinvention ?
Use Bootstrap and other available libraries or frameworks
Here i have a code which I found on the internet but there some issues that I want to modify.
I found html, css, js text editor but I want key words to be colored like in w3schools.com. And also I want to run the code manually not live.
Here is my code: https://jsfiddle.net/qd9sp3a5/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Editor</title>
</head>
<body>
<table>
<tr>
<td>
<div class="tag">HTML (Body)</div>
<div id="html" class="content" contenteditable></div>
</td>
<td>
<div class="tag">CSS</div>
<div id="css" class="content" contenteditable></div>
</td>
</tr>
<tr>
<td>
<div class="tag">JavaScript</div>
<div id="js" class="content" contenteditable></div>
</td>
<td>
<div class="tag">Output</div>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
<script>
window.onload=function(){
var html=document.getElementById("html"),
css=document.getElementById("css"),
js=document.getElementById("js"),
output=document.getElementById("output"),
working=false,
fill=function(){
if(working){
return false;
}
working=true;
var document=output.contentDocument,
style=document.createElement("style"),
script=document.createElement("script");
document.body.innerHTML=html.textContent;
style.innerHTML=css.textContent.replace(/\s/g,"");
script.innerHTML=js.textContent;
document.body.appendChild(style);
document.body.appendChild(script);
working=false;
};
html.onkeyup=fill;
css.onkeyup=fill;
js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
border:0;
height:100%;
margin:0;
padding:0;
width:100%;
}
td{
border:2px solid black;
height:50%;
padding:25px 5px 5px 5px;
position:relative;
vertical-align:top;
width:50%;
}
div.tag{
position:absolute;
right:5px;
top:5px;
}
</style>
Here i have a code which I found on the internet but there some issues that I want to modify.
I found html, css, js text editor but I want key words to be colored like in w3schools.com. And also I want to run the code manually not live.
Here is my code: https://jsfiddle.net/qd9sp3a5/
Key words as in the tags? if so, all you need to do is:
div.tag{
position:absolute;
right:5px;
top:5px;
color: 'your color'
}
by keywords he means like <head></head> <div></div> or really anything that is a tag header or footer for css,html,js etc not the pieces they has in the code already i’ve been searching for this answer for a while and still cant find a direct answer that actually works
I'm using ckeditor with math formula, when I insert new math formula, it can good display but when I edit the content in editor, it seem not can correct display or read format of math formula...
My source:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard-all/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
</head>
<body>
<table border="0">
<tr>
<td width="640" height="650">
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea>
<script>
var ir1 = CKEDITOR.replace('ir1');
CKEDITOR.config.extraPlugins = 'mathjax';
CKEDITOR.config.mathJaxLib = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';
CKFinder.setupCKEditor(ir1, 'libraries/ckfinder/');
</script>
</td>
</tr>
</table>
<body>
this is result when edit content:
within 'ir' is string of math formula..
So, How to correct display format of math formula in ckeditor when edit content ?
Thanks..
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
I have a DataTables and below a chart.
I have this :
Here is my Html code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css" />
</head>
<body>
<table id="table_statistic_1" class="display">
<caption style="font-size: 20px">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
After filling the DataTables, I put the chart.
$('table').visualize({ type: 'line' });
I would like to add my chart to the right of my DataTables. How?
I solved the problem.
I saw that the datatables loaded a *dataTables_wrapper* that took up the entire width of my page and therefore my graph is displayed below.
I then added div tags for the dataTables and the graph as a css float left and I have a container which includes these 2 tag div. I place the tags div tags left and right with width :50%
Html code :
<div id="left">
<table id="table_statistic_1" class="display">
<caption class ="caption">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="right"></div>
Css code :
.container { display:block; margin:0; padding:0; width:100%; height:400px; }
#left, #right{ float:left; display:block; margin:0; padding:0; width:50%; height:400px;}