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.
Related
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.
I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
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.
Say I have this text Click me, and I want a modal window, which contains an iframe to a website (eg., www.google.com) to come up whenever one clicks on the text.
How should I go about doing this? I did some googling and an example of the iframe
%iframe{:src => "http://www.google.com"}
But I am not sure how I could use it ...
Here's the structure of my view file (html.haml), I tried something like this (but it didn't work!):
...
%li
= User_name
= link_to 'Click me' %iframe{:src => "http://www.google.com"}
%li
...
Again, how do I open a popup when some one clicks on the 'Click me' text?
I am sure you do not want to use an iframe for displaying the content from a url, instead you want to shoe it in a pop up window. Yo can use fancybox-rails gem. after installing the gem as described in the readme add this in your view file
%li
= User_name
= link_to 'Click me', "http://www.google.com", :class => "iframe"
and this in your javascript file
$(document).ready(function() {
$("a.iframe").fancybox();
});
You can read more about the uses here. There are many other jquery plugins available for the same.
Use a link with its target attribute set to the value of the name attribute on your modal <iframe>:
Open Bing in an iframe
<iframe src="#" name="modal"></iframe>
Then in your JS:
var modalTriggers = Array.prototype.slice.call(document.querySelectorAll('a[target=modal]'));
var modal = document.querySelector('iframe[name=modal]');
modalTriggers.forEach(function(trigger){
trigger.addEventListener('click', function() {
modal.classList.toggle('active');
}, false);
});
And Some CSS:
iframe[name=modal] {
display: none;
width: 92%;
height: 92%;
position: fixed;
top: 4%; left: 4%;
background: white;
box-shadow: 0 2px 12px 6px rgba(0,0,0,.6);
}
iframe[name=modal].active {
display: block;
}
Demo (edit)
On MDN
there are a couple ways to do this if i understand you correctly. this is a simple approach if you include jquery into your html
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(){
$('#myIframe').show();
});
});
</script>
</head>
<body>
<input id="clickMe" name="clickMe" type="button"/>
<iframe id="myIframe" style="display:none;" src="http://www.othersite.com/some/path?param1=value1¶m2=value2">
<p>Placeholder text; only shows up if the page DOESN'T render!</p>
</iframe>
</body>
</html>
you'd also want to style your iframe to behave like a modal window...there are lots of tutorials on that.... as well as handle the closing behaviors
this is a more in depth explanation http://www.jacklmoore.com/notes/jquery-modal-tutorial
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>