Question : I would like to have 2 links on a page and then use Jquery to fade in a external page from either link.

I would like to create 2 logins and pull each login by clicking on "Link 1" or "Link 2". What I'm looking for is that the iframe or login would fade in when the link is clicked. So if "Link 1" was clicked Login 1/iframe1 would fade in or if "Link 2" is clicked then login 2/iframe2 would fade in over login 1/iframe1.

I'm not too sure about iframes but when I actually login on either login/iframe how would I open a new window and not continue on through the iframe window of limited dimensions.

Brian

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:



<!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>Untitled Document</title>
</head>

<body>

<a href="access_iframe_1">Link 1 </a>

<a href="access_iframe_2">Link 2 </a><br />
<br />
<br />
<iframe
name="iframe1"
width="600"
height="400"
src="login1html"
frameborder="no"
scrolling="no">
</iframe>

<iframe
name="iframe2"
width="600"
height="400"
src="Login2.html"
frameborder="no"
scrolling="no">
</iframe>
</body>
</html>

Answer : I would like to have 2 links on a page and then use Jquery to fade in a external page from either link.

I figured it out with this...

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:



 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>


 
<script>
	$(document).ready(function() {
	  $(".login_1").hide();
	  $(".login_2").hide();
	  
	  $(".button_login_1").click(function() {
			$(".login_1").fadeIn("slow");
			$(".login_2").hide();
		});
	  
	  $(".button_login_2").click(function() {
			$(".login_2").fadeIn("slow");
			$(".login_1").hide();
		});
	});
</script>



</head>
<body>
<div class="button_login_1">Login 1</div>
<div class="button_login_2">Login 2</div>

<div>
	<div class="login_1">
		<iframe src ="index.cfm" width="100%" height="300">
  			<p>Your browser does not support iframes.</p>
		</iframe>
	</div>
	<div class="login_2">
		<iframe src ="html_intro.asp" width="100%" height="300">
  			<p>Your browser does not support iframes.</p>
		</iframe>
	</div>
</div>

</body>
</html>
 