PDA

View Full Version : Expandable Menus (not sure how to word it)

Magial
03-04-2004, 06:25 AM
What Im trying to implement is when you click on the Text link, instead of getting a submenu, you get like a paragraph or two of text.

This will not be on the left/right side of my webpage, but will be in the middle frame. Using it to help minimize the amount of pages Ill need... but cant figure out how to make it happen.

Any help would be greatful.
Kor
03-04-2004, 11:55 AM
Something like this ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
var t = new Array()
t[0] = new Array('id1','text here for link 1');
t[1] = new Array('id2','another text here for link 2');
t[2] = new Array('id3','link 3 and text here');
function bla(a){
for(i=0;i<t.length;i++){
if(t[i][0] == a){
document.getElementById('txt').innerHTML = t[i][1];
}
}
}
</script>
</head>

<body>
<div id="txt" style="position:absolute; left: 100; width: 150; height: 30; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"></div>
<a href="#" id="id1" onclick="bla(this.id)">Link 1</a><br>
<a href="#" id="id2" onclick="bla(this.id)">Link 2</a><br>
<a href="#" id="id3" onclick="bla(this.id)">Link 3</a>
</body>
</html>
Magial
03-05-2004, 03:11 AM
Ahh that will work just fine! Thanks a lot man, saved me a bunch of time and pages.

Thanks again!
Kor
03-05-2004, 08:16 AM
...and, if you have a lot of links, maybe is a good ideea to stop the loop after the condition is fulfiled

document.getElementById('txt').innerHTML = t[i][1];break
glenngv
03-05-2004, 08:32 AM
You could have also implemented it without looping.
<html>
<head>
<script>
var t = new Array()
t[0] = 'text here for link 1';
t[1] = 'another text here for link 2';
t[2] = 'link 3 and text here';

function bla(a){
document.getElementById('txt').innerHTML = t[a];
return false;
}
</script>
</head>
<body>
<div id="txt" style="position:absolute; left: 100; width: 150; height: 30; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"></div>
<a href="#" onclick="return bla(0)">Link 1</a><br>
<a href="#" onclick="return bla(1)">Link 2</a><br>
<a href="#" onclick="return bla(2)">Link 3</a>
</body>
</html>
Magial
03-05-2004, 05:52 PM
Thanks for the extra help, its very much appreciated.

But the text that I need to have shown, after the link is clicked, is pretty big text. Its almost a few paragraphs in length. Now is there a way to show these huge paragraphs in the

t[0] = 'text here for link 1';

??

I rearranged the text box, so that it is underneath the links, and I also made the box bigger so that it could compensate for the large text.
shlagish
03-05-2004, 07:08 PM
It's the same thing really. You can add tags too if you want.

<html>
<head>
<script>
var t = new Array()
t[0] = '<p>Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. </p><p>Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. Some enormous text. </p>';
t[1] = '<p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. </p><p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. v</p>';
t[2] = '<p>Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. </p><p>Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. </p>';

function bla(a){
document.getElementById('txt').innerHTML = t[a];
return false;
}
</script>
</head>
<body style="text-align: center;">
<a href="#" onclick="return bla(0)">Link 1</a>
<a href="#" onclick="return bla(1)">Link 2</a>
<a href="#" onclick="return bla(2)">Link 3</a><br>
<div id="txt" style="width: 60%; background-color: #CCCCCC;"></div>

</body>
</html>
Magial
03-06-2004, 03:11 AM
Ahh.. I knew that. Sadly, I probably coulda figured that out by testing it all out.

Are you able to put all types of tags in it.. such as <table></table> and stuff like that? If so, that would be awesome.. gonna try it out now actually.

