fancybox difficulties with opening an html page - javascript

Please click on the Jade on this page: http://sneakyrascal.com/starpons/gallery.html
I added a fancybox to its link and the pop-up html includes a gallery which is based on jQuery and css. I believe maybe it's because there's a jQuery in the html page it won't show correctly.
You can see in this page fancybox shows an image correctly so it should work with opening an html too. http://sneakyrascal.com/starpons/about.html
It works with Chrome but not correctly in Firefox and nothing in IE.
I will appreciate any help.

This is the way that I've opened a fancybox window with an html ajax page in the past:
Define the link with the appropriate href:
<a class="fbtag" href="/some_page.html">link</a>
Using jquery, assign the fbtag class (or whatever class) to open the fancybox & link:
$('a.fbtag').fancybox();
Fancybox will take the url that you defined in the link and use it to populate the window. You can also define any options you want in the fancybox call as well.

Related

How to mask everything when a popupbox is displayed in javascript

I have created a popup window and below is my script.
var action="generateCertificate";
var url=contextPath +"/MyPage/MyPage.do?actionToPerform="+action;
var myWindow=window.open(url,"","width=500,height=500");
And the script is successfully creating a popup window.
now my issue is when i click on the background of my page the popupbox is getting hided.
how to mask the background when popupbox is fired.
Plz help me.
You can use jQuery BlockUI Plugin : BlockUI.
No. There is no way to make a popup window modal. As the name itself suggests that it is a separate window.
If you want, you can use showModalDialog() in Javascript. The dialog allows you to include a jsp or html page inside
http://msdn.microsoft.com/en-us/library/ie/ms536759(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Web/API/Window.showModalDialog
Also as suggested by others above, you can go for jQuery.

FancyBox displaying contents of a DIV as type iFrame

This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!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><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.

Changing content of a fancybox with ajax

I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox

Fancybox page anchors

Is it possible to use page anchors (http://example.com/page.php#jump_to) in Fancybox and if so how?
I have tried like you normally do with a normal HTML page, where it works, but it doesn't work in Fancybox.
If you use an iframe to display the Fancybox content, then I suspect anchors will work.

asp.net-mvc jquery dialog url with target=_blank doesn't work

I have a jQuery dialog showing a few items, with a link to open the item's order information in another window. This works fine on a regular view, but when I use target=_blank on a jQuery modal dialog, it does not open another browser window and instead navigates the page under the dialog to the URL.
Any ideas how to work around this, to get a popup from a jQuery dialog? Thanks!
Try using the JavaScript window.open() method instead. A sample usage would be like this:
window.open("http://www.mydomain.com", "mywindow")
You can view some documentation here: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml.
This should give you the functionality you are looking for.

Categories