Site Layout and Usability

First post need some help!

Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2006

Posts: 1

Reputation: themastertaylor is an unknown quantity at this point

Solved Threads: 0

themastertaylor themastertaylor is offline

Offline

Newbie Poster

First post need some help!

Apr 29th, 2006

Hi I'm currently buidling my own website and know a feature i want and am looking for a script or some code to do it. only thing is i can't think what it would be called!

basically i want key features of the product on one side of the page, and the other side displays a description of each feature as it is clicked. I want it to load just on the far side of the page though rather than refreshing the whole page if that makes sense - i.e the user remains on the one page but the information changes as they click on things. any pointers would be appreciated!

•

Join Date: Dec 2004

Posts: 50

Reputation: rus is an unknown quantity at this point

Solved Threads: 0

rus

Offline

Junior Poster in Training

Re: First post need some help!

May 19th, 2006

There are many ways to accomplish this, the easiest would be frames, although frames aren't the best way to go anymore. If you use Dreamweaver there are built in options to help you accomplish this, otherwise a tutorial on webmonkey or another how to site would be a good place to learn.

rus

www.raanda.com
www.shinysolutions.com

•

Join Date: Apr 2006

Posts: 116

Reputation: alpha2006 is an unknown quantity at this point

Solved Threads: 5

alpha2006

Offline

Junior Poster

Re: First post need some help!

May 20th, 2006

Yes. rus is right. The only way to do what you are asking for is using frames. However, frames are not widely used or accepted anymore as good website design.

Find Freelance Web Programmers and Graphic Designers @ Project4Hire.com
Webmaster Forum - Learn how to make money online
WebSorter Web Directory - Add your websites!
Buy or Sell Banner or Text Ads

•

Join Date: May 2006

Posts: 48

Reputation: rickvidallon is an unknown quantity at this point

Solved Threads: 0

rickvidallon rickvidallon is offline

Offline

Light Poster

Re: First post need some help!

May 26th, 2006

You could accomplish this effect with Java Script!

•

Join Date: Jul 2005

Posts: 483

Reputation: campkev is an unknown quantity at this point

Solved Threads: 19

campkev

Offline

Posting Pro in Training

Re: First post need some help!

May 26th, 2006

•

The only way to do what you are asking for is using frames

yes, and mountain dew is the only flavor of soda....

taylor, here is a javascript example of something similar to what you want using javascript

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<title>Our Products</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css"> 
	.submenu { padding-left:15px;}
		</style>
<script type="text/javascript">
<!--


function SwitchtoSub1(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "none";
	var el = document.getElementById('sub1');
		el.style.display = "block";
	var el = document.getElementById('sub3');
		el.style.display = "none";
	}
}

function SwitchtoSub2(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "block";
	var el = document.getElementById('sub1');
		el.style.display = "none";
	var el = document.getElementById('sub3');
		el.style.display = "none";
	}
}



function SwitchtoSub3(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "none";
	var el = document.getElementById('sub1');
		el.style.display = "none";
	var el = document.getElementById('sub3');
		el.style.display = "block";
	}
}


-->
</script>
</head>
<body>
<p><b>ProductList</b></p>

<form name="form1" action="productorder.html" method=post>
Please select a product:<br><br>
<input type=radio name=mType onclick="SwitchtoSub1()" value="prod1" checked><b>Product1</b><br>
<input type=radio name="mType" onclick="SwitchtoSub2()" value="prod2"><b>Product2</b><br>
<input type=radio name=mType onclick="SwitchtoSub3()" value="prod3"><b>Product3</b><br>

<br>
<br>
Product Information:
<table bgcolor="#CCCCCC" border=2>
<tr>
<td width=600 height=300>

<div class="submenu" id="sub1" style="display:block;">
Product 1 Sucks but its free.
</div>


