I'm having to develop a html page on a platform called Unily which doesn't allow me to use any JS or CSS (other than inline). The page is long and I want to use anchors for them to navigate back to the top of the page. This is fine when you click top the first time, but because the url is now #TOP if you scroll down and click on a #top link again, it does nothing.
Is there any way at all without using JS that I can get this to work multiple times?
You can use inline javascript to do this.
<html>
<script type="text/javascript">
function scrollTo(anchor) {
location.hash = anchor;
location.hash = "";
}
</script>
<style>
div a { display: block; min-height: 1000px; background-color: blue;}
</style>
<body>
<div>
<a id="loc1">text</a><br>
</div>
go to Loc 1
</body>
</html>
The above snippet doesn't work when embedded but you can easily copy it to an html file on your computer and run it in your local browser. It works and doesn't even modify the URL so you can avoid ugly #'s in your URL.
I am developing a small web application in which I have an object element (that contains an embed) that I use to display small documents.
The documents can be PDFs or plain text files (.txt) that I get from a web service in the form of a base64 string. Then, to show the content, I update the data and src attributes for the object and embed respectively. The final result would look something like this (simplified):
object {
border: 1px solid #ccc;
width: 300px;
height: 100px;
}
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
<embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>
All the PDFs look ok (the browser loads them using the plugin), but I am facing some trouble with the text files. The content of the .txt is displayed correctly, but the text looks a bit small and I was asked to make it larger.
I tried changing the font size of the object and embed but the content is not affected by it:
object, embed {
font-size: 32px;
}
In Chrome, I saw that the content of the object is a #document that displays the content of the base64 .txt in a pre. So I tried to style the pre, but only the pre tags outside the object tag take them, not the one inside it:
pre {
font-size: 32px;
}
Is it possible to give styles to the content of an object/embed? How could it be done?
Here is a pseudo-solution that worked for me in firefox (locally) and not chrome. The idea is to access the content of the object and append to its head a custom CSS. The issue with this solution is that you will face cross-origin issue in some browser as the object behave like an iframe that includes an external content.
NB: i used the setTimeout to be sure i run the function after the content of the object is loaded
function addCss() {
$('object').contents().find("head").append($("<style type='text/css'>pre{font-size:32px;}</style>"));
}
setTimeout(function(){addCss()},2000);
object {
border: 1px solid #ccc;
width: 300px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
<embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>
Maybe your problem will be how to avoid this cross-origin issue since the content will be yours and server from the same site.
I need to display the PDF files from a third party on a webpage. I have links to the documents as they appear on the source pages. Unfortunately, none of the links are actual links to the documents, but rather GET requests with certain parameters, or other indirect references like so:
http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P
If the website does not enforce the download with Content-Disposition: attachment; tag in the response headers, as the one above, then I can easily achieve the necessary display by:
<object width="90%" height="600" type="application/pdf"
data="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"
id="pdf_content">
<p>Can't seem to display the document. Try <a href="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P">
downloading</a> it.</p>
<embed type="application/pdf" src="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"
width="90%" height="600" />
</object>
This "stands" and "falls" very gracefully in majority of the browsers. The use of <object> and <embed> at the same time works for me, and, as far as I've tested, does not effect the problem that I describe below (tell me if I'm wrong).
The problem begins when the website does require the download with the above mention tag in the HTTP-headers. For instance, the document on the following link:
http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681
would not be displayed through the HTML structure I showed above. It falls gracefully and the link for downloading works just fine, but I need to view it!
I've been banging my head on the wall for 3 days now, can't figure it out.
Maybe there is a way to catch the headers of the request somehow and ignore them, or maybe force the "viewability" into the GET request.
For general information, this is a part of Ruby on Rails application, so the solution should be coming from along those lines. I'm not giving any ROR code in here, because it doesn't seem to be a source of concerns.
Any straight-forward solution would be prayed upon, while any others - heavily appreciated.
The alternative solutions I thought of and discarding comments:
Download all those files to local storage in advance and just serve them from there.
The necessary storage capacity would be around ~1TB and growing, so storing it on the server would be expensive for a small commercial SaaS that it is.
Cache those documents around the time when they might be needed. For instance, when someone opens the page of the project, the process in the background downloads the related PDFs, so if the user clicks the document link he is served the document which was just downloaded to the local storage. Cache could be kept for a few hours/days just in case of user return.
This might be viable, but if the user base would be significant, then this solution would have the same problem as the one above. Also at this moment, I would not know how to go about implementing this kind of algorithm (very much a beginner, you see)
You may want to look into using http://pdfobject.com or maybe just adapt some of its code as it seems to be able to do what you want. I whipped up a proof-of-concept:
<!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>Embedding a PDF using PDFObject: Simple example with basic CSS</title>
<!-- This example created for PDFObject.com by Philip Hutchison (www.pipwerks.com) -->
<style type="text/css">
body
{
font: small Arial, Helvetica, sans-serif;
color: #454545;
background: #F8F8F8;
margin: 0px;
padding: 2em;
}
h1
{
font-weight: normal;
font-size: x-large;
}
a:link, a:visited
{
color: #3333FF;
text-decoration: none;
border-bottom: 1px dotted #3333FF;
}
a:hover, a:visited:hover
{
color: #FF3366;
text-decoration: none;
border-bottom: 1px solid #FF3366;
}
#pdf
{
width: 500px;
height: 600px;
margin: 2em auto;
border: 10px solid #6699FF;
}
#pdf p
{
padding: 1em;
}
#pdf object
{
display: block;
border: solid 1px #666;
}
</style>
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function () {
var success =
new PDFObject({ url: "http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681" }).embed("pdf");
};
</script>
</head>
<body>
<h1>
Embedding a PDF using PDFObject: Simple example with basic CSS</h1>
<p>
This example uses one line of JavaScript wrapped in a <em>window.onload</em> statement,
with a little CSS added to control the styling of the embedded element.
</p>
<div id="pdf">
It appears you don't have Adobe Reader or PDF support in this web browser. <a href="http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681">
Click here to download the PDF </a>
</div>
</body>
</html>
I have html page with full of link. but they inside the pre tag like below
<pre class="alt2" dir="ltr" style="
margin: 0px;
padding: 6px;
border: 1px inset;
width: 640px;
height: 130px;
text-align: left;
overflow: auto">
http://test.com/files/tivist.r00
http://test.com/files/tivist.r01
http://test.com/files/fdfd.rar
http://test.com/files/gfgf.rar.html
http://test.com/files/trtr.zip
</pre>
</div><br />
The page is full of links like those
Is there any way get only those links form whole page.
I am using notepad++ . If i can get regex which can just extract those links
you can use the following regex to find them all in the document.
http://[^\s]*
I guess you could edit it to or something similiar
http://[^\s"><]*
Besure you set the line by line option off. Notepad++ has a very limited and poorly documented regex engine. Try downloading editpad pro trial edition.
(?<=\<pre.+?)http:\/\/.+?($|\s)(?=.+?\<\/pre\>)
This should only get links that are within a pre tag.
Here is a screen shot from Edit Pad Pro Trial edition
Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:
Page 1 : click here for page 2
and
Page 2 : click here for page 1
Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!
Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
(Simplified HTML code, should of course have doctype, etc.)
I used the following trick for the same problem. The good thing is it doesn't require any javascript.
CSS:
.body {
margin: 0em;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
HTML:
<ul>
<li>Click here for page 1</li>
<li>Click here for page 2</li>
</ul>
<div class="page" id="one">
Content of page 1 goes here.
<ul>
<li>Back</li>
<li>Page 2</li>
</ul>
</div>
<div class="page" id="two">
Content of page 2 goes here.
<ul style="margin-bottom: 100vh;">
<li>Back</li>
<li>Page 1</li>
</ul>
</div>
See a JSFiddle.
Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.
Hope this helps!
have all the pages in distinct div areas
<div style="" id="page1">
First Page Contents
</div>
<div style="display:none" id="page2">
Second Page Contents
</div>
then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "page1":
document.getElementById('page1').style.display = "";
document.getElementById('page2').style.display = "none";
break;
case "page2":
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
Have you considered iframes or segregating your content and using a simple show/hide?
Edit If you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the location.search property of the iframe. So your code can be like this :
For Page 1 : iframe.src = "mypage.html?show=1"
For Page 2 : iframe.src = "mypage.html?show=2"
Now, when your iframe loads, you can use the location.search.split("=")[1], to get the value of the page number and show the contents accordingly. This is just to show that iframes can also be used but the usage is more complex than the normal show/hide using div structures.
JQuery Mobile has multipage feature. But I am not sure about Desktop Web Applications.
This is kind of overriding the thing of one page, but... You could use iframes in HTML.
<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>
And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.
Screen Rec
You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.
Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.
Twine is an open-source tool for telling interactive, nonlinear stories.
It generates a single html with multiples pages.
Maybe it is not the right tool for you but it could be useful for someone else looking for something similar.
By hiding and showing one another, you can achieve this without embedding it. While Guffa's answer worked quite well, I couldn't figure out how to add more than 2 pages, and while Binz Nakama's answer fixes that, it doesn't quite let you only show Page 1 and toggle between them.
Here's the codepen I made, and here's an example I made from one of my existing websites.
HTML:
<div class="part1">
Page 1 content goes here.
<button onclick="hidePart1()">Go to Page 2</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part2">
Page 2 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part3">
Page 3 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="hidePart1()">Go to Page 2</button>
</div>
CSS:
.hide {
display: none !important;
}
.show {
display: block !important;
}
.part1 {
display: block;
}
.part2 {
display: none;
}
.part3 {
display: none;
}
JS:
function hidePart1() {
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part2").classList.add("show");
}
function hidePart2() {
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part1").classList.add("show");
}
function showPart3() {
document.querySelector(".part1").classList.remove("hide");
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part2").classList.remove("hide");
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("hide");
document.querySelector(".part3").classList.add("show");
}
While the code above is probably not quite optimized (especially the JS), it definitely works well for me. I am still quite new to JavaScript, and not very good at it.
Edit: Added part 3 to the code.
Edit: Added example.
It is, in theory, possible using data: scheme URIs and frames, but that is rather a long way from practical.
You can fake it by hiding some content with JS and then revealing it when something is clicked (in the style of tabtastic).
Solution 1
One solution for this, not requiring any JavaScript, is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space. They can be wrapped into div containers, and an inline style sheet can endow them with the margin:
<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...
<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
alternative is to use this for the main part of the page also! -->
</div>
<div class="subpage">
</div>
<div class="subpage">
</div>
You get the picture. Each "page" is just a section followed by a whopping amount of vertical space so that the next one doesn't show.
I'm using this trick to add "disambiguation navigation links" into a large document (more than 430 pages long in its letter-sized PDF form), which I would greatly prefer to keep as a single .html file. I emphasize that this is not a web site, but a document.
When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word, the user is taken a small navigation menu presenting several topic choices. This menu appears at top of what looks like a blank browser window, and so effectively looks like a page.
The only clue that the menu isn't a separate page is the state of the browser's vertical scroll bar, which is largely irrelevant in this navigation use case. If the user notices that, and starts scrolling around, the whole ruse is revealed, at which point the user will smile and appreciate not having been required to unpack a .zip file full of little pages and go hunting for the index.html.
Solution 2
It's actually possible to embed a HTML page within HTML. It can be done using the somewhat obscure data: URL in the href attribute. As a simple test, try sticking this somewhere in a HTML page:
blah
In Firefox, I get a "blah" hyperlink, which navigates to a page showing the FOO heading. (Note that I don't have a fully formed HTML page here, just a HTML snippet; it's just a hello-world example).
The downside of this technique is that the entire target page is in the URL, which is stuffed into the browser's address input box.
If it is large, it could run into some issues, perhaps browser-specific; I don't have much experience with it.
Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the href attribute. Obviously, it cannot contain a plain double quote character anywhere.
A third disadvantage is that each such link has to replicates the data: material, since it isn't semantically a link at all, but a copy and paste embedding. It's not an attractive solution if the page-to-be-embeddded is large, and there are to be numerous links to it.
going along with #binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation
update on the jsfiddle
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click",
function(e){
Array.from(document.querySelectorAll("a"))
.map(x => x.classList.remove("active"));
e.target.classList.add("active");
}
));
Let's say you have multiple pages, with id #page1 #page2 and #page3. #page1 is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:
document.location.hash = "#page1";
Then the next thing you want to do is place some links in your document to the different pages, like for example:
Click here to get to page 2.
Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style> element:
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
An example that actually uses two separate HTML files. The example is based on this tutorial from Tutorial Republic.
app.js
$(document).ready(function(){
$("#screen").load("page1.html")
$(document).on("click", '#page1_button', function(event) {
$("#screen").load("page2.html")
});
$(document).on("click", '#page2_button', function(event) {
$("#screen").load("page1.html")
});
});
Index.html
<!DOCTYPE html>
<html lang="eng">
<head></head>
<body>
<div id="screen"></div>
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import main JS -->
<script src="app.js"></script>
</body>
</html>
page1.html
<div>Welcome to page one</div>
<button id="page1_button" type="button">Go to page 2</button>
page2.html
<div>Welcome to page two</div>
<button id="page2_button" type="button">Go to page 1</button>
Important: Page one and page two should only have the body content, i.e., without <body> and <HTML> tags.
In case the container should span over the whole page (taken from this StackOverflow answer):
stycle.css
#screen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
Show page 1
Show page 2
<div id="Page1">
Content of page 1
</div>
<div id="Page2" style="display:none">
Content of page 2
</div>
</body>
</html>