SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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..

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    If you're using hyperlinks and loading external pages, you'll have to use an iframe or object, not a div.

  3. #3
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your reply.

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

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  6. #6
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,839
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  8. #8
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

  9. #9
    SitePoint Member josephman1988's Avatar
    Join Date
    Mar 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "Ah the USB, the only rectangular device
    that requires 3 attempts to get right."

  10. #10
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •