Displaying an imbedded pdf file - javascript

I've been struggling to find a workable way to imbed .pdf files in web pages that are broadly accessible, including to IE8 users. I don't think pdf.js is going to work because I want to embed the files, not load them as new pages.PDFObject seems like the best choice. But when I use their code, no matter what browser I use, I get only about a quarter of the page length displaying, as shown in the accompanying image. Everything below that first line of text is simply the white of my website background. I have tried both following the PDFObject instructions and using their code generator. No luck either way. Here's the code:
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.chrisrichard.org/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
And here's the javascript version:
<!-- insert in the document head -->
<script type='text/javascript'>
function embedPDF(){
var myPDF = new PDFObject({
url: 'http://www.example.com/TestDoc.pdf'
}).embed();
}
window.onload = embedPDF; //Feel free to replace window.onload if needed.
</script>
This is all directly from the PDFObject coder. There's a tutorial on the website, and I've followed it meticulously so far as I can tell, but no luck.
So I'm stumped, and would appreciate any suggestions. Frankly, I wish I didn't have to accomodate IE8 at all, and I wish I could make pdf.js work for what I want it to do, but neither seems to be a viable option. Again, thanks in advance for any ideas.
Note: Please note corrected code, which gives the entirety of what PDFObject generates.
Note 2: This is the entirety of the kind of page I would be seeking to insert the viewer into. I have skipped the javascript version, which would have me insert the code in the header and which would fill the entire page with the pdf and viewer. It's important that the .pdf be set within my page.
I would almost certainly be getting rid of the swfobject references, since that isn't working with mobile devices, etc.
<!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>example.com - </title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#MenuHolder {
position:absolute;
left:692px;
top:50px;
width:228px;
height:23px;
z-index:1;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1><img src="images/BodyLogo.jpg" width="665" height="57" alt="Logo" /></h1>
<link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
<script type="text/javascript" src="/floatbox/options.js"></script>
<link rel="stylesheet" href="/Menu2Assets/mbcsmb4pc8.css" type="text/css" />
<div id="mb4pc8ebul_wrapper" style="max-width: 345px;">
<ul id="mb4pc8ebul_table" class="mb4pc8ebul_menulist css_menu">
<li><div class="arrow buttonbg"><a>Examples</a></div>
<ul>
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
</ul></li>
<li><div class="buttonbg" style="width: 86px;">Resume</div></li>
<li><div class="arrow buttonbg" style="width: 96px;"><a>Contact</a></div>
<ul>
<li>Email</li>
<li>Send</li>
</ul></li>
<li><div class="buttonbg" style="width: 69px;">Home</div></li>
</ul>
</div>
<script type="text/javascript" src="/Menu2Assets/mbjsmb4pc8.js"></script>
<!-- end #header --></div>
</head>
<div id="mainContent">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.example.com/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="footer">
<p align="center"><img src="images/Copyright.jpg" width="190" height="15" alt="Copyright" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Related

Broken images and Javascript on server. Works locally only

I know this has something to do with the file paths but I'm not sure what else to do.
I have tried
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="~/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
I originally created this in Dreamweaver, but now am no longer using that. Could that have something to do with it?
I have used this same code before on a remote server and it worked.
<!DOCTYPE html>
<html>
<head>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="shortcut icon" href="imagesSRP/photo.ico" type="image/x-icon" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css">
a:link {
color: #000;
}
a:hover {
color: #0FF;
}
</style>
<title>Stephanie Rodriguez Photography</title>
<p align="center"><img src="imagesSRP/srp4.png" width="500" height="112" alt="Home" /></p>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>Home</li>
<li>About</li>
<li>Gallery
<ul>
<li>Families</li>
<li>Children</li>
<li>Film</li>
</ul>
</li>
<li>Contact</li>
</ul>
<p> </p>
<p align="center"> </p>
<p align="center"><img src="imagesSRP/film2.jpg" width="800" height="520"></p>
<p align="center"> </p>
<p align="center"><img src="imagesSRP/social_01.png" width="45" height="45" alt="Facebook">
<img src="imagesSRP/social_04.png" width="45" height="45" alt="Instagram">
<img src="imagesSRP/social_46.png" width="45" height="45" alt="Email">
<img src="imagesSRP/social_47.png" width="45" height="45" alt="Phone"></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Okay, so after careful review of the information that was on the website, we came to the conclusion that the website path was different from the local path. Basically FileZilla stored the images into a different path than the local path.
If your path on the local computer is images/imagename.jpg then remember to confirm that the database is storing the images in images/imagename.jpg. It has to be an exact match, if not, these issues will happen. Also, you are correct, you always want to stick with relative paths as much as possible don't do absolute paths because if you ever change your domain name, you will literally have to go through every single link that uses the domain name and update them.
Do this: images/imagename.jpg
Don't do this: www.domainname.com/imagename.jpg
When I suggested to try that, I was referring to trying it for troubleshooting purposes, if you could not access it, that would mean there is an issue in the database, if you could access it, then the issue was in the path name.

Lightbox Not Working Onto (Any)Browser

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>

jquery mobile app does not show styled text on iPhone

I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.

Bootstrap tab navigation not working

My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</body>
Can anyone point what am I doing wrong?
Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/
EDIT
It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):
<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Bootstrap You need to download and add jquery in your script. Something like this
<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />
see here for your reference i added jquery v 1.7.2

Javascript not working on web page unless the page is refreshed [duplicate]

This question already has answers here:
Rails javascript only works after reload
(8 answers)
Closed 8 years ago.
I designed a website for a local charity and used a template I found on the internet to add some interest. When the files were all uploaded to the host server, none of the javascript elements will work. If you click on something, I can see in the address bar of my browser that the code is updating but I don't see the update on the web page until I click the refresh button.
I have never worked with Javascript before and I've tried to find an answer on the web in forums but haven't had much luck.
This is the top portion of my index.html page:
<!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>the CR</title>
<meta name="keywords" content="running, walking" />
<meta name="description" content="5k race" />
<link href="cr_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
This is part of the main body of text where clicking on an image should move to a different section:
<div id="main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<p>custom text here
</div>
<div id="home_gallery" class="box no_mr">
<img src="images/gallery/01.jpg" alt="logo" />
<img src="images/gallery/02.jpg" alt="Event Photo" />
<img src="images/gallery/03.jpg" alt="logo" />
<img src="images/gallery/04.jpg" alt="Event Photo" />
<img src="images/gallery/05.jpg" alt="logo" />
<img src="images/gallery/06.jpg" alt="Event Photo" />
</div>
<div class="box home_box1 color2">
<img src="images/about-01.jpg" alt="About Us" />
</div>
There are two links attached to images where the user is supposed to be taken to either a page about the race or about the sponsors.
When I click on the image, I see 'http://www.website.com/#about' in the address bar but the '#about' details do not load until I click the refresh button.
When I originally began customizing the template with our content, the javascript didn't always work. I would open the html file and save it as something else and it would work.
I'm under a lot of pressure by the charity to get this up and running ASAP. Do any members of this community have any suggestions?
Try this;
<img src="images/about-01.jpg" alt="About Us" />
Just add the filename before the #.

Categories