Thanks again for the help!
shlagish
03-06-2004, 03:26 AM
probably not ANY tag.
<html> wouldn't work I don't think. <table> would work though I think...
Magial
03-06-2004, 03:31 AM
Well I didnt mean tags like that... Im clearly aware that that particular tag, as well as <head> and <title> wouldnt work. Ill just test to see what does and doesnt work.
Magial
03-06-2004, 04:08 AM
<html>
<head>
<script>
var t = new Array()
t[0] = '<p>Once you place your house, you will want furniture and knick-knacks. About house addons: You can
unlock them if you want to move them around, put where you want, and lock them down again (after
theyve been placed). Also, in Britain at the Provisioners (and elsewhere) you will find an npc
called "Decorator". You can buy all sorts of neat things to dress up your house. There are 4
places to find cool stuff for your house: NPC Decorators, NPC Bakers, Player Carpenters and GMs.
The NPC decorators have a lot of items that can not be crafted by players like decorative weapon
racks, decorative shields, portraits, spider webs and more. The table below shows items that can
be obtained from other sources.</p>
<p>Farmers now carry seeds that will create plants. When you use a flower seed, youll be able to
choose from a few different types of flowers that you can plant. If you select a flower, a flower
of that type will appear locked down at your feet (using 1 house lockdown slot.)
<p>To removed a flower, unlock it like you would any other item ("I wish to lock this down", or "I wish
to release this".) You will not receive a flower seed back (after all, you ripped the plant up by the
roots. Its dead.)</p>
<p>When you use a flower seed (available from farmer NPCs), you now get a targeting cursor. If you target
yourself, youll plant the flowers where youre standing. If you target a pot or vase, youll plant the
flowers in that Sometimes looks pretty bad, sometimes looks pretty good. Youll just have to
experiment.) If you target anything else, youll cancel the planting. You now have to lock down the
vase where you want it. When you target the vase, the flowers will appear on top. If you target
yourself, the flowers will appear where you are standing.</p>
<table cellspacing="0" border="1" bgcolor="#999999">
<tr>
<td align="middle" width="20%">GM placed Stuff </td>
<td align="middle" width="20%">Carpenter Deeds </td>
<td align="middle" width="20%">Baker Deeds </td>
<td align="middle" width="20%">Blacksmith Deeds </td>
<td align="middle" width="20%">Bee Keeper </td>
</tr>
<tr>
<td>Fences (5K per tile) </td>
<td>Small Forge </td>
<td>Ovens </td>
<td>Outside lamp posts </td>
<td>New Beehives </td>
</tr>
<tr>
<td>Teleporters 1 </td>
<td>Anvil </td>
<td>Fire Place </td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Fighting Dummy </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Pick Pocket Dip </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Large Bed </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Small Bed </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Loom </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Spinning Wheel </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Grinding Mills </td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p>1 : Teleporters cost 10% of the house and are left to GM discretion. Not all houses need
teleporters. For example, the 150K tower would not need teleporters where some static houses
would need them to gain access to locations such as the roof (not available on all static
houses).</p>';
t[1] = '<p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. </p><p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. v</p>';
t[2] = '<p>Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. </p><p>Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. Another text. </p>';
t[3] = '';
t[4] = '';
t[5] = '';
function bla(a){
document.getElementById('txt').innerHTML = t[a];
return false;
}
</script>
</head>
<body style="text-align: left;" bgcolor="black">
<font color="#FF0000">
<center><h2>Housing</h2></center>
<p>One of the more enjoyable aspects of the UO derived virtual worlds is the ability to have your own
place! The Lords of Empyria embraces this concept and while we continue to develop this, there is
plenty of room to place a purchased house and there are static houses to buy as well.</p>

<center><a href="#" onclick="return bla(0)">Add-Ons</a> ::
<a href="#"onclick="return bla(1)">Buying & Basics</a> ::
<a href="#"onclick="return bla(2)">Decorating</a> ::
<a href="#"onclick="return bla(3)">House Values</a> ::
<a href="#"onclick="return bla(4)">Mailboxes</a> ::
<a href="#"onclick="return bla(5)">Static Housing</a></center>
<div id="txt" style="width: 60%; background-color: #CCCCCC;"></div></font>

