how to open a link in a box?

**XtremeMaC** · September 16, 2004

Hi there

I know the title sounds funny but I don't know how to express it easily

here's what I'm trying to accomplish.

this is going to be in a web page:

so there are going to be bunch of links and when the user clicks on 1 of them a box underneath it will appear, and all the links below it will be scrolling down.

now how can I accomplish this?

I also would like to be able to define the size of the box...

Thanks

**prathapml** · September 16, 2004

I've seen java-script code do this.

But this is just a pointer....

Don't ask me how its done - I let my webpage-coding apps do it for me!

**XtremeMaC** · September 17, 2004

I know its javascript but I don't know how to find it

or what to seach for in google??

do u have any page u've bookmarked that might be using it?

Thanks!!!! ow which webpage coding do u use? that does this? thanks 2x

**BizTalk** · September 17, 2004

add this to your head

/***********************************************

*

***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)

var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){

document.write('<style type="text/css">')

document.write('.switchcontent{display:none;}')

document.write('</style>')

}

function getElementbyClass(classname){

ccollect=new Array()

var inc=0

var alltags=document.all? document.all : document.getElementsByTagName("*")

for (i=0; i<alltags.length; i++){

if (alltags.className==classname)

ccollect[inc++]=alltags

}

function contractcontent(omit){

var inc=0

while (ccollect[inc]){

if (ccollect[inc].id!=omit)

ccollect[inc].style.display="none"

inc++

}

function expandcontent(cid){

if (typeof ccollect!="undefined"){

if (collapseprevious=="yes")

contractcontent(cid)

document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"

}

function revivecontent(){

contractcontent("omitnothing")

selectedItem=getselectedItem()

selectedComponents=selectedItem.split("|")

for (i=0; i<selectedComponents.length-1; i++)

document.getElementById(selectedComponents).style.display="block"

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

return returnvalue;

}

function getselectedItem(){

if (get_cookie(window.location.pathname) != ""){

selectedItem=get_cookie(window.location.pathname)

return selectedItem

}

else

return ""

}

function saveswitchstate(){

var inc=0, selectedItem=""

while (ccollect[inc]){

if (ccollect[inc].style.display=="block")

selectedItem+=ccollect[inc].id+"|"

inc++

}

document.cookie=window.location.pathname+"="+selectedItem

}

function do_onload(){

getElementbyClass("switchcontent")

if (enablepersist=="on" && typeof ccollect!="undefined")

revivecontent()

}

if (window.addEventListener)

window.addEventListener("load", do_onload, false)

else if (window.attachEvent)

window.attachEvent("onload", do_onload)

else if (document.getElementById)

window.onload=do_onload

if (enablepersist=="on" && document.getElementById)

window.onunload=saveswitchstate

</script>

Finally, insert the below example HTML anywhere inside the <body> section of your page:

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript is good</h3>

<div id="sc1" class="switchcontent">

blah blah

</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Java & JavaScript</h3>

<div id="sc2" class="switchcontent">

Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.

</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>

<div id="sc3" class="switchcontent">

DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.

</div>

**XtremeMaC** · September 17, 2004

OMG I love u

Thank U so much!!!

Sign In

how to open a link in a box?

Recommended Posts

XtremeMaC

prathapml

XtremeMaC

BizTalk

XtremeMaC

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Activity

Browse