Wee... Another question: How can I make that clicking on a specific link expand to something? Well... Here's an example: I have a list with the 5 best sites: Site 1 {more info} site 2 {more info} etc. Clicking on {more info} for site 1, will show a description below the link, and now, site 2 will be below the description. I hope you understand my question

Reply

nope, not really. using what php? cause that i can help you with.
round

Reply

I don't know about any php coding, but I could try... Isn't there a html code for that? Like dropdown-menus?

Reply

Heh I found a good example... You can hide and show forums in trap17. I need something like that, but default is set as hide.

Reply

if i understand correctly, you are trying to offer more information in something like an information box when the user clicks the link.

you can do this in many different ways.

Javascript method.


modify the descriptions or add more depending on the number of links you want. example: text[3]="another description"; and so on.

the if statement is there so that your code will work for all popular browsers.

document.all = IE
document.layers = Netscape/Opera
document.getElementId = Firefox

when calling the display function, you pass the text number. In this case, when you pick display(1); you are asking to display text[1] or the message "link 1 description".

the message will show up in between the <span> tags. Whatever you put between the <span> tags will show up when the page is loaded.

 

 

 

Reply

Well, looks nice... I know there are other codes for this! post more... I will hand pick the code which is best Maybe plus in your reputation too

Reply

how about this script. I think this is closer to what you want.
Basically, you can create as many boxes as you like and put the descriptions in the boxes (DIV tags).

<script>
function expand(divID) {

var layer="document.all", style=".style";

if (document.all) layer="document.all";
else if (document.layers) { layer="document.layers"; style=""; }
else layer="dom";

if (layer=="dom") {
if (document.getElementById(divID).style.height!="1px")
document.getElementById(divID).style.height="1px";
else
document.getElementById(divID).style.height="100px"; }
else {
if (eval(layer+"[divID]"+style).height!="1px")
eval(layer+"[divID]"+style).height="1px";
else
eval(layer+"[divID]"+style).height="100px"; } }
</script>

<a href=# onclick="expand('box1');">expand/collapse</a>
<div id="box1" style="height:100px;border:1px solid #000000;overflow:auto">Your description 1.</div>
<a href=# onclick="expand('box2');">expand/collapse</a>
<div id="box2" style="height:100px;border:1px solid #000000;overflow:auto">Your description 2.</div>

I put expand/collapse there but you can make it look better by putting an up/down image there instead. You can also change the image to up or down depending on whether the box is expanded or collapsed.

Reply

Forgot the code tags. Oh well, no edit button.

Also want to note that it should work for all popular browsers like firefox, IE, netscape, opera. but i didn't test the code.

just copy it and save it as an html and run it in your browser to see the results.

Reply

Well, there is 2 things now.

Firstly: No9t9, could you make that default is HIDDEN, not shown.
Secondly: This is for a long list, with alot of images. So could you make it to load when you click on the "expand"-link, so the whole page don't take ages to load?

Reply

well first, to make it hidden you just switch the numbers on the height value. where you see 100px change it to 1px and where you see 1px change it to 100px. It's really easy. Do you have any idea how to program Javascript? You should learn if you are going to be developing webpages. That way you can edit code that you find to make it suitable for your needs.

As for loading the images after clicking the button, the logic is in the first example I made. You have to use the innerHTML property. the innerHTML property physically alters the HTML dynamically. In this case, I would change the contents of the box with the innerHTML property to <img src="picture.jpg"> that would load the image.

Reply