</body>
</html>


Now I only did the first link. Just to see if it would work. It didnt, anyone else care to see if I did something wrong, or maybe changed something that shouldnt have been changed...
Kor
03-06-2004, 09:06 AM
Nope... Not a bright ideea. You said you want to keep your site as accesible as possible yet and less complicated. But if each innerHTML in layers ar so big, you will make this first page much to haeavier, hard to load, hard tu update....

The proper ideea, in my oppinion, is to use iframes.
Magial
03-06-2004, 10:57 AM
Using iframes requires me to set up another page for the frame to read from. I dont want to make any more pages for my site.

All I want, is to be able to click the link, and text show describing that particular link.

Like in the code I posted for example: If you click on Add-ons, you get a description and prices for add-ons in the house.

You said you want to keep your site as accesible as possible yet and less complicated.

Actually, I believe I said that I didnt want to make 50 pages for my site.
Kor
03-06-2004, 11:35 AM
When set the value to a variable, in javascript you have to get rid of all the "overwrapped" spaces, that means no overruled required empty spaces.

That means:

var bla = 'asdasd asdasd asdas<sda>sada';
is correct, while:

var bla = 'asdasd
asdasd
asdas
<sda>sada';
is wrong, as javascript take all the new line as a new code line.

You have

1. either write them without any wrong coding wrap

2. or add + for each new line string:
var bla = 'asdasd'+
+'asdasd'+
+'asdas'+
+'<sda>sada';

See now why I said that a long and intricate text layers means much more trouble than an easy iframe solution?

If you still want them on the same page, you will have to use dynamic change of CSS visibility or display. Know how to do that?
Magial
03-06-2004, 11:46 AM
So for this:


[0] = '<p>Once you place your house, you will want furniture and knick-knacks.

About house addons: You can unlock them if you want to move them around, put where you want,

and lock them down again (after theyve been placed).</p>';


It would need to be changed to something like this:


[0] = '<p>Once you place your house, you will want furniture and knick-knacks.'+

+'About house addons: You can unlock them if you want to move them around, put where you want,'+

+'and lock them down again (after theyve been placed).</p>';
Kor
03-06-2004, 11:53 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
.text{
width: 60%;
background-color: #CCCCCC;
position:absolute;
top:200;
display:none
}
-->
</style>
<script>
function bla(a){
for(i=0;i<document.getElementsByTagName('div').length;i++){
document.getElementsByTagName('div')[i].style.display = 'none';
}
document.getElementById('txt'+a).style.display = 'inline';
}
</script>
</head>
<body style="text-align: left;" bgcolor="black">
<font color="#FF0000">
<center><h2>Housing</h2></center>
<p>One of the more enjoyable aspects of the UO derived virtual worlds is the ability to have your own
place! The Lords of Empyria embraces this concept and while we continue to develop this, there is
plenty of room to place a purchased house and there are static houses to buy as well.</p></font>

<center><a href="#"onclick="return bla(0)">Add-Ons</a> ::
<a href="#"onclick="return bla(1)">Buying & Basics</a> ::
<a href="#"onclick="return bla(2)">Decorating</a> ::
<a href="#"onclick="return bla(3)">House Values</a> ::
<a href="#"onclick="return bla(4)">Mailboxes</a> ::
<a href="#"onclick="return bla(5)">Static Housing</a></center>
<div id="txt0" class="text">
<p>Once you place your house, you will want furniture and knick-knacks. About house addons: You can
unlock them if you want to move them around, put where you want, and lock them down again (after
theyve been placed). Also, in Britain at the Provisioners (and elsewhere) you will find an npc
called "Decorator". You can buy all sorts of neat things to dress up your house. There are 4
places to find cool stuff for your house: NPC Decorators, NPC Bakers, Player Carpenters and GMs.
The NPC decorators have a lot of items that can not be crafted by players like decorative weapon
racks, decorative shields, portraits, spider webs and more. The table below shows items that can
be obtained from other sources.</p>
<p>Farmers now carry seeds that will create plants. When you use a flower seed, youll be able to
choose from a few different types of flowers that you can plant. If you select a flower, a flower
of that type will appear locked down at your feet (using 1 house lockdown slot.)
<p>To removed a flower, unlock it like you would any other item ("I wish to lock this down", or "I wish
to release this".) You will not receive a flower seed back (after all, you ripped the plant up by the
roots. Its dead.)</p>
<p>When you use a flower seed (available from farmer NPCs), you now get a targeting cursor. If you target
yourself, youll plant the flowers where youre standing. If you target a pot or vase, youll plant the
flowers in that Sometimes looks pretty bad, sometimes looks pretty good. Youll just have to
experiment.) If you target anything else, youll cancel the planting. You now have to lock down the
vase where you want it. When you target the vase, the flowers will appear on top. If you target
yourself, the flowers will appear where you are standing.</p>
<table cellspacing="0" border="1" bgcolor="#999999">
<tr>
<td align="middle" width="20%">GM placed Stuff </td>
<td align="middle" width="20%">Carpenter Deeds </td>
<td align="middle" width="20%">Baker Deeds </td>
<td align="middle" width="20%">Blacksmith Deeds </td>
<td align="middle" width="20%">Bee Keeper </td>
</tr>
<tr>
<td>Fences (5K per tile) </td>
<td>Small Forge </td>
<td>Ovens </td>
<td>Outside lamp posts </td>
<td>New Beehives </td>
</tr>
<tr>
<td>Teleporters 1 </td>
<td>Anvil </td>
<td>Fire Place </td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Fighting Dummy </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Pick Pocket Dip </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Large Bed </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Small Bed </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Loom </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Spinning Wheel </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Grinding Mills </td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p>1 : Teleporters cost 10% of the house and are left to GM discretion. Not all houses need
teleporters. For example, the 150K tower would not need teleporters where some static houses
would need them to gain access to locations such as the roof (not available on all static
houses).</p>
</div>
<div id="txt1" class="text">
<p> LINK 2 222 SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. </p><p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text</p>
</div>
<div id="txt2" class="text">
<p> LINK 3333 SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. </p><p>SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text. SOme other huge text</p>
</div>
</body>

</html>
Magial
03-06-2004, 12:05 PM
Well that just about sums it up.

Thanks Kor for your help. Its appreciated. :)
Kor
03-06-2004, 12:20 PM
should I have known the lenght an complexity of your text I would indicate you this solution from the begining...:)
Magial
03-06-2004, 12:21 PM
Well I can honestly say, I understand that more than I do the javascript stuff you were telling me about heh.
Kor
03-06-2004, 12:25 PM
I see now

<a href="#"onclick="return bla(0)">

that return has no sense there

<a href="#"onclick="bla(0);return false">
is the correct

well, as your page is, that return false can be erased with no further consequences. But it has its role... the HTML # href will bring your page UP if the link is too below on page. To avoid that it is used return false, which will prevent that scrolling up. It is not your case, but I wanted you to know that
Magial
03-06-2004, 12:30 PM
Okay. I dont really have any links that are low so I dont think its a big worry for now.
--------

width: 60%;
background-color: #CCCCCC;
position:absolute;
top:200;
display:none

^ is that where you control the gray box? Just trying to get it centered and cant figure it. Seems right though.
Kor
03-06-2004, 12:42 PM
yes CSS attributes, not difficuld to center

try adding:

left:50%;
margin-left:-30%;

To CSS center an object

width:a_value_px_or_percent
left:50%;
margin-left:-half_of_the_width_value_px_or_percent
Magial
03-06-2004, 12:48 PM
Yea I figured it out like 3 minutes after I posted that... sorry.
shlagish
03-07-2004, 07:56 PM
All of the content in that page is centered...
Wouldn't adding

body { text-align: center; }

in the css work well?
Instead of using all those percentages and stuff

just my opinion