Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I make a link load a div? 1

Status
Not open for further replies.
Thinius

Thinius

Programmer
Oct 27, 2010
8
GB
Hi everyone, I know this is a stupid question but I can't figure out how to make a link load a div. I have

Code: 
<html>
<head>
<style type="text/css">
#lock { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
</style>
</head>
<body>
<p>This page will be locked if you <a onclick="lock" href="mailto:billgates@msn.com">click here</a></p>
</body>
</html>

What should I do?
 
Sort by date Sort by votes
What I mean is that clicking the link should make it do what the following does.
Code: 
<html>
<head>
<style type="text/css">
#lock { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
</style>
</head>
<body>
<div id=lock></div>
</body>
</html>
 
Upvote 0 Downvote
Hello,
What content needs to be added within the div once the link button is pressed?
 
Upvote 0 Downvote
Do you mean, you want the lock div to be displayed once the link is clicked?
 
Upvote 0 Downvote
Hi Strawhat, yes you are right, the link loads a box which would be displayed on top of that "lock" but the html is so long I took everything out to show what I needed help with.
 
Upvote 0 Downvote
is this somthing on the lines of what you where looking for?


<html>
<head>
<style type="text/css">
<!--
#lock { background-color: #000; opacity: 0.7; display:none; width:100%;height:100%;}
#container{display:block; width:100%;height:100%; background-color: grey}
.wrapper{width:200px; height:100px;}
-->
</style>

<script type="text/javascript">
<!--
function hide(hidename, showname)
{
document.getElementById(hidename).style.display = "none";
document.getElementById(showname).style.display = "block";
}
-->
</script>
</head>
<body>
<div class='wrapper'>
<div id="lock"></div>
<div id="container" Here is the container with all the information and such in <br/> <a id='button' href="javascript:hide('container','lock')">Click Me To Lock </a>
</div>
</body>

</html>
 
Upvote 0 Downvote
What I meant is like how google images loads the image you are looking for above all else and greys the rest out. I'll try to figure out what you gave me Thanks for your help. If I were Luffy I'd recruit you.
 
Upvote 0 Downvote
You will have to use javascript (AJAX methods) to do that

forum216

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
 
Upvote 0 Downvote
below is an example i wrote of what i think you are looking for, you will need to edit it to fit your own design
Code: 
<html>
	<head>
		<style type="text/css">
		<!--
			.popup { position: absolute	; background-color: #000; opacity: 0.7; display:none; z-index: 100; float:right; width:100px;height:100px;}
			.holder{display:block; background-color: aqua; width:200px; margin-bottom:10px;}
		-->
		</style>
		
		<script type="text/javascript">
		<!-- 
			var backcolor
			function show(name, subname)
			{
				document.getElementById(name).style.display = "block";
				backcolor = document.getElementById(subname).style.backgroundColor;
				document.getElementById(subname).style.backgroundColor = "Silver";
			}
			
			function LostFocus(name, popup) 
			{
				document.getElementById(name).style.backgroundColor = backcolor;
				document.getElementById(popup).style.display = "none";
			}
		-->
		</script>
	</head>
	<body>
		<div id="container" class='holder' onmouseleave="LostFocus('container','lock')" > Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock', 'container')">Click Me To Lock </a>
			<div id="lock" class='popup'></div>
		</div>
		<div id="container1" class='holder' onmouseleave="LostFocus('container1','lock1')"> Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock1', 'container1')">Click Me To Lock </a>
			<div id="lock1" class='popup'></div>
		</div>
		<div id="container2" class='holder' onmouseleave="LostFocus('container2','lock2')	")> Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock2', 'container2')">Click Me To Lock </a>
			<div id="lock2" class='popup'></div>
		</div>
		<div id="container3" class='holder' onmouseleave="LostFocus('container3','lock3')")> Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock3', 'container3')">Click Me To Lock </a>
			<div id="lock3" class='popup'></div>
		</div>
		<div id="container4" class='holder' onmouseleave="LostFocus('container4','lock4')")> Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock4', 'container4')">Click Me To Lock </a>
			<div id="lock4" class='popup'></div>
		</div>
		<div id="container5" class='holder' onmouseleave="LostFocus('container5','lock5')")> Here is the container with all the information and such in <br/> <a id='button' href="javascript:show('lock5', 'container5')">Click Me To Lock </a>
			<div id="lock5" class='popup'></div>
		</div>
	</body>
	
</html>
 
Upvote 0 Downvote
Thanks, Mugiwara. I'll definitely work on this.
 
Upvote 0 Downvote
Glad i could help, sorry i forgot to comment on it i can resend a commented one if needed
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
599
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
170
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
986
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
661
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
602
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top