HTML on Coinidea's Blog

[Javascript] Calling the Printer from a Web Page

Tue, 01 Mar 2016 09:17:03 +0000

Some people reported that clicking doesn’t respond. I’ve tested this on both Chrome and IE and it works:

I think the likely reason is that jQuery was not included. I’ve now added jQuery from a CDN and updated the code to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<html>
<head>
 <meta charset="utf-8">
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
 <title></title>
</head>
<body>
 <div id='div1'>Put the content to print here</div>
 <div id="div2">div2 content</div>
 <a href="javascript:printHTML('#div1')" target="_self">Print</a>
 <script language="javascript">
 function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
 }
 </script>
</body>
</html>

Original Javascript code, requires jQuery:

1
2
3
4
5
6


function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
}

[HTML] Differences and Connections Between DIV and Table Page Layouts

Sat, 23 May 2015 05:38:17 +0000

Differences and Connections Between DIV and Table Page Layouts

There is currently a debate over whether to use traditional Table or the newer DIV for web page design. Some say Table is better – faster to develop, easier to control, and better browser compatibility. Others believe DIV is better and represents the future trend, mainly for the following reasons:

DIV+CSS layouts save page code compared to Table layouts, and the code structure is cleaner and more readable.
DIV+CSS development is faster than Table with more precise layouts, though hand-written code increases noticeably. DIV+CSS layouts make website layout modifications simpler.
DIV+CSS layouts can adapt to future multi-client requirements.
DIV+CSS layouts save site storage space and bandwidth. These are all advantages of DIV.

With so many benefits of DIV, you might be tempted to learn it. DIV and Table each have their strengths, and in most cases they can be used interchangeably. I believe the correct standards-compliant design philosophy is: use DIV and other layout elements to create page design layouts, positioning, color blocks, images, etc. Use Table, UL, and similar elements to display data on the page. Because DIV does not behave like Table in IE, where the entire Table must be downloaded before any content is displayed (Firefox does not have this issue), using Table for layout is clearly not ideal, especially with large amounts of data – it is noticeably slower in IE. DIV handles this much better. Of course, DIV can also serve to organize data.

DIV for layout, Table for displaying data – this is the most fundamental design principle today.

Can a Table contain a DIV? And vice versa, can a DIV contain a Table?
Of course it can.
Does DIV serve the same purpose as Table?
DIV’s functionality is similar to Table, but DIV has better XML support and is more flexible to use, which is why it is recommended as the new approach for web page layout.
Which is faster, DIV or Table?
DIV is relatively faster. Web content display requires downloading a complete block of content before rendering. DIV layout consists of many independent, relatively small blocks, while Table layout typically involves multiple layers of nested tables forming larger download blocks.

Additionally, the difference between . and # in CSS:

. is called using class
# is called using id

[HTML] Passing Values in HTML

Sat, 23 May 2015 05:35:22 +0000

In JavaScript, you can use the window.location.href property to get the full URL. This means we can pass parameters using GET mode, i.e., the form’s method="GET".

Below is a JavaScript function that retrieves values submitted via GET mode.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Request(strName) {
 var strHref = window.document.location.href;
 var intPos = strHref.indexOf("?");
 var strRight = strHref.substr(intPos + 1);

 var arrTmp = strRight.split("&");
 for (var i = 0; i < arrTmp.length; i++) {
 var arrTemp = arrTmp[i].split("=");
 if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
 }
 return "";
}

Usage:
var id=Request("id");
document.write(id);

[HTML] Preventing Duplicate Form Submission on F5 Refresh

Sat, 23 May 2015 05:30:50 +0000

Page A has a form.
You submit this page and are redirected to page B.
On page B, pressing the refresh key will trigger a dialog asking to resend the form data.

This problem can be solved from the web development perspective.
Page A submits to your server page (ASP, JSP).
The server page processes the request but does not return page B to the user directly.
Instead, it returns a simple page C, such as a redirect page.

This immediately redirects to page B – in this case, main.jsp.

If you refresh on page B, the resend dialog will not appear.
If you press “Back” on page B, you will go back to page A.
The user will not notice the intermediate page C at all.

Going further, you can design a JavaScript dialog box that, once confirmed, will not pop up again regardless of whether the user refreshes or navigates back.
redirect.jsp

Batch Word to HTML -- ConvertWordToHTML [Update: Word Converter Tool]

Sun, 11 Jan 2015 10:34:33 +0000

I recently had a requirement to batch convert Word files to HTML.

For a small number of Word files, you can simply use Word’s built-in “Save As” feature. But when dealing with a large number of Word files, it becomes quite complicated.

After searching online, I found solutions in PHP, Python, Ruby, and C#. Among them, I found a tool called “Xunjiie Converter”, but it didn’t quite fit my needs, so I decided to write my own. Since Word is a Microsoft product, I figured C# might be the best choice for this task.

I open-sourced a GUI-based solution on GitHub: https://github.com/hujiulin/ConvertWordToHTML [Currently single-threaded; will be converted to multi-threaded later].

Screenshots of the running application:

Initial program interface:
“Open” to select an input folder containing Word documents:
“SaveAs” to select an output folder:
Program finished running:
Input and output results:

Program notes:

Dependencies: Windows OS, .NET Framework 3.5, Office Word
Word’s “Save As HTML” offers several format options: single web page (mht), web page (htm), and filtered web page (htm). I chose the filtered HTML option, which converts all formulas to gif or jpg images. A properly filtered htm file won’t contain Microsoft’s messy formatting information.

GitHub: https://github.com/hujiulin/ConvertWordToHTML

Download: http://devhu-github.stor.sinaapp.com/ConvertWordToHTML.rar

2015-1-24 Update:

Rename solution and project to WordConverter; Add feature: convert word to PDF; ADD feature switch specified ext;

The Word Converter tool now supports both HTML and PDF formats.

Updated GitHub link: https://github.com/hujiulin/WordConverter

Download: http://devhu-github.stor.sinaapp.com/WordConverter.rar