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

Link to comment

Share on other sites

prathapml

Link to comment

Share on other sites

XtremeMaC

Link to comment

Share on other sites

BizTalk

Link to comment

Share on other sites

XtremeMaC

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Activity

Browse