I have placed a div on html page and text under it with center align. A custom java script button is also placed for printing under the div content. When i press a button it previews the text with left align. Please anyone guide how to set or apply my css or style to this div for center align. Complete html code is following written in asp.net. Thanks in advance
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="margin_issue.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDivToPrint" style="border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>
<script type="text/javascript">
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
EDIT
Your code is working awesome according to my need. I have little observations that i need to understand. I have copied two portions from your code, CSS and javascript. Please see below.
<style>
.page_size { border: 1px dotted black; text-align: left; width: 800px; height: 950px; }
.instr_date { text-align: right; padding-right: 0px; padding-top: 40px;}
.benef_name {text-align: left; padding-left: 50px; padding-top: 50px; }
.leftDiv { border: 1px dotted black; text-align: left; padding-left: 0px; }
</style>
Javascript
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style> .page_size {border: 1px dotted black; text-align: left; width: 800px; height: 950px; }</style>');
mywindow.document.write('<style> .instr_date {text-align: right; padding-right: 0px; padding-top: 40px; }</style>');
mywindow.document.write('<style> .benef_name { text-align: left; padding-left: 50px; padding-top: 50px; }</style>');
mywindow.document.write('<style> .leftDiv {border: 1px dotted black; text-align: left; padding-left: 0px; }</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
You can see above i have written two css files, one is normal under style tag and other is injected to java script and i am writing many lines for css in java script. Now i have two simple questions following:-
1- Cannot we write one css which should effect everywhere?.
2- If the answer of first question is no: then how can i avoid writing multiple css lines in java script.
Many thanks.
Have a look at the following to point you in the right direction. Instead of changing the entire page and then reverting it, open a new window to do the print. This will stop any potentially nasty bugs appearing when revert the page. Also having 2 different class names for non-print and print DIVs may be useful. You can put these in an external CSS file and then add the CSS link to the new window aswell.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
</title>
<style>
.myDiv {
border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
}
</style>
<script type="text/javascript">
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDiv">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>
Related
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
I'm growing frustrated in positioning my javascript date in the center of my html page. Everything else is centered but the javascript date.
Here's a screenshot:
My HTML:
<section>
<img id="html5logo"src="images/html5_logo.png" alt="html5" height="50" width="50" />
<img id="csslogo" src="images/css_logo.gif" alt="css" height="50" width="50" />
</section>
<br />
<p id="pagelastupdated">Page last updated:</p>
<script type="text/javascript">
document.write(document.lastModified);
</script>
And here's my CSS:
section {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 112px;
}
section img#html5logo {
display: inline;
margin-left: auto;
margin-right: auto;
}
section img#csslogo {
display: inline;
margin-left: auto;
margin-right: auto;
}
#pagelastupdated {
text-align: center;
}
script {
border: 4px solid purple;
}
PLEASE HELP ME!
You might try (adjusted to show two lines)
<p align="center" id="pagelastupdated">Page last updated:<br/>
<script type="text/javascript">
document.write(document.lastModified);
</script>
</p>
Try moving the end paragraph tag to after the end script tag, or writing the date to the document wrapped in a div and then centre that.
You're writing the date outside of the p tag, which is the one which you are centering.
Here's a quick background on what I'm trying to do. I have a contact form on my website, and when the user clicks on 'Submit', I want it to do this:
User clicks submit
Confirmation box opens, asking user to agree or disagree to the
disclaimer
if agrees = submit form
if disagrees = close confirmation box
Here is what I want to know. I don't necessarily want to style the actual alert box, since I know that is not possible, what I want to do is style the text inside the alert box; the "disclaimer". I tried just adding header tags and bold tags to it, but those just generate the text and not the actual styles.
Here's the code I'm using, its just a very simple alert box script.. if you have a better idea, please let me know.
<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
{
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}
else
{
}
}
//-->
HTML:
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
Also, another issue i'm having with this is that instead of it just closing the dialog box, it still continues the script.
You cannot style alert or confirm box. You have to use DHTML box.
Using Impromptu
Try this, I used jQuery Impromptu plugin http://trentrichardson.com/Impromptu/
Demo: http://jsfiddle.net/muthkum/4h8cX/6/
For full code, check out page source on http://fiddle.jshell.net/muthkum/4h8cX/6/show/
Using smoke.js
Demo: http://jsfiddle.net/muthkum/8qXsv/3/
UPDATE:
Here is the full code using jQuery Impromptu
You can see, I've included jquery-1.8.2.js and jquery-impromptu.4.0.min.js. Also styles are included in the below codes. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by muthkum</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>
<style type='text/css'>
/*
------------------------------
Impromptu
------------------------------
*/
.jqifade{
position: absolute;
background-color: #777777;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}
</style>
<script type='text/javascript'>//<![CDATA[
function go_there(){
$.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
buttons: { Ok: true, Cancel: false},
callback: function(e,v,m,f){
if(v){
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}else{
}
}
});
}
//]]>
</script>
</head>
<body>
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
</body>
</html>
I have a strange problem... I am developing a web app to search house rentals , and the website is showing great in FF, Chrome, but in IE i get a white page....
Could you please hint what's up with the code? Maybe some java-script problem?
I have digged out , but I am stucked.
The problem is :
</head>
<!--[if lt IE 7]>
<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>-->;
</head>
You have 2 close tag for head, and between you have a big empty div. That's what is displayed on IE.
I'd suggest going through these HTML errors as a first stage to debugging!: http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2frentforme.net%2f. There are 81 errors listed there. From a quick look, it appears the <HEAD> and <BODY> start/end tags are overlapping.
I have the following code, and the javascript console in chrome says "Can't read innerHTML property of null. Why does document.getElementById('display') turn up empty handed?
<!DOCTYPE html>
<html>
<head>
<title>Chat 3</title>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
<style type="text/css">
#username {
padding: 0px;
margin: 0px;
height: 26px;
width: 400px;
}
/* ADDED container div that wraps onlineusers and display */
#container {
margin: 10px 0;
}
/* use float: left to put them side-by-side */
#display {
padding: 0px;
margin: 0px;
border-style: solid;
border-width: 1px;
overflow: auto;
height: 400px;
width: 400px;
float: left;
}
#onlineusers {
padding: 0px;
margin: 0px;
height: 400px;
width: 200px;
border-style: solid;
border-width: 1px;
float: left;
}
/* Added container2 to wrap inputline and sendbutton */
#container2 {
margin: 10px 0;
}
#inputline {
padding: 0px;
margin: 0px;
height: 26px;
width: 350px;
float: left;
}
#sendbutton {
padding: 0px;
margin: 0px;
height: 30px;
width: 50px;
float: left;
}
/* this is a well used "hack". */
.clearfix {
clear: both;
}
</style>
</head>
<body onload="document.getElementById("username").focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
</body>
</html>
Move your script-section down to the bottom of the page. Otherwise it is executed before the page has been loaded.
Btw: Putting scripts at the bottom of your page is even a "best practice" and recommended by Google, Yahoo & Co
You're calling showmsg before the whole page (and hence the display div) is loaded. Hence the error. Call it from onload and it'll work.
Add this function to the <head>
function handleLoad()
{
document.getElementById("username").focus()
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
}
and call it from onload
<body onload="handleLoad()">
Put your script tag at the end of the document:.
In your case the page has not been completely parsed into DOM tree, but your script executes anyway:
<body onload="document.getElementById('username').focus()">
<input type="text" id="username" />
<div id="container">
<div id="display"></div>
<div id="onlineusers"></div>
<div class="clearfix"></div>
</div>
<div id="container2">
<input type="text" id="inputline" length="55" />
<input type="button" id="sendbutton" value="Send" />
</div>
<script type="text/javascript">
function showmsg(str){
var display = document.getElementById('display');
display.innerHTML += "<p>" + str + "</p>";
}
if("WebSockets" in window){
pass;
}else{
showmsg("Your browser doesn't support WebSockets. Try Google Chrome.");
}
</script>
</body>
This is also considered a good practice for performance reasons:
http://developer.yahoo.com/performance/rules.html#js_bottom