Javascript pop-up window -updated - javascript

I copied this code from "www.hotscripts.com", http://www.advancebydesign.com/itemdetails.php?item=15. What it does it just displays a simple window in the middle of the screen.
3 very simple steps are required:
1) create a button <input type="button" onclick='Javascript:my_box.Show();' value="Show Popup Box">
2)include this into head <script language="Javascript" type="text/Javascript" src="jscpopupbox.js"></script>
3) and also this added to the head:
my_box = new jscPopupBox();
my_box.width = 400;
my_box.height = 450;
content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
content_html+= "background-color:#CCF;clear:both;\"><input type=\"button\" ";
content_html+= "style=\"float:right;height:26px;width:26px;\" value=\"X\" ";
content_html+= "onclick='my_box.Hide();'></div>\n";
content_html+= "<iframe src=\"../license.txt\" width=\"100%\" style=\"";
content_html+= "border:none;padding:0;margin:0;\" height=\"420px\"></iframe>";
my_box.html = content_html;
What I dont get is why the windows on my website appear on the upper left corner, instead in the middle. I haven't touched the source code, and when I try it on a plain HTML page it seems to work. Is my CSS interfering?
I removed all the CSS from my website, and eventually I found out that the problem was not it, but this <!DOCTYPE HTML> on top of the page. What does this has to do with the javascript section? Isn't the declaration part that tells the browser what page it is reading? anyway, when i delete it everything work fine. (btw my page includes HTML5 Video.)

try changing this
content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
to this
content_html = "<div style=\"padding:0;height:30px;margin:auto;border:none;";

The doctype tells the browser what version of the HTML spec to to use, you may experience differing results with different browsers with certain doctypes.
Some doctypes expect all tags to be closed, do/don't work with self closing tags etc.
Generally this will only affect your HTML, but if your JS is creating HTML then it can be affected indirectly.

This is overkil for creating a popup that is shown or hidden.
Normally just include the DIV that you want to show with a default CSS class as display:none then either add a new class with display:blockor more cleanly use Jquery to toggle the classes.

You might want to try a more sophisticated doctype definition. You'll find info from the W3C here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Also, some of my xhtml pages use an xml definition header at the very top: starting something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Related

HTML to word converting using javascript

I am trying to convert HTML to word (.docx) by using JavaScript. I am using this http://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html plug-in for conversion. But this one is just converting every thing inside the HTML file. i mean with head tag all elements even with some content inside. output file looks like this
Mime-Version: 1.0 Content-Base:
file:///home/userprofile/JsWs/sample.html Content-Type:
Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"
--NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: file:///home/userprofile/JsWs/sample.html
<p>this is going to be paragraph </p>
</body></html>
--NEXT.ITEM-BOUNDARY--
and my html is
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#export-content").wordExport();
});
});
</script>
<div id="export-content">
<p>this is going to be paragraph </p>
</div>
<a class="word-export" href="javascript:void(0)"> Export as .doc </a>
</body>
</html>
Help me out how can i convert content of HTML in word.
I don't believe this will open in Microsoft Word consistently on all devices. I've actually been working on a similar project googoose. It is meant to convert html to word documents as well. This does work for me on both my desktop and mobile phone version of Microsoft Word.
From my testing, Word will have problems with MIME header, and also the fact that there are no html, body tags, etc.
You should look into this project if you're still trying to do this. It should be supported for some time, as there's also a Wordpress Plugin that uses googoose, which is linked to on the readme. The default action is to download the document on page load, but you can set it to be run onClick. For example,
Just include jquery and this plugin.
<script type="text/javascript" src="http://github.com/aadel112/googoose/jquery.googoose.js"></script>
Then to invoke onClick
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$(document).googoose({
area: '#export-content'
});
});
});
With googoose you can include a table of contents, header, footer, automatic page numbering, etc. You can open the document up in Print view, set the margins, and page size. It's way more configurable than the referenced script, which is not configurable at all.
Try this,
function ConvertToHtml()
{
var div = document.createElement("div");
div.id = "export-content";
div.innerHTML = "<p>this is going to be paragraph </p>";
document.body.appendChild(div);
$("#export-content").wordExport();
}

How to display a complete html page when I have it's source html in iframe?

I want to display another html page on my html page, that html page is generated. So I don't have it's src, only the content. It has doctype, head, body, all stuff. So I decided to use iframe. The problem is that I can't assign the whole text to a variable, as I get errors, that there is an unsupported character, like "<" etc. How to deal with it?
I'm trying to do something like this:
window.onload = function() {
var iframeDocument = document.getElementById("myIframe").contentDocument;
var ss = "
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
</head>
<body>
</body>
</html>";
iframeDocument.write(ss);
iframeDocument.close();
}
So my problem is how to escape that text so it won't cause browser errors?
Also html content is generated dynamically, so in my code there is no that text, there is struts action variable. But after my code gots executed in browser, that's what I see in there.
The easiest way to solve this is to create a new aspx page, that creates that html you need in your iframe and set the src of the iframe to that aspx page (or php, depends on what you are using).
So lets say you create a new aspx page called Frame.aspx. You then add <iframe src="Frame.aspx?SomeParameter=SomeValue" /> to your parent window.
This is a much nicer approach and much more maintainable. Also it prevents having the iFrame contents twice (once in your javascript variable and once as content of the iframe).

Update Text Inside Page With Image

I am working with Delphi7 and TEmbeddedWB. I have some difficulty to update text of a page in twebbrowser. Because that webpage contains images. So Complete Html code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'#$D#$A'
<HTML>
<HEAD>'#$D#$A'
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>'#$D#$A'
<META name=GENERATOR content="MSHTML 8.00.7601.17514">
</HEAD>'#$D#$A'
<BODY>'#$D#$A'
<DIV align=center><**IMG '#$D#$A'src="file:///C:/Program%20Files/image/c.jpg"></DIV>
<FONT '#$D#$A'size=2 face=Arial><SPAN style="FONT-FAMILY: Arial; FONT-SIZE: 10pt">'#$D#$A'<P>**Hello «Forename», '#$D#$A'thiss<BR><BR><BR>«signature»<BR>**</P></SPAN></FONT>
</BODY>
</HTML>'#$D#$A.
So I need to update only text like from (Hello «Forename» this «signature») to (this is a demo page). When I go to set Doc.Body.innerText := this is a demo page. Then On showing page image does remove, only text is display.
Please tell me how would be update text inside page with image. Please help me
Maybe you can use the StringReplace function of Delphi to replace the text in the HTML of the browser, so something like:
Doc.Body.innerHTML := StringReplace(Doc.Body.innerHTML, '«signature»', 'Your Signature', []);
innerHTML should return the body contents, including all elements, while innerText only gets the text, without markup.
A nicer way would be to use methods like getElementById and other similar methods that you have available in e.g. Javascript, but I don't know if those methods are exposed by TEmbeddedWB.

Stylesheet ignored when using body onload and document.write

I am messing around with JavaScript experimenting to get a feel for it and have already hit a problem. Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="testing.js"></script>
</head>
<body onload="writeLine()">
</body>
</html>
Here is the JavaScript testing.js:
function writeLine()
{
document.write("Hello World!")
}
Here is the style sheet styles.css:
html, body {
background-color: red;
}
So a very simple example, but I may have chose an awkward example, using on-load in a body tag. So the code above loads and runs the function, but the style sheet does nothing, unless I remove the script tags in the head. I have tried putting the script tags everywhere else, but nothing works. I have researched on-line how to properly link to JavaScript files, and have no found no clear solution, can anyone point out my error?
I have used JavaScript before, but I want a clear understanding from the beginning before I use it any longer
You cannot use document.write after the document is closed (which it will be when onload fires) without destroying the existing document (including links to stylesheets).
Instead, use DOM manipulation, which is covered by chapters 8 and 9 of the W3C JavaScript Core Skills.
Your problem is with the document.write() called in a wrong moment*. This method prints given text at current place in the page as was intended to work while the page still loads. Because you are calling it when the whole page was loaded, the results are unexpected (undefined?)
Instead you should manipulate the dom tree directly:
function writeLine() {
var text = document.createTextNode("Hello World!");
document.body.appendChild(text);
}
Actually in Opera browser I see red background for few milliseconds and then it goes back to white. Try commenting out document.write() - the background is as expected. Moreover you should include <script> tag at the end of body, but this won't solve your problem.
* to be honest, there is no good moment for calling document.write(), avoid it
In your particular example it doesn't matter where the script tag is added as the document.write command executes after the content is rendered, overwriting the existing content.
If you add an alert before overwriting the content you can see your page is red before it gets overwritten with Hello World.

How can I do a script to catch strings as input and open them on a firefox document?

How can I do a script to catch strings as input and open them on a Firefox document? Each link would go to a different window or tab. Any ideas would be much appreciated.
I just want to be able to take some links and open them. For example I have 50 Links. And copying and parsing those 50 Links take a really long time and also a lot of work. If I can just write a script to read those links and let the computer do the work, it will be very helpful for me. I just don't know how to write that or where because it does not sound too hard (just gotta know how to). Thanks for any suggestions.
if i got you right, i guess you could do something like this. This will open the four urls listed but it will probably be blocked by the popup blocker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
<!--
var dir = new Array();
dir[0] = "http://www.creativecorner.cl/";
dir[1] = "http://www.sourcing.cl/";
dir[2] = "http://www.feeds.cl/";
dir[3] = "http://www.neonomade.com/";
for(i = 0 ; i < dir.length ; i++){
window.open(dir[i],'autowindow' + i,'width=1024,height=768');
}
-->
</script>
</body>
</html>
Write this to a file names "links.html" on your hard disk:
<html>
<head><title>Your links</title></head>
<body>
Your links:<br />
XXX<br />
</body>
</html>
Replace the two "XXX" with one link and emit one "link" (a) line per link. You should be able to do that in most text editors with a little search'n'replace. After you're done, save the file and open it in your browser.
Another option is to look at the bookmark file of your browser and to duplicate the format. You can usually ignore things like "last visited", etc. Just add the links.
If you want to do this in JavaScript, you will need to use a form with a textarea. Create a small HTML document with a form, the JavaScript, the textarea and a div for the result.
Add a button which calls a JavaScript function which takes the text from the textarea, split it into lines and create the HTML above (only the link-lines) as a String. Now assign this string to the attribute innerHTML of the div to make the links clickable.

Categories