target attribute of Anchor tag in left div, to display content in right div?

**venkat6134** · May 12, 2011 03:36

Hi all,

I have a html page, having two div's.
Left div contains all contents(INDEX of pages) with hyper-links.
Now i want to display the content in the right div, that the user has clicked.

I tried by using the target attribute in anchor tag, but it is not showing in that right div..

How to solve this?

Thanking you..

**samanime** · May 12, 2011 03:44

If you're using hyperlinks and loading external pages, you'll have to use an iframe or object, not a div.

**venkat6134** · May 12, 2011 03:50

thank you for your reply.

Then is there any way to get it, without using the hyperlinks in anchor tags..

**samanime** · May 12, 2011 03:55

Are you trying to add just text content, or a whole HTML page?

Is the content of the div already hidden in the page somewhere?

If you could explain a bit further what you're trying to accomplish, we can help you out a bit better.

**venkat6134** · May 12, 2011 04:01

Am using only Text Content but some hyperlinks are there, to go to 'top', 'next', 'previous' pages..

For Ex, see this page to understand the problem,
Reliability and Accelerated Testing - A tutorial

This page contains all contents list..
If user clicks on any link, now it will open in another web page..

Now i want to display this contents on left side and the related content on right side based on user selections..

How can i do in a simple way without using frames...

Thanking you..

**Stevie D** · May 12, 2011 04:33

One option is to have the entire contents load at the start, and then use Javascript to hide everything that isn't required. Clicking on the links then uses Javascript to unhide the relevant section and hide any other section that is showing. You should also have a linearised version for anyone who doesn't have Javascript available, which would just have them jumping down the page.

Another option, which may be simpler to achieve, is to again have all the sections combined into a single page, with enough vertical spacing between them that you'll never have more than one on screen at a time. You can then use "position:fixed;" on the menu (doesn't work in IE6) to keep it in the same place on the screen while jumping up and down the content. This doesn't rely on Javascript at all.

**venkat6134** · May 12, 2011 04:55

Can i use include page?
if not,
can you explain with an example for the second option you given in the last reply.?

thanking you..

**FaridHadi** · May 12, 2011 07:44

You're thinking about it the wrong way. You can't change a page once it's been loaded unless you use JavaScript.

You can't target a div with the target attribute and you shouldn't be using it anyways. It was meant for specifying which window or frame to open the linked document in.

As for "including a page", that's not an option either as this is done server side with a language like PHP. This would still not have the result you're looking for.

You'll want to look into JavaScript and "showing / hiding content".

**josephman1988** · May 12, 2011 07:55

I think in this case, wouldn't it be ideal to use Ajax?

Originally I would use the jQuery framework to load ALL content, clicking on a link would hide everything and show the relevant div.

But now i would use Ajax to only load what is relevant without have all the hidden content stuck somewhere else on the page.

Although I'm guessing this would be more preference based :P.

**Victorinox** · May 12, 2011 12:09

If it's possible for the height of each section of content to be the same, then this can be achieved without javascript.

The individual content divs are each given an id, so that they can be targeted by the links. They are all contained within a div (#porthole) set to the same height as the content divs and with overflow:hidden; so that anything outside the container's dimensions is not visible.

In the example below, the height is set in ems to allow for differences in user font sizes.

It's not bulletproof. For example, if the browser font-size is changed when any but the first div is displayed then other divs will intrude (though clicking a link or refreshing fixes this).

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Porthole Content Switching</title>
 
<style type="text/css" media="screen">
 
	body {
	font:100%/1.4 Arial, Verdana, sans-serif;
	}
 
	ul {
	float:left;
	margin-right:20px;
	list-style:none;
	}
 
	#porthole {
	width:400px;
	overflow:hidden;
	height: 20em;
	border: 5px #777 solid;
	}
 
	#porthole div {
	height: 20em;
	padding:10px;
	}
 
</style>
 
</head>
 
<body>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>
 
<div id="porthole">
 
<div id="one">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
<div id="two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
 
<div id="three">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
 
<div id="four">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. 
</div>
 
<!-- #porthole --></div>
 
</body>
</html>

User Tag List

Thread: target attribute of Anchor tag in left div, to display content in right div?

Thread Tools

Display

target attribute of Anchor tag in left div, to display content in right div?

Bookmarks

Bookmarks

Posting Permissions