Help Me Out Guys . . .:)

Discussion in 'JavaScript' started by Skinny, Mar 23, 2007.

0
  1. #1
    Alrite let's say I have a div (box) which I want to display a set of contents.

    Let's say that I have a set of links:

    Apple
    Pear
    Bannana

    Now when I click on each link the box that I determine to use should display the following.

    Apple > Apples are red.
    Pear > Pears are green.
    Bannana> These are yellow.

    Now this is obviously an example and not exactly what I need done but the principle is the same.

    Now imagine that the discription for each of these fruits are stored in hidden divs with a unique ID.

    How do I get name with corresponding ID to show in a predefined box when clicked and hidden when something else is clicked.

    I hope the drawing below is explanotory.

    [​IMG]

    Can this be done with javascript.

    Thanks

    Skinny
     
    Skinny, Mar 23, 2007 IP
  2. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #2
    dude, I'm pretty drunk, I dunno how well this will work, or how well I read your post, but I tried at least ....

    
<html>
<head>
<title>Arrays and shit<title>
<script language="javascript">

	var FruitColor = new Array( "Red", "Orange", "Yellow", "Green" )
	var FruitType = new Array( "Apple", "Orange", "Bananna", "Pear")
	
	function doBorder( FruitType )
	{
		var color = FruitColor[ FruitType ];
		document.getElementById('holder').style.border = '3px solid ' + color + ';';
		document.getElementById('holder').style.color = color;	
		document.getElementById('holder').innerHTML = getType( FruitType ) + "'s are " + FruitColor[ FruitType ] + "";
		
	}
	function getType( index )
	{
		return FruitType[ index ];
	}
</script>
<head>
<body>
<div style="width:300px height:80px; border: 3px solid black;" id="holder">
	Please make a selection
</div>
<a href="javascript:doBorder( '0' )">Apple</a> |
<a href="javascript:doBorder( '1' )">Orange</a> |
<a href="javascript:doBorder( '2' )">Bannana</a> |
<a href="javascript:doBorder( '3' )">Pear</a>
</body>
</html>
    HTML:
     
    krakjoe, Mar 23, 2007 IP
  3. Aragorn

    Aragorn Peon

    Messages:
    1,491
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    0
    #3
    I modified the code a little bit. Not much change.
    
<html>
<head>
<title>Arrays and shit<title>
<script language="javascript">
    var arMsg = new Array( "Apples are red", "Oranges are orange", "Pears are green", "These are yellow")
    var arColor = new Array( "red", "orange", "green", "yellow")

    function doBorder( FruitType )
    {
        document.getElementById('holder').style.color = arColor[FruitType];  
        document.getElementById('holder').innerHTML = arMsg[FruitType];
        
    }
</script>
<head>
<body>
<div style="width:300px height:80px; border: 3px solid black;" id="holder">
    Please make a selection
</div>
<a href="javascript:doBorder( 0 )">Apple</a> |
<a href="javascript:doBorder( 1 )">Orange</a> |
<a href="javascript:doBorder( 2 )">Bannana</a> |
<a href="javascript:doBorder( 3 )">Pear</a>
</body>
</html>
    Code (markup):
     
    Aragorn, Mar 23, 2007 IP
  4. Skinny

    Skinny Peon

    Messages:
    1,864
    Likes Received:
    93
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Cool.

    Gonna try to implement that into my script. I'll see if it works.

    Skinny
     
    Skinny, Mar 24, 2007 IP
  5. Skinny

    Skinny Peon

    Messages:
    1,864
    Likes Received:
    93
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey guys,

    Okay I tested it and it works well. Now can I have the descriptions in a div elements that are hidden. And then still use this array structure to call them to display withing the holding box?

    Skinny
     
    Skinny, Mar 24, 2007 IP