Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a modal window, which contains an anchor text. When i click on this link, it must call a pdf housed somewhere else and display it in a pop up . How can I do that ?
Kindly help .
You can do this using with jQuery UI dialog, you can download JQuery ui from here Download JQueryUI
Include these scripts first inside <head> tag
<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
JQuery code
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#trigger').click(function(){
$("#dialog").dialog();
});
});
</script>
HTML code within <body> tag. Use an iframe to load the pdf file inside
this link
<div id="dialog" style="display:none">
<div>
<iframe src="yourpdffile.pdf"></iframe>
</div>
</div>
You can have a look at this library: https://github.com/mozilla/pdf.js it renders PDF document in a Web/HTML page
Also you can use Flash to embed the document into any HTML page like that:
<object data="your_file.pdf#view=Fit" type="application/pdf" width="100%" height="850">
<p>
It appears your Web browser is not configured to display PDF files. No worries, just click here to download the PDF file.
</p>
</object>
You can have an iframe inside the modal markup and give the src attribute of it as the link to your pdf. On click of the link you can show this modal markup.
you can use iframe within your modal form so when u open the iframe window it open inside your your modal form . i hope you are rendering to some pdf opener with some url , if u have the pdf contents simply add the contents in a div in the modal form .
Related
This question already has answers here:
Cross domain iframe issue
(5 answers)
Get DOM content of cross-domain iframe [duplicate]
(5 answers)
Closed 5 years ago.
I am busy teaching myself more about web technologies my current focus is javascript and jquery but I ran into a roadblock.
I added a Iframe (one that you get from google trends) to embed into your website.
The code to get the Iframe with google supplies is :
<iframe id="myframe" scrolling="no" style="border:none;" width="250" height="413" src="https://trends.google.com/trends/hottrends/widget?pn=p1&tn=10&h=413"></iframe>
This gives you a nice control on you website :
Now My task or what I wanted to do is loop all the elements in the trend iframe and print them on screen by using java script and JQuery.
So what I did was the following.
My Php file :
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="widgettrend"></div>
</body>
<script src="js/manager.js"></script>
</html>
My manager.js is :
$(document).ready(function(){
alert($("html").html());
$.holdReady(true);
$( "#widgettrend" ).before( "<iframe id='myframe' scrolling='no' style='border:none;' width='250' height='413' src='https://trends.google.com/trends/hottrends/widget?pn=p"+localStorage['country']+"&tn=10&h=413'></iframe>" );
//init plugin
$.holdReady(false);
//other code
alert($("html").html());
});
But here's the problem that I am facing In my first alert to print the html I get :
The second alert after I have added the code :
I can see it did add it to my html but did not load it. So then after a few seconds the control is loaded and if I do a Inspect using Chrome I can see that its loaded :
I did also try putting in a delay so that the control has time to load and then try to get the html but it stills shows the html like in the second alert.
Its like after the iframe is loaded its not updating the dom?
I would like to access the data using Jquery but I cant see the elements in the code.
Is this possible to access the data after it loaded like I can see in the Inspect image? Or do I need to update or refresh the DOM somehow?
How should I go about accessing the data?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a requirement to open a PPT when a user clicks on the image.
I tried by using the below code, but was not able to open the PPT when i clicked on the image or the button but its downloading the PPT file whenever i click on the image or the button. Please suggest what changes need to be done in order to open a PPT file on user click.
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
Click to open Report:
<a href="" onclick="window.open('myFOlder/report.pptx')">
<img border="0" src="images/myPowerpoint.jpg" width="100" height="100">
</a>
</p>
<input type="button" value="Open Report" onClick="window.open('myFOlder/report.pptx');">
</body>
</html>
PS: No external libraries should be used as our project doesn't support any external libraries.
I believe that this is impossible. Since most Web browsers don't support PowerPoint documents without extensions, they will automatically download them. You could, however, upload the presentation to a website that could display PowerPoint documents (e.g. Google Drive), and include a link to the uploaded file.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I try to go to Gmail and FaceBook with my JavaScript disabled, I am greeted with the following:
The content in the images is displayed in <noscript> tags, but the rest of the usual page content isn't there. The Gmail source has a few empty <iframe> elements, but the FB page is empty, save for the <noscript> element, and a couple <script> tags.
I would like to have similar behaviour for my site, but am unsure how to only load the page content if the user has JS enabled. I can put in the <noscript> element, and have a div centred on screen with a "You need JS enabled" message, but the rest of the content would still have loaded behind it.
There are a couple solutions here and here, but they only have the main content as:
display: none;
and the set it to block; via JS. But that would still show up in the source.
Can I entirely prevent loading page content when JS is disabled, and only display the "Oops, you need JS enabled" message?
Do not put the content in the first page, and just put a <script src="…"> which loads the actual contents via AJAX. Your source should then roughly follow that template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="libraries.js"></script>
<script src="load-page-contents.js"></script>
</head>
<body>
<noscript>
This website is an interactive editor for 3D graphics or something
really complex that can't be done at all in plain HTML, and therefore
needs JavaScript.
Click here to read more about this project.
<img src="screenshot.jpg" alt="Obligatory screenshot, to compell the
user to turn on JavaScript because this looks So Cool ™." />
</body>
</html>
Think twice about it, however. Does your site really need JavaScript to work? Can't at least a dumbed-down version be displayed otherwise? There are lots of reasons to have JavaScript disabled (screen readers, search engines, security issues, easy way to disable lots of blinking flashing annoying ads)
Simply load the whole page with an AJAX request and hide the error message using Javascript. Then the error message will remain if they have Javascript disabled, and the page will be loaded if it is enabled.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
When user login with Internet Explorer and user's javascript setting is disabled, I want to show an alert to user. I've tried to use <noscript> tags. I've changed my javascript settings (enabled to disabled) for test it but when I try it, nothing displays. How can I do it? Here are my codes below;
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text inside the noscript element.</p>
This is a nice one. It's because your example its so minimal. The browser automatically wraps the <script> and <noscript> tags in <head>, which means that while the JS executes and writes "Hello world", the <noscript> tag gets hidden, because it's in the <head>.
If you manually place them in the <body> it works fine:
<html><head></head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text inside the noscript element.</p>
</body>
</html>
I am building a website and I want to open a third party website page in a frame on my webpage, what do I use? javascript? If so how do I write it? I am very new and don't know what I am doing.
If you are using a dynamic url you can use javascript, otherwise you'll just require an iframe.
<iframe src="http://www.stackoverflow.com" />
If you want them to click a link and then show the website in the iframe, it would be like so:
site.com
<iframe name="iframe"></iframe>
If you want to make it so that when a user click on a link, that link open in a certain frame, you should give that frame/iframe an ID. Then you can provide that ID as the target attribute of the anchor.
Lets say your frame looks like this
<frame src="somepage.html" id="myFrame">
Now you can open a page in that frame like this:
Some link
No need to use anything but plain HTML to accomplish that.
I'd use http://fancybox.net/
It's a light jQuery script that generates a good looking iFrame overlay. You can also use it for pictures and any other overlay.
Include jQuery and Fancybox and FancyBox CSS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Then add the link:
<a id="iframe" href="http://www.example.com/">This goes to iframe</a>
And initialize FancyBox using jQuery:
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#iframe").fancybox();
});