Jump to content
xisto Community
Sign in to follow this  
Amezis

Expanding Link

Recommended Posts

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 :)

Share this post


Link to post
Share on other sites

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.

<script>function display(idx) {var text=new Array;text[1]="link 1 description";text[2]="link 2 description";if (document.all) document.all['linktext'].innerHTML=text[idx];else if (document.layers) document.layers['linktext'].innerHTML=text[idx];else document.getElementById('linktext').innerHTML=text[idx]; }</script><a href=# onclick="display(1);">link1</a><a href=# onclick="display(2);">link2</a><span id=linktext>Link Description</span>

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

<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!="100px")document.getElementById(divID).style.height="100px";else document.getElementById(divID).style.height="1px"; }else {if (eval(layer+"[divID]"+style).height!="100px") {eval(layer+"[divID]"+style).height="100px";eval(layer+"[divID]").innerHTML="<img src='picture.jpg'>Your description"; }  //added this lineelseeval(layer+"[divID]"+style).height="1px"; } }</script><a href=# onclick="expand('box1');">expand/collapse</a><div id="box1" style="height:1px;border:1px solid #000000;overflow:auto">Your description 1.</div><a href=# onclick="expand('box2');">expand/collapse</a><div id="box2" style="height:1px;border:1px solid #000000;overflow:auto">Your description 2.</div>

Share this post


Link to post
Share on other sites

it works for me. I only included the Internet Explorer code for the picture part. Did you copy it correctly? Also, the code only displays one picture. there are more modifications needed in order to get more pictures.seriously, if you know absolutely nothing about javascript it will be very hard to provide you with exactly what you need. I think you should learn so you can modify it to suit your needs. Otherwise, you will always be back with changes.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.