How do I make an alternate content switcher?

[Daveway]

I'm working on a website and my client wants to be able to have a front page that displays one story (image and text) but also for that story to be changed to another.
Its hard to explain but an example can be found here. In particular its that ability to switch between different stories on the front page without reloading are going to another page. (1,2,3)

I'm assuming this would use some sort of javascript.

Any suggestions?

 

[atari1356]

There are a few different ways you could do it:

1. The easiest would probably be to use an iframe which calls an HTML page containing the first story... then a button (or text links) would link to other stories. Only the iframe would have to reload, not the entire page.

For example, the calendar on this page is contained in an iframe. The iframe initially calls "jan.html" for January... then you can click on "FEB" which loads "feb.html" into the iframe, or "MAR" which loads "march.html". (so, you'd need a separate HTML page for each story)

2. You could put the content inside a div tag, then reference that div tag using javascript to replace the content... the javascript would be something like:

document.getElementById("theNameOfYourDiv").innerHTML = "<h1>Title of Your Article</h1><p>Content of your article.</p>";

(my calculator widget uses similar code to write numbers onto the calculator's screen)

3. You could put the articles in a Flash file that's embedded into the page... not something I would recommend though, as I generally dislike using Flash to display content like that.

 

[GFLPraxis]

I'm actually trying to do something similar. I've got a div on the top and bottom of a specific size that is the menu bar and notes on the bottom. I want to fill up the rest of the page with whatever page the user is viewing. You click the link on the top, and the page you want appears in between the bars. I tried an iframe, but when you change resolutions it's either too big (double scrollbars) or too small (taking up only a small portion of the page), which looks horrible. Is there any way to have it load up external HTML and fill up all the extra space in the page no matter what resolution?

 

[GFLPraxis]

Anyone?

Here's what I have. And yes, it's very complete, and I'm going to replace the old style with the new one so a lot of the pages are designed to work with the old layout, which is why the pages don't mesh too well.

http://italian-art.net/NewDesign.html

Click some of the links. How can I make the pages that are loaded fill up everything between the top and bottom bars?

 

[superbovine]

Anyone?

Here's what I have. And yes, it's very complete, and I'm going to replace the old style with the new one so a lot of the pages are designed to work with the old layout, which is why the pages don't mesh too well.

http://italian-art.net/NewDesign.html

Click some of the links. How can I make the pages that are loaded fill up everything between the top and bottom bars?

it is sort of clunky on the "Still life & Modern Art" page. Having two scrolls bars side by side is annoying.

 

[superbovine]

I'm working on a website and my client wants to be able to have a front page that displays one story (image and text) but also for that story to be changed to another.
Its hard to explain but an example can be found here. In particular its that ability to switch between different stories on the front page without reloading are going to another page. (1,2,3)

I'm assuming this would use some sort of javascript.

Any suggestions?

Aside from the suggestion above a coming from php, I usually have dynamic content like and a menu system. I usually start with a css layout template that I have on hand, and break up the sections in header, footer, and body. The body section are called dynamically and either open a new link or call a static html page. This is a ideal for small sites with a low number of links to manage.

anyway, I'll post the code..

http://cowzilla.sourceforge.net is a working model..

index.php

<?php include('./header.inc'); ?>


<?php 
    $input = NULL;
    
    $input = $_GET['z'];
    
    
    if(strcmp("examples",$input) == 0) {
      
        include('./example.html');
    }
    
    else if(strcmp("news",$input) == 0) {
        include('./news.html');   
    }

    else {
        include('./about.html');
    }


?>


<?php include('./footer.inc'); ?>

header.inc

<!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">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php

$title = "Cowzilla The Feed Monster";
 
echo "<title>$title</title>"; 

?>
<style type="text/css" media="all">@import "cowzilla.css";</style>
<!-- template from bluerobot.com -->

</head>

<body>

<div id="Header"><a href="index.php" title="Cowzilla Home">COWZILLA</a> </div><br/>

footer.inc

<div id="Menu">
    <a href="./index.php?z=news" title="News">News</a><br />
	<a href="http://cowzilla.blogspot.com" title="Cowzilla The Feed Monster" target="_new">Blog</a><br />
	<a href="http://sourceforge.net/projects/cowzilla/" title="Download" target="_new">Download</a><br />
	<a href="./index.php?z=examples" title="Examples">Examples</a><br />
	<a href="http://sourceforge.net/project/screenshots.php?group_id=138911" title="Screenshots">Screenshots</a><br />	
	<a href="./index.php?z=about" title="About">About</a><br />
	<br />
	<A href="http://sourceforge.net"> <IMG src="http://sourceforge.net/sflogo.php?group_id=138911&type=5" width="105" height="31" border="0" alt="SourceForge.net Logo" /></A>
</div>

<!-- BlueRobot was here. -->

</body>
</html>

 

[GFLPraxis]

it is sort of clunky on the "Still life & Modern Art" page. Having two scrolls bars side by side is annoying.

That's what I'm trying to achieve (I didn't put the content= on the other links). I want the Still Life & Modern Art page to fill up the entire black area, rather than a fixed size of 800x600. How can I do that?