Jump to content
Sign in to follow this  
darrell

Html Help - New Scroll Box, Same Page

Recommended Posts

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)

Edited by webbybuilder

Share this post


Link to post
Share on other sites
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 ...

Share this post


Link to post
Share on other sites
not familiar with that
This 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

Share this post


Link to post
Share on other sites

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>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...