Hello !

I have 2 divs in my webpage.
One div has links (using anchor tag).
When I click on the link, I want the webpage in href url to open in other div.

Can I do it using Javascript.

Regards
-Umesh

Recommended Answers

All 8 Replies

You can do this with IFRAME.
You can add an onclick event at the link. When that link is clicked execute a javascript method.
In that method you can take the iframe and set its src (source) with that page:

<IFRAME name="yourIframe" id="yourIframe" src="empty.jsp"></IFRAME>

Create an empty jsp for when the page loads. Just have an empty file.

When you click the link:

document.getElementById("yourIframe").src = "yourJsp.jsp";

OR:

document.getElementById("yourIframe").src = "yourJsp.jsp?param1=123&param2=abc";

check the http://www.w3schools.com/default.asp for a reference about the iframe

By the way, doesn't this thread belong to JavaScript instead? And actually, you can do it with JavaScript as well as javaAddict did.

Hi Java Addict
I thank you for prompt help.
Do you mean like this ? It works. But..

<html>
	<head>
	<script type="text/javascript">

	function changePage()
	{
		document.getElementById("yourIframe").src = "/MyJSP.jsp";		
	}
	</script>	
	</head>

   	<body>
       		<div id=links style="float:left;">
			<a href=# onclick="changePage()">myJSP</a>
		</div>
        	<div id=info style="float:right;"><h1>Contents will be displayed here</h1><br>
		<IFRAME name="yourIframe" id="yourIframe" src="empty.jsp" border=0 width=100% height=100% frameborder=0 scrolling=yes></IFRAME>
		</div>
        </body>
</html>

But..
the page which I want to open in other div(which is getting opened in iframe here) does not fit in the screen and vertical scrollbar appears on the iframe.
Additionally web page has its vertical scrollbar besides it.

I switched to divs from frames to avoid the scrollbar appearing on each frame
(although setting target for frames is easy.)

I want only one scrollbar on right.

I had a similar dilemna a while back, but I changed the logic of my site so that all my content loaded once, and my menu system just swapped out active divs. Setting all the divs as hidden, then setting the one I want active as visible.

Hi Fortinbra !
Sorry I didn't get you.
Can you explain in brief how can I apply that here in my case.

What I would have had as separate pages that loaded in the iFrame, I converted to being in Div tags on one page, but they were all set to hidden. When the link is clicked that would normally show the page in the iframe, I hid the current div and set the new one to being visible. Similar to a tab panel.

I have 4 jsps- index.jsp,toppage.jsp,menu.jsp, Welcome.jsp. The index.jsp contains two frames in a frameset for the 'toppage' frame and for the 'menupage' frame. The menu.jsp contains a div having iframe with src="Welcome.jsp". How can I set target of my toppage.jsp and menu.jsp to the Welcome.jsp, so that any link clicked on toppage or menu page will open inside the welcome iframe? please help me guys.....

<a href="toppage.jsp " target="welcome_iframe">TopPage</a>
<a href="Welcome.jsp " target="welcome_iframe">Welcome</a>
<a href="menu.jsp " target="welcome_iframe">menu</a>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.