Solved

Jquery Tools - Overlay External Page can't display

Posted on 2011-02-12
4
2,583 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
  • 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now