I am new to HTML and wish to do something that should be fairly simple. I have searched for similar questions and tried the solutions, but none are working.
I want to display two documents in a web page side-by-side when a link is clicked. The documents are stored remotely and are not static. One is a PDF, the other is an image, so I feel the PDF may need to be embedded so there is a scroll bar?
Both documents are displaying, but the second document (image) partially lays over the first in the centre of the screen.
The code I have is as follows:
<b>Click me to view files</b>
<div id= "light"><a href= "#" onclick= "lightbox_close();"><embed src= "?php
echo $address ?>" style= "float: left;"/><img src = "<?php echo $address2
?>" style= "float: left; " /></a></div>
<div id= "fade" onclick="lightbox_close();"></div>
<div>
**Note that the lightbox_open() and lighbox_close() functions are simply there to dim the screen when the screen when the documents are displayed.
Any help with this would be greatly appreciated.
Source code is exactly same just replaced iframe with embed.
<style> html,
body {
width: 100%;
height: 100%;
}
#doc1,
#doc2 {
display: inline-block;
width: 49%;
height: 100%
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#doc1 {
background-color: red;
}
#doc2 {
background-color: blue;
}
<html>
<head>
</head>
<body translate="no">
<div id="doc1">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
<div id="doc2">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
</body>
</html>
You Wont Be able to see the iframe here as the snippet in stackoverflow is inside a iframe already and iframe cannot be loaded inside another iframe.
Related
I have two html pages, "page1.html" and "page2.html".
page1.html contains a css menu list which will link to page2.html. Part of sample code is below:
<div class="menu">
<ul>
<li>page1</li>
<li>page2
<ul>
<li><a href="page2.html" onclick="displaypdf1();" >pdf1</a></li>
<li>pdf2</li>
when click on one of the link , the tag in "page2.html". However i cannot achieve this. it does not load the pdf correctly.
displaypdf1() javascript function as below:
function display_cover(){
var myPDF = new PDFObject({
url: 'Cover.pdf',
pdfOpenParams: {
view: 'FitB',
viewrect:
'0,0,1000,900',
pagemode: 'none',
scrollbars: '1',
toolbar: '1',
statusbar: '1',
messages: '1',
navpanes: '1' }
}).embed('pdf_display');
}
i'm using pdfObject for opening pdf.
In short i wish to open a pdf file through page1.html css menu.PDF will then be displayed on page2.html in a tag How can i achieve that? Thank you!
You can do this with ajax as follows:
Page 1 HTML
<style>
.wrapper {background-color: #cdcdcd; width: 100%; height: 700px }
object {margin: 0; padding: 0; height: 100%; width: 100%; }
#target { width: 600px; height: 650px; }
input { position:relative; left:20px; }
</style>
<body>
<div class="wrapper">
<input type="button" value="Go">
<div id="target"></div>
</div>
</body>
The button is the trigger,. It can be triggered with an a ref or even a list item from a nav menu.
The id target can be placed in any page as well. I made it so that it displays in this same page but you can change it as you please.
Page 1 JS/JQUERY
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('input').click(function(){
$('#target').load('page2.html');
});
});
</script>
Hopefully this works for you
Page 2 HTML
This is the PDF in an object element that will be loaded as an external page inside your page without refreshing the page or in another page if you choose that.
<object data="https://bitcoin.org/bitcoin.pdf" type="application/pdf" width="50%" height="700px">
alt : page2.pdf
</object>
I tried with your suggestions and it works wonderfully on internet explorer but not chrome. Something wrong with .load. The page has displayed blank. Based on the concept that you had given, i managed to solve my problem!
JS/JQUERY
//script for display Cover.pdf
$(document).ready(function(){
$('#input').click(function(){
document.getElementById('project_details').innerHTML =
'<object type="application/pdf" data="pdf1.pdf" width=1000px height="810px" >
</object>'
});
});
I created a sample based on your idea with the JS above and it works. Hopefully this will be useful for someone else. Thanks lotusms.
I have a list of documents at server. and want to develop a page where the list of documents will be displayed as hyperlinks in left panel/div and
while click on a link. the right panel displays the corresponding PDF document from server.
can anybody help me out to develop the same using jquery or javascript?
thanks in advance
i tried below code based on some articles i read
Script :
<script language="javascript" type="text/javascript">
function previewPdf(url, target)
{
var div = document.getElementById(target);
var obj = document.createElement("<embed style='width:939px; height:736px;' frameborder='0' src='" + url +"')></embed>");
div.appendChild(obj);
}
</script>
Body :
<body style="height: 741px">
<form id="form1" runat="server">
<div id="div1" style="float:left; width: 20%; text-align: left; height: 100%; border-width:2px;">
<button onclick="previewPdf('Documents/Accomodation.pdf','div2')">Accomodation</button>
<br />
<button onclick="previewPdf('Documents/Insurance.pdf','div2')">Insurance</button>
<br />
<button onclick="previewPdf('Documents/Air Ticket.pdf','div2')">Air Ticket.pdf</button>
<br />
</div>
<div id="div2" style="float:right;width: 80%; text-align: left; height: 100%; border-color:Maroon">
</div>
</form>
</body>
but it doesnt replace the 'div2' with the content[pdf].
Here is the javascript for displaying pdf in html5 format.
You will need edit it as per your requirements.
https://github.com/mozilla/pdf.js
If you can use a ASP.NET PDF viewer component, then here is how it is done with Gnostice PDFOne .NET.
PDFViewer1.ActiveLicense("your-license-key");
PDFViewer1.LoadDocument(Server.MapPath(".") + "\\App_Data\\sample.pdf");
DISCLAIMER: I work for Gnostice.
I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>
I placed a piece of ads code in a div and at the bottom of page, I have javascript code that checks for the offsetHeight size of the div. If "0" is returned, I could safely assume that the ads has been chewed by ad blockers
What I'm trying to do is, I want an image to appear in the spot where the ads was supposed to be showing when the ads was blocked.
Any idea how to do this?
Edit: Forgot to show the codes
<div id="div_bleh">
ads goes here
</div>
<script type="text/javascript">
function check_blehsize()
{
if (document.getElementById("div_bleh").offsetHeight == 0)
// do stuff
}
window.onload = check_blehsize;
</script>
Here's an example which I tested against a very common ad blocker - Firefox's Adblock Plus (using the EasyList filter):
Live Demo (edit)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.innocent-class {
background: url(http://www.google.com/images/logos/ps_logo2.png);
width: 240px;
height: 400px
}
.justForTesting, .advertise_ads {
width: 240px;
height: 400px;
background: #fff
}
</style>
</head>
<body>
<div class="innocent-class"> <!-- just don't call it "advertContainer" :) -->
<div class="advertise_ads justForTesting">
advert here!
</div>
</div>
</body>
</html>
When Adblock Plus finds an element with a class (for example) .advertise_ads, it will hide that element.
If it does, the "please don't block my ads!" background-image (in this case, the Google logo) from the parent element will be visible.
If the advert isn't blocked, the advert will cover the replacement image.
Try changing advertise_ads to something else such as sdpfjsdfjp, and the advert will be visible.
I imagine this technique will also work with most other ad blockers.
You can add a class to that div with javascript(jquery in example below),
for example,
adContainer = $(".ad-container");
if ( $(".ad-container").height() == 0 ) {
adContainer.addClass("no-ads");
}
and the css will be
.no-ads {
background: url(the_picture.jpg) no-repeat 0 0;
width: ?px;
height: ?px;
}
Assuming you know the size of the adverts you will be displayed, which normally you do.
<div class="advert">
<!-- Adverts go here -->
</div>
.advert {
background-image: url(blah);
width: 120px;
height: 250px;
}
.advert > * {
background-color: white;
}
When the advert gets chewed up by an ad blocker wouldn't this content show instead. Just an idea, I've never personally tried to get around an ad blocker.
So I have a div whose content is generated at runtime it initially has no height associated with it. When it's generated according to firebug and from what I can alert with js the div still has a height of 0. However, looking at the read-only properties with firebug I can see that it has an offset height of 34. It's this value that I need. Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.
So, I thought that I could just get that by doing this via jquery...
$("#parentDiv").attr('offsetHeight');
or this with straight js...
document.getElementById("parentDiv").offsetHeight;
But all that is returned is 0. Does it have anything to do with the fact that offset height is a read-only property in this instance? How can I get this height? I mean firebug is figuring it out somehow so it seems like I should be able to.
Edit:
Here's a sample of what the div looks like right now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
</DIV>
</DIV>
</DIV>
</DIV></FORM></BODY></HTML>
This code is being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.
<blah:blahControl ID="control" runat="server" />
Ok, it's edited slightly but thats a whole lot more HTML than I had before. The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there. That code includes the div in question, it's sibling, parent, grandparent and children. It's almost a direct copy from firebug.
Update:
I should have mentioned this is being done in IE 7. It seemed to work fine one time in Firefox, but it's returning 0 now. Does this provide any new insights of possible work-arounds or anything?
... You all must think I'm nuts.
Update:
Some styling...
.TransparentBg
{
background-color: white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.Foreground
{
position: absolute;
top: 0px;
}
Are you sure the element is included in the document tree, and rendered? (ie. not “display: none”, but “visibility: hidden” is OK.)
An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.
ETA after code sample added: with your exact code, I get offsetHeight on the div of ‘17’. The first image is sized correctly, the second has no size.
This is correct as rendered(*). Any images that fail to load are replaced by their alt text as an inline span. Your image has no alt text, so it is replaced by an empty string. Normally, as an inline element, this cannot be set to any particular size. The exception is the first image, because you've given it ‘display: block’, which makes it amenable to the explicit sizing provided by width/height.
In Quirks Mode, you would have got little ‘broken image’ icons sized the same as the images were supposed to be. This does not happen in Standards Mode because it is assumed that you know how to use alt text properly if you're using standards.
Either way, the dimensions measurement works fine for me if I replace the "..." URLs with real working addresses.
(*: although you can't actually see it because of the rather weird ‘overflow-hidden’ on html and ‘left: 1597px;’ combo. Well, unless you have a really wide monitor!)
Are you sure it's not a Heisenbug? If you are setting the height somewhere programmatically and then trying to read it soon later, there is a chance DOM would not have updated.
Loading this file with a valid IMG SRC gives 3 alert boxes of "37". Without valid IMG SRC it gives "17" on all three.
What version of Jquery are you using? And which version of FireFox/IE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
<FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
<DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
</DIV>
</DIV>
</DIV>
<script type="text/javascript">
$(window).load(function () {
alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight'));
alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
});
</script>
</DIV>
</FORM>
</BODY>
Try calling the offset function once all the DOM and images are fully loaded using load() instead of document.ready().
$(window).load(function () {
//Put the code for the height here
});
I just found an issue where I was getting the offsetHeight of an element when the doc was ready but it was in a container that was hidden.
It resulted in a offsetHeight value of 0 but firebug said it had a height of 32.