Log in

View Full Version : facebox kills the initialization code for popped up html page


tomba
12-29-2009, 10:49 PM
1) Script Title: facebox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: I am using facebox to put up a popup showing details about an item which is one of many. I want to use the same html page for the popup and fill it in with the appropriate stuff using javascript either in an onload or a document.ready jquery. I can get the facebox popup to work just fine but the initing code for the page (to fill in the real data) is apparently killed somehow by facebox. I illustrate this with just trying to get a trivial alert up but this only works if i do not use facebox to display the page. I'm new to facebox and jquery and clearly don't understand how to get facebox not to cream my page initialization js/jquery code.

Here is the parent page with the facebox trigger faceboxbreaksinit.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>
<script src="JS/faceboxbreaksinit.js" type="text/javascript"></script>

</head>

<body>
<div class="teemore" id="tm00">
<p><a href="larger.html?0.0" rel="facebox" class="teectls_teedetails">View Larger with Details</a></p>
</div>

</body>
</html>

and this is the popped up page larger.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>

<link rel="shortcut icon" href="/favicon.ico" />
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<script src="JS/larger.js" type="text/javascript"></script>
<script src="JS/teedata.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/larger.css" type="text/css" />
</head>
<body onLoad="testpploading()">

<h1 class="larger_name">SHIRTNAME</h1>
<img class="larger_front" src="" />

</body>
</html>

Obviously the alerts aren't what I want to do. But if I can get those to work (preferably both of them) I think I can proceed from there. I'm sure this problem is about my ignorance of facebox and jquery so I'm hoping someone can set me straight on how to get facebox to respect my initialization code for the popped up page.

Thanks in advance for any help. I've attached the js and css files for this demo of my problem.
jscheuer1
12-31-2009, 04:10 AM
This is really not a pop up (new window or tab). It's an AJAX import to facebox. These (highlighted, when imported via AJAX) will have no meaning:


<link rel="shortcut icon" href="/favicon.ico" />
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<script src="JS/larger.js" type="text/javascript"></script>
<script src="JS/teedata.js" type="text/javascript"></script>
<link rel="stylesheet" href="CSS/larger.css" type="text/css" />
</head>
<body onLoad="testpploading()">

Anyways, the easiest way to get javascript to work on imported content is to use iframe. There are other facebox-like scripts that can import via iframe. One such script is Lightwindow. Also, Lytebox and Thickbox, there are probably at least several others. Google the ones I've mentioned to see if any will work for you. These scripts also do other sorts of imports. Make sure you are using them with their iframe method for this, otherwise you will have similar issues as you are currently having with facebox, or possibly other issues.

Now, it can probably be made to work with facebox. For that we would need to put the external scripts and styles on the 'top' page (faceboxbreaksinit.html in this case I believe), and fire the body onload of the imported page (larger.html) as a callback of launching its content in facebox. This last would probably require editing the facebox script.