I'm designing a web application where a large portion of the site will be displaying user-generated documents. Now, I've already implemented LaTeX source code and pdf rendering on the website, but I am still can't render Microsoft Word files (.doc and .docx) on the site. I've looked around and found a similar question (here), but it was never answered. I'm wondering whether or not using a web-based solution like Google Docs or doing it programatically on the server with OpenOffice are viable solutions. A pure JavaScript solution would be ideal though.
Based on Vikram's answer, you could use Google Docs Viewer in order to render the files. This way it should work on all browsers.
Instead of
Doc 1
use
Doc 1
But you have to urlencode the URL. For example,
http://research.google.com/archive/bigtable-osdi06.pdf
becomes
http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf
You can go to https://docs.google.com/viewer in order to generate the links easily.
Moreover, Vikram's code is old and ugly. You should use something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Open Doc</title>
<style type="text/css">
/*<![CDATA[*/
.clear{clear:both;}
#list{float:left;margin-right:50px;}
#wrapper{overflow:hidden;}
#awindow{width:100%;height:440px;}
/*]]>*/
</style>
</head>
<body>
<ul id="list">
<li>Doc 1</li>
<li>Doc 2</li>
<li>Doc 3</li>
</ul>
<div id="wrapper">
<iframe id="awindow" name="awindow" src="title.html"></iframe>
</div>
<div class="clear"></div>
</body>
</html>
Have you tried something like this already?:
<html>
<head>
<title>Open Doc</title>
</head>
<body>
<DIV align="CENTER">
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">
<TR>
<TD WIDTH="25%" ALIGN="left" VALIGN="TOP">
Doc 1<br>
Doc 2<br>
Doc 3
</TD>
<TD WIDTH="75%" ALIGN="CENTER" VALIGN="TOP">
<iframe name="awindow" frameborder=2 width=580 height=440 src="title.html"></iframe>
</TD></TR></TABLE></CENTER>
</DIV>
</body>
</html>
modify the href attributes to path on your server where you will place these documents
Related
When I type in the following code from Action Nudge to show an eBay stock list, such as below...
<script
type="text/javascript"
src="//www.auctionnudge.com/feed/item/js/theme/responsive/page/init/img_size/120/cats_output/dropdown/search_box/1/show_logo/1/lang/english/SellerID/expedite-allocations/siteid/3/MaxEntries/6">
</script>
<div id="auction-nudge-items" class="auction-nudge"></div>
It doesn't work in Atom (Code Software). When you close the script with an ending tag as you see within the code Action Nudge has given me, the code loses it's colour like it has become defunct, thus not registering correctly nor showing within the site when I load it. Do I need to put something above the script for it to work? I'm confused. Please help. P.s. I'm a beginner to HTML/CSS but have never used JavaScript.
Here is the whole code on the web page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width">
<meta name="description" content="Providing for your medical needs">
<meta name="author" content="Benjamin Willis">
<title>Expedite Allocations</title>
<link rel="stylesheet" href="./style.css">
</head>
<body style="background-color:white;">
<header>
<div class="container">
<div id="branding">
<img width="300" height="150" src="Expedite-Logo-jpg.png" alt="Expedite Allocations" />
</div>
<nav>
<span><a href="Expedite Allocations Website.html">Home<a/></span>
<span><a href="about us.html">About Us<a/></span>
<span><a href="equipmentstore.html">Equipment Store<a/></span>
<span><a href="location.html">Location<a/></span>
<span><a href="contact us.html">Contact Us<a/></span>
</nav>
</header>
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/page/init/img_size/120/cats_output/dropdown/search_box/1/show_logo/1/lang/english/SellerID/expedite-allocations/siteid/3/MaxEntries/6"></script><div id="auction-nudge-items" class="auction-nudge"></div>
Oh! So it’s working for me, which was confusing me. But I was running it online, and I’m guessing you’re opening a file. You need to specificity either http:// or https:// before the link to the eBay script. Right now there’s just a //, which tells the browser to use the protocol as the page is being loaded with. When opening a file on your computer, this protocol is file://. So I’m guessing the browser is trying to use the file protocol to connect to eBay, which is obviously failing.
I have build a website with an iframe to display multiple subpages.
My goal is to change the value of an ID on the parent window, from the child page that is loaded in the Iframe. All the pages are in the same domain. I am currently using the following code, and it works fine in Internet explorer, but doesn't do anything in Chrome? I hope someone will have the awnser to fix it so it will work in all browsers.
Thank you in advance!
Here's the html of the parent window:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Webpage</title>
<base target="iframe">
<!-- External Javascript -->
<script src="javascript/index.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Banner -->
<div class="Banner">
<div id="Site-name">
Text to be changed
</div>
<img class="Logo" src="Afbeeldingen/Logo.png" alt="logo">
</div>
<!-- Body -->
<div class="iframe">
<iframe name="iframe" src="iframe.html"></iframe>
</div>
<!-- Footer -->
<div class="Footer">
<div class="copyright">
Made by Jan Pieter van den Oever 2019 All rights reserved ®
</div>
</div>
</body>
</html>
And here is the java script of the index file:
function changeText(text) {
document.getElementById('Site-name').innerHTML = text;
}
Here is the iframe html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>iframe</title>
<!-- CSS -->
<link rel="stylesheet" href="css/iframe.css">
</head>
<body>
<div class="Button-container">
<div class="Button-center">
<div class="Button" onclick="location.href='nextpage.html';parent.changeText('The new text to be displayed in the parent')">
<div class="Button-text">
<br><br><br>
Start
</div>
</div>
</div>
</div>
</body>
</html>
With jQuery:
function changeText(newText) {
$('#Site-name').text(newText)
}
Just include jQuery in your project and replace the changeText function with the above one. If the above code doesn't work, try the below one:
function changeText(newText) {
$(document).find('#Site-name').text(newText);
}
It's so confusing, so you are under the same domain, sub-domain too I guess?
Domain is not the only indicator of same origin, you could try to iframe yourdomain.com/proxy.google.com as an example. So for all your browser cares that is still a different origin, or else don't iframe it. Calling it .html is meaningless, you can have it .exe and the browser will still attempt to render the dom.
This issue arises when you're trying to merge 2 incompatible frameworks quick and dirty, like for example you need an interface where the main is using ExtJS and the child is Angular... And the only proper/legal/right answer is.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You might get lucky and find a hack of some sort but believe me it will only be temporary. PostMessage was written exactly for this purpose, so 2 globals can safely communicate and react to events.
I decided to learn jee and I was creating a jsp file but I noticed something really weird, my dropdown works when I display my file on eclipse's internal browser but the drop down doesn't work on Torch or Internet Explorer, I tried to take off everything else to find where does the problem come from; and I found something, first, here's the code if you guys notice something:
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" />
<jsp:output doctype-root-element="html" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"></link>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js" /> script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
<div>test</div>
</body>
</html>
</jsp:root>
ok, the code seems simple and correct for me, but when I try to display it on Torch and I inspect it I find this:
the problem found in the inspection of the element
As you may have noticed:
The "test" word used to debug isn't showing
The script tag isn't closed and it seems like there is the closure of a body tag then the html one?
I've tried adding the into the and I get a blank page on Torch, but still works on eclipse's internal browser.
Guys I feel so stupid like I'm missing something obvious or I don't know, if you have any suggestion, as obvious as you may think go ahead and say it please :D
P.S: I've taught of encoding problems but how would I check that ?
This question already has answers here:
Uncaught ReferenceError: $ is not defined error in jQuery
(4 answers)
Closed 7 years ago.
Hi as new Developer I've never actually created a JS file from "scratch" before and when I try to write something basic to see if my jQuery works dev tools just tells me "reference error". I thought at the end of a js doc i just added like }); (jQuery, window) or something along those lines but nothing I've tried has worked.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<script type="text/javascript" src="default.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<div class="column"> Solution Assessment</div>
<div class="column"> Design</div>
<div class="column"> Build</div>
<div class="column"> Deploy</div>
<div class="column"> Test</div>
<div class="column"> Live (BAU)</div>
</div>
</body>
</html>
basic js
// JavaScript source code
$( document ).ready(function() {
// Your code here.
});
I'm assuming I need to reference in the js page as well but I've no clue what the correct syntax is... Sorry for the 'newbie' question I've been looking for an hour or so and not been able to google properly.
First you run your script which tries to use jQuery:
<script type="text/javascript" src="default.js"></script>
Then you load jQuery:
<script src="jquery-1.11.3.min.js"></script>
You can't use jQuery before you load it. Swap the order of your scripts.
I am trying to get AutoComplete to work on a website application I am making. I have stripped my code down to the bare essentials and I still cannot get it to work. I got the source file from http://www.phpguru.org/static/AutoComplete.html and I have done my best to implement it exactly how they did on their website demo. My test code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="/Management/AutoComplete.js"></script>
<div id="content">
<script type="text/javascript">
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1) {
window.onload = function(){
data = ['Joes Plumbing1','Joes Plumbing2','Joes Plumbing3','Joes Plumbing4'].sort();
AutoComplete_Create('customers', data);
}
}
</script>
<form id="form" action="" method="post">
<table border="0">
<tr>
<td>Customer Search</td>
</tr>
<tr>
<td><input type="text" id="customers"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is a bit more back ground info that may help you help me:
My server works fine with other .js files.
I copied and pasted the AutoComplete.js (NOT AutoComplete.old.js) file I downloaded from the site mentioned above, and didn't touch it at all.
Why isn't this working?
#Goran answered my question correctly in his comment to my question so props to him. The problem was my if statement:
if (location.href.indexOf('/JavaScripts/AutoComplete') != -1)
Once I made the string /JavaScripts/AutoComplete match what was in my address bar everything worked fine!