Solved

Jquery Tools - Overlay External Page can't display

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sorting a string 1 27
Disable Security Alert  popup in Winforms  embedded webbrowser. 1 25
jqury 17 28
If condition on Html with Asp 11 12
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

813 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

14 Experts available now in Live!

Get 1:1 Help Now