I have a PDF embedded inside iframe. I need to hide this iframe on click of a button. But for some reason, the iframe section does not hide in Safari browser. The same code works fine in IE, Chrome and Firefox.
Here is a snippet from my HTML page:
<div id="PDFSection" style="text-align:center;">
<iframe id="PDFFrame" src="sample.pdf"> Loading...
</iframe>
<hr />
<input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>
and here is the jquery part I am calling to hide the div:
$(document).ready(function() {
$( "#btnEmail" ).click(function() {
$( "#PDFSection" ).hide();
});
});
I have tried toggle() instead of hide() and also tried to call hide() on the iframe element itself. But nothing is able to hide the PDF object. I do see that when the jQuery code runs, it hides the PDFSection div (as I can see the button and hr line getting hidden), but the PDF stays on the screen.
Here is a screenshot of what happens before and after clicking the button:
i just tested your example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#btnEmail" ).click(function() {
$( "#PDFSection" ).hide();
});
});
</script>
</head>
<body>
<div id="PDFSection" style="text-align:center;">
<iframe id="PDFFrame" src="about:blank"> Loading...
</iframe>
<hr />
<input id="btnEmail" type="button" value="Email" name="btnEmail"/>
</div>
</body>
</html>
and it works fine in safari 6.0.2 (8536.26.17) on OSX Mountain Lion. Maybe you should open the developer console cmd+alt+i and look for further error messages.
Related
I'm struck in a project, I need to develop a project as agenty chrome extension, where it uses point and click css selector. First I have used iframe to display a site but I faced cross origin and security issues. Now I'm using object tag to display a site and I want to make like point and click css selector on a button click.
Here is my sample code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#dragit').click(function(){
// make $("#dvSource") to point and click css selector
});
});
</script>
</head>
<body>
<input type="submit" id="dragit" value="DragValues" />
<div id="dvSource">
<object type="text/html" data="http://validator.w3.org/" width="100%" height="600px" id="test">
</object>
</div>
</body>
</html>
I have placed in div (dvSource) and I have a button with id dragit, once I click that button I want to make point and click css selector for dvSource content
I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
i have built 2 pages , 1 that is the page where there is a link that opens a dialog and loads another page inside that dialog, once the dialog opens and loads the other page this one has a calendar but when i click on the calendar it gives the following error: Cannot read property 'inline' of undefined
i cannot interpretate what is wrong as if i run the file where the datepicker is it runs the calendar but once i execute from the first page by opening the dialog it gives error.
below there's the source for page1 and page2:
<!--PAGE1.PHP-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
function loadurl() {
$(function() {
$("#dialog").load('page2.php').dialog({modal:true});
});
}
</script>
</head>
<body>
teste
<div id="dialog" title="Dialog"></div>
</body>
</html>
<!-- PAGE2.PHP -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
$.load does not run script on loaded page
The script will not be run on the new page because the ready function on the original page does not fire it. Any script that is meant for the second page needs to be run in the success listener of the $.load function on the first page
There are a few things with the code. First of all, you need to decide what PAGE2.php is; is it a component of a page or a standalone page. .load() inserts the downloaded code directly into the DOM. So, you could strip PAGE2.php down to:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
Or, you could load a portion of the download page with .load() by providing a selector: e.g. $('#dialog').load('page2.php #datepicker').
Another thing is the statement to load PAGE2.php into the DOM, i.e. $("#dialog").load('page2.php').dialog({modal:true}). What you want to do is to load the page first (probably in the background) before rendering it with .dialog(). So, it should be something like:
$("#dialog").load('page2.php', function() { $(this).dialog({modal:true}) })
<html>
<head>
<title></title>
<script type="text/Javascript" src="includes/scripts/jquery-1.7.2.min.js"></script>
<script type="text/Javascript">
$('a').click(function() {
window.open($(this).attr('href') );
});
</script>
</head>
<body>
<div id="content">
Somepage
<br />
Somepage
<br />
Somepage
<br />
Somepage
<br />
Somepage
</div>
</body>
</html>
I want to open all links found in the page with jQuery .load().
But my code doesn't seem to work.
Any ideas?
$(function () {
$('a').each(function() {
window.open($(this).attr('href') );
});
});
click is actually the action of clicking the HTMLElement. each is a loop through them.
And wrapping everything in $(); tells jQuery,
"Hey don't you run me until everything is ready. I want all DOM
elements addressable."
It is short hand for $(document).ready [doc].
$('a').click(function(e) {
$("#content").load($(this).attr('href') );
e.preventDefault();
});
This code will make it so that when a user clicks on a link on your page, instead of going to the page, the contents of that page will be loaded into your content div. e.preventDefault() will prevent the default action of the link (leaveing the page) and keep the user on your page.
Now, the problem with this is that once you have clicked one link, any content loaded into the div will not have this code applied. You can get around this by using event delegation with jquery's on (or delegate in older jquery versions).
$("#content").on("click", "a", function(e) {
$("#content").load($(this).attr('href') );
e.preventDefault();
});
This code will work on all links within #content, those there initially as well as those loaded later.
In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>
<script>
$("#button").click( function()
{
alert('button clicked');
}
);
</script>
</head>
<body>
<html:errors/>
<div data-role="page" data-theme='a'>
<div data-role="header">
<h1>jquerymobile</h1>
</div>
<div data-role="content">
<div id="button" data-role="button">Click on button</div>
</div>
</div>
</body>
When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.
Could someone tell me where I am going wrong?
EDIT1:
The following code brings up the alert in Firefox & Opera Desktop Browsers.
$(document).ready(function() {
$("#vbutton").click(function() {
alert("clicked");
});
});
<a id="vbutton" data-role="button">Click Button</a>
Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??
Your problem is that you are searching for $('#button') before it exists...
Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})
The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.
The problem was due to debug statements like
debugger;
debug.info(....)
which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.