<div class="submenu" id="sub2" style="display:none;">
Product 2 is cheap and does some neat stuff
</div>
<div class="submenu" id="sub3" style="display:none;">
Product 3 does everything, but it costs more than your house
</div>&nbsp;
</td></tr></table><br>
<table>
<tr><td width=600>
<center><input type=submit name="cont" value=Continue></center>
</td></tr></table></form>
</body></html>

<html>
<head>
<title>Our Products</title>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css"> 
	.submenu { padding-left:15px;}
		</style>
<script type="text/javascript">
<!--


function SwitchtoSub1(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "none";
	var el = document.getElementById('sub1');
		el.style.display = "block";
	var el = document.getElementById('sub3');
		el.style.display = "none";
	}
}

function SwitchtoSub2(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "block";
	var el = document.getElementById('sub1');
		el.style.display = "none";
	var el = document.getElementById('sub3');
		el.style.display = "none";
	}
}



function SwitchtoSub3(){
if(document.getElementById){
	var el = document.getElementById('sub2');
		el.style.display = "none";
	var el = document.getElementById('sub1');
		el.style.display = "none";
	var el = document.getElementById('sub3');
		el.style.display = "block";
	}
}


-->
</script>
</head>
<body>
<p><b>ProductList</b></p>

<form name="form1" action="productorder.html" method=post>
Please select a product:<br><br>
<input type=radio name=mType onclick="SwitchtoSub1()" value="prod1" checked><b>Product1</b><br>
<input type=radio name="mType" onclick="SwitchtoSub2()" value="prod2"><b>Product2</b><br>
<input type=radio name=mType onclick="SwitchtoSub3()" value="prod3"><b>Product3</b><br>

<br>
<br>
Product Information:
<table bgcolor="#CCCCCC" border=2>
<tr>
<td width=600 height=300>

<div class="submenu" id="sub1" style="display:block;">
Product 1 Sucks but its free.
</div>


<div class="submenu" id="sub2" style="display:none;">
Product 2 is cheap and does some neat stuff
</div>
<div class="submenu" id="sub3" style="display:none;">
Product 3 does everything, but it costs more than your house
</div>&nbsp;
</td></tr></table><br>
<table>
<tr><td width=600>
<center><input type=submit name="cont" value=Continue></center>
</td></tr></table></form>
</body></html>

•

Join Date: Jun 2006

Posts: 15

Reputation: GRex is an unknown quantity at this point

Solved Threads: 0

GRex

Offline

Newbie Poster

Re: First post need some help!

Jun 1st, 2006

If you feel adventurous enough, read up on ajax. It's meant to be such that everything that happens on your page don't need to be refreshed.

GRex
http://onelurv.com - feed reader & password bookmarker

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: First post need some help!

Jun 7th, 2006

•

Originally Posted by alpha2006

Yes. rus is right. The only way to do what you are asking for is using frames. However, frames are not widely used or accepted anymore as good website design.

Really you think this yet you can type your own name? Who's a clever boy. lol. The most effective way is defenately using javascript. I wouldn't use frames it will not achieve what you want exactly and will give you strange scroll bars.

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: Dec 2004

Posts: 50

Reputation: rus is an unknown quantity at this point

Solved Threads: 0

rus

Offline

Junior Poster in Training

Re: First post need some help!

Jun 7th, 2006

•

Originally Posted by roryt

Really you think this yet you can type your own name? Who's a clever boy. lol. The most effective way is defenately using javascript. I wouldn't use frames it will not achieve what you want exactly and will give you strange scroll bars.

Yes, you could do frames without the scrollbars, but frames are old technology that doesn't work very well. In fact, it's been so long since I've used frames in a site I can't even give you a code sample.

I'm sorry you are having to hear all the bickering and different ideas when you really need a clear pointer as to how to acheive the effect you want.

Some solutions you could research further are:
Frames
I Frames
Ajax
You could do this with "dynamic" coding such as PHP or VBScrip.
Javascript

As they say, there are many ways to skin a cat.

I hope this helps some.

rus

www.raanda.com
www.shinysolutions.com