I created a link to open pdf file in iframe on popup window as script below . In case that a link is not a pdf file, I want to it to display in popup a text "It's not a pdf file, click here to download" but it does not work.
/* intialize popup */
$('.iframe-popup').magnificPopup({
type: 'iframe',
gallery: {
enabled: true
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- manific popup cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js" integrity="sha512-+m6t3R87+6LdtYiCzRhC5+E0l4VQ9qIT1H9+t1wmHkMJvvUQNI5MKKb7b08WL4Kgp9K0IBgHDSLCRJk05cFUYg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" integrity="sha512-nIm/JGUwrzblLex/meoxJSPdAKQOe2bLhnrZ81g5Jbh519z8GFJIWu87WAhBH+RAyGbM4+U3S2h+kL5JoV6/wA==" crossorigin="anonymous" />
<a class="iframe-popup" href="https://www.mrs.org.uk/pdf/postcodeformat.pdf">listofpostalcodes.pd...pdf<p>not supported file</p></a>
<a class="iframe-popup" href="https://www.mrs.org.uk/pdf/postcodeformat.csv">listofpostalcodes.pd...csv<p>not supported file</p></a>
Please kindly help me. Thanks.
Related
I installed Highslide in my website but it seems like it's not working.
I saved the Highslide folders into my website main folder and put this in the head of my HTML document:
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css"/> <script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/'; </script>
But when i try to use the image zoom pop up code it doesn't work:
<a class="highslide" href="images/thumbstrip13.jpg" onclick="return
hs.expand(this)"> <img src="images/thumbstrip13.thumb.png" alt=""/>
</a>
The image doesn't pop up like it should but it simply open in another window. Where did I do wrong?
So I've tried to find an answer but can't seem to get this one right.
I've changed my code to model (pretty much exactly) after the answer in this question:
Delay pop-up for 10 seconds, only pop up once
When I test locally, I can get it to work if I change the cookie value to a number(ex:1) instead of the string (ex: 'yes') but after putting the site online, the fancy box never shows up using either method. Tried clearing cookies and emptying cache.
Here's my code for the popup:
<!--This is for a one time popup-->
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS file -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<!--Add fancybox CSS file -->
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add jQuery cookie library -->
<script src="cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function openFancybox(){
$('.fancybox').fancybox().trigger('click');
}
$(document).ready(function(){
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
}
else {
openFancybox();
}
$.cookie('visited', 'yes' , { expires: 2 });
$('.fancybox').fancybox();
});
</script>
<!--End of popup code-->
In my html body I have:
<a class="fancybox" href="#inline1" title="Next Generation City"></a>
and
<div id="inline1" style="width:400px;display:none;">
<h3>About website.com </h3>
<p>
Here's my text for popup
</p>
</div>
I'm new to using cookies and fancy box, so I'm a little lost. Thanks so much for any help with this issue.
EDIT: also, I have a fancy box displaying correctly on another page of the site, so I'm fairly certain the issue is with the cookie part
I am working with pycco, and would like to embed a knowl, as part of the doc-html.
I am able to render doc-html directly if they are simply input as markdown comments.
ie #<div>hi<div> will correctly display in the doc-html.
I insert the javascript through the comments:
"""
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<link href="http://aimath.org/knowlstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://aimath.org/knowl.js"></script>
"""
However, when I insert a knowl anchor, <a knowl="/knowl/k1.html">knwl1</a>, the element opens/closes in the correct area; but, the contents of the linked html are not visible.
If I try styling the anchor (in some pycco-like manner) then the element spans the entire page and won't open or close in the right area. The html content doesn't display either.
<td class=docs>
<div class="octowrap">
<a class="octothorpe" href="#section-7">#</a>
</div>
<a knowl="/knowl/k1.html">knowli.</a>
</td>
I am using [tinyMCE][1] and [tinybox2][2] i can get both to work independently but what i am tryng to achieve is that i click on edit button tinybox2 opens the url with the relevant id string on the page the link opens up this has tinyMCE on it with the update form, but i dont understand why tinymce does not load within the popup.
Is there a way to allow javascript to go to this popup of tinybox? or why is it preventing more javascript to load?
Thanks for any help :D
I have done this so far:
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
get test.php content via $.ajax(); -no idea on this one-
<p><a class="Forumusername" onclick="TINY.box.show({url:'test.php',width:750,height:300})">CLICK ME</a>
reinit TinyMCE editor with tinyMCE.init call. -i dont know how to implement this either-
Edited links but question is answered.
I'm not good in updating old code, so I will rewrite it completely. That's content of two my files test.php and edit.php:
test.php
<!doctype html>
<link rel="stylesheet" href="js/tinybox2/style.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/tinybox2/tinybox.js"></script>
<script type="text/javascript">
$(function(){
$('#open_editor').click(function(){
$.get(this.href).done(function(html){
TINY.box.show({
html: html,
width: 500,
height: 400,
openjs: function(){
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
}
});
});
return false;
});
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
});
</script>
<a id="open_editor" href="edit.php">Open editor</a>
<textarea></textarea>
edit.php
<textarea name="body" rows="10" cols="50"></textarea>
Correct paths to stylesheets and scripts before running test.php.
These scripts are checked and tested.
We have been using uploadify for image upload and prettyPhoto for displaying images on lightbox in our Rails application. Both works well if used separately. Now we want to display uploadify control on lightbox just like dropbox uses but it start screaming if used with prettyPhoto.
Here is sample html using uploadify with prettyPhoto.
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script src="jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
$('#closeme').live('click', function() {
$.prettyPhoto.close();
return false;
});
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
<div id="inline-1" style="display:none;">
<p>This is inline content opened in prettyPhoto.</p>
<input type="file" name="file_upload" id="file_upload" />
</div>
</body>
</html>
Here you will see link to popup and by clicking on the link it shows uploadify control on lightbox. Then you chooses images from the disk to upload to server. After choosing images I face two issues:
1) Getting Error: uncaught exception: Call to StartUpload failed javascript error on FF and Crome
2) The selected images are not getting listed on uploadify control on lightbox. If you close the pupup and again click on popup link it shows list of files.
Uploadify works fine if I remove $("a[rel^='prettyPhoto']").prettyPhoto(); line.
Do you have any idea how it can be fixed?
Also I would appreciate if someone suggest other plugins to achieve such dropbox style uploaders.
Thanks, Amit Patel
You'll want to initialize uploadify after the lightbox is opened and not on page load. The reason for this is because Flash will not load if the element is hidden.
I looked at the prettyPhoto api and couldn't find any event that is called after the lightbox has finished opening, but that's what you'll need to do.