darrell Posted June 30, 2009 Share Posted June 30, 2009 Hello, I would like to build a page with a central scroll box, and I would like to have several links on that page to load new content in the old scroll box (while staying on the same page). I already know how to make a link, and how to make a scroll box. Any help would be appreciated. Thanks.P.S. (If this matters, one of the links would bring back the original scroll box content) Link to comment Share on other sites More sharing options...
NurAzije Posted July 6, 2009 Share Posted July 6, 2009 Hello, I would like to build a page with a central scroll box, and I would like to have several links on that page to load new content in place of the old scroll box (while staying on the same page). I already know how to make a link, and how to make a scroll box. Any help would be appreciated. Thanks.P.S. (If this matters, one of the links would bring back the original scroll box content)You can use IFRAME ... Link to comment Share on other sites More sharing options...
darrell Posted July 7, 2009 Author Share Posted July 7, 2009 You can use IFRAME ...not familiar with that Link to comment Share on other sites More sharing options...
meranda2100 Posted July 7, 2009 Share Posted July 7, 2009 not familiar with thatThis code creates an iframe with two different links, one to my web page another to Google. You can change the links and have it load whatever you want, this is a simple iframe. <iframe src="http://meranda2100.hostei.com" width="50% height="200"> <p>Your browser does not support iframes</p><iframe src="http://google.com" width="50%" height="200"> <p>Your browser does not suppot iframes</p></iframe>is this what you are looking for?Meranda 2100 Link to comment Share on other sites More sharing options...
NurAzije Posted July 7, 2009 Share Posted July 7, 2009 You can also find more data on W3Schools http://www.w3schools.com/TAGS/tag_iframe.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted July 7, 2009 Share Posted July 7, 2009 or instead of using iframes you could use this option<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#scrollbox {width: 300px; height: 300px; overflow:auto; border: 2px solid red;}#item1 {display: block;}#item2, #item3 {display: none;}#item2 {color:#3366FF;}#item3 {color: #FF6600;}</style><script type="text/javascript"><!--//function runthis(y) { var d = "item"; //div name without number //find the number of inner divs within scrollbox div var scrollbox_div = document.getElementById("scrollbox"); var inner_divs= scrollbox_div.getElementsByTagName("DIV"); var total_divs = inner_divs.length; //clear all inner divs for(i=1;i<=total_divs;i++) { if (document.getElementById(d+i)) { document.getElementById(d+i).style.display="none"; } } //make selected div visible var x = document.getElementById(d+y).style; x.display="block"; } //--></script> </head><body><a href="#" onclick="runthis(1)">show Item1/Home Page</a><br /><a href="#" onclick="runthis(2)">show Item2</a><br /><a href="#" onclick="runthis(3)">show Item3</a><div id="scrollbox"><div id="item1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div></div></body></html> Link to comment Share on other sites More sharing options...
sunicani Posted July 7, 2009 Share Posted July 7, 2009 or instead of using iframes you could use this option<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#scrollbox {width: 300px; height: 300px; overflow:auto; border: 2px solid red;}#item1 {display: block;}#item2, #item3 {display: none;}#item2 {color:#3366FF;}#item3 {color: #FF6600;}</style><script type="text/javascript"><!--//function runthis(y) { var d = "item"; //div name without number //find the number of inner divs within scrollbox div var scrollbox_div = document.getElementById("scrollbox"); var inner_divs= scrollbox_div.getElementsByTagName("DIV"); var total_divs = inner_divs.length; //clear all inner divs for(i=1;i<=total_divs;i++) { if (document.getElementById(d+i)) { document.getElementById(d+i).style.display="none"; } } //make selected div visible var x = document.getElementById(d+y).style; x.display="block"; } //--></script> </head><body><a href="#" onclick="runthis(1)">show Item1/Home Page</a><br /><a href="#" onclick="runthis(2)">show Item2</a><br /><a href="#" onclick="runthis(3)">show Item3</a><div id="scrollbox"><div id="item1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div><div id="item3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p> </div></div></body></html>great! and, what's for "<html xmlns="http://www.w3.org/1999/xhtml">"? thank you, mate Link to comment Share on other sites More sharing options...
darrell Posted July 7, 2009 Author Share Posted July 7, 2009 thanks a lot everyone, i'll try 'em out! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 7, 2009 Share Posted July 7, 2009 great! and, what's for "<html xmlns="http://www.w3.org/1999/xhtml">"? see: http://www.w3schools.com/TAGS/tag_html.asp Link to comment Share on other sites More sharing options...
darrell Posted July 7, 2009 Author Share Posted July 7, 2009 dsonesuk: That works great! You're awesome! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.