Solved

Jquery Tools - Overlay External Page can't display

Posted on 2011-02-12
4
2,629 Views
Last Modified: 2012-08-14
Hello all,
I'm using Jquery Tools as a library. I would like to open external page in modal box (overlay). I'm having an issue with opening external page inside of my div element.

Code:
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
	
	<style>
	
	/* use a semi-transparent image for the overlay */
	#overlay {
		background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
		color:#efefef;
		height:450px;
	}
	
	/* container for external content. uses vertical scrollbar, if needed */
	div.contentWrap {
		height:441px;
		overflow-y:auto;
	}
	</style>
	
</head>

<body>



<!-- external page is given in the href attribute (as it should be) -->
<a href="http://www.google.com" rel="#overlay" style="text-decoration:none">

	<!-- remember that you can use any element inside the trigger -->
	<button type="button">Show external page in overlay</button>	
</a>

<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
	<button type="button">Show another page</button>
</a>


<!-- overlayed element -->

<div class="apple_overlay" id="overlay">

	<!-- the external content is loaded inside this tag -->
	<div class="contentWrap"></div>

</div>

<!-- make all links with the 'rel' attribute open overlays -->
<script>

$(function() {

	// if the function argument is given to overlay,
	// it is assumed to be the onBeforeLoad event listener
	$("a[rel]").overlay({

		mask: 'darkred',
		effect: 'apple',

		onBeforeLoad: function() {

			// grab wrapper element inside content
			var wrap = this.getOverlay().find(".contentWrap");

			// load the page specified in the trigger
			wrap.load(this.getTrigger().attr("href"));
		}

	});
});
</script>

</body>

</html>

Open in new window


Here I can open the modal box, but I can't open the external page inside of the div element (Div element is visible).

I will be glad if anyone can help me out. Thank you for your help in advance.
0
Comment
Question by:pixalax
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 34878747

Is this an acceptable workaround:

<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26816889.html</title>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript"> 

jQuery( document ).ready( function() {

$("a[rel]").overlay( {
  mask: 'darkred',
  effect: 'apple',
  onBeforeLoad: function() {
    var contentWrap = this.getOverlay().find(".contentWrap");
    contentWrap.attr( { src: this.getTrigger().attr("href") } );
  }
});

});

</script>
<style>
#overlay {
	background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
	color:#efefef;
	height:450px;
}
	
.contentWrap {
	width: 100%;
	height: 100%;
	overflow-y:auto;
}
</style>
</head>
<body>

<a href="http://www.google.com" rel="#overlay" style="text-decoration:none">
  <button type="button">Show external page in overlay</button>	
</a>

<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
  <button type="button">Show another page</button>
</a>

<div class="apple_overlay" id="overlay">
  <iframe class="contentWrap" />
</div>

</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:pixalax
ID: 34878821
Hello Proculopsis,

 Thank you for your reply. It is quite acceptable except one thing. When I include it to my page, under <div class="apple_overlay" id="overlay"> </div> nothing is displayed (like footer).

 Could you guide me how to solve it (except adding it under the page)?

 Thank you for your time.
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34878922

Try this instead:

<iframe class="contentWrap"></iframe>
0
 
LVL 2

Author Closing Comment

by:pixalax
ID: 34879271
Thank you, works like a charm.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question