javascript menu links don't do anything.

User 39678 Photo


Registered User
10 posts

Hello,
I'm trying to add an expanding menu to my page in VSD.
I add the following test javascript to my page using the add html function and when I preview or upload to my website it shows the menu table but none of the links, color changes etc. work. I've tried several different versions of Javascript menu codes and they all act the same. What am I missing???
(I just need simple expanding text that opens when a + is clicked)
I put the HEAD code under Edit\edit Header
and put the BODY code in the add html box Body
If I add the same code in a standard Coffeecup page it works fine.

HEADER-----------

<!-- COLLAPSIBLE MENU - II -->
<!-- This goes into the HEAD of the html file -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2007, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
document.writeln('<style type="text/css">')
document.writeln('.main {text-decoration:none; color:blue; cursor:hand; cursor:pointer}')
document.writeln('span:hover.mainLink {text-decoration:underline; color:red}')
document.writeln('.sublinks1 {display:none; padding-left:14px}')
document.writeln('.link2 {text-decoration:none; color:blue}')
document.writeln('a:hover.link2 {text-decoration:underline; color:red}')
document.writeln('</style>') }

var mainNum = new Array("a1","a2","a3"); // at the left you should add a1, a2 etc. for each main link you wish to include
// so if you want 3 main links you should add a1, a2, a3 in the format shown
// enclosed in double quotes
var subNum1 = new Array("b1","b2"); // at the left you should add b1, b2 etc. for each sub link you wish to include
// under one main link, here the first main link. so if you want 4 sub links you
// should add b1, b2, b3, b4 in the format shown enclosed in double quotes
var subNum2 = new Array("c1","c2","c3"); // this is for sub links under the second main link. there are 3 sub links
// in the given example

function openClose(menuArray,theID) {
for(var i=0; i < menuArray.length; i++) {
if (menuArray[i] == theID) {
if (document.getElementById(theID).style.display == "block") {
document.getElementById(theID).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; }
else { document.getElementById(theID).style.display = "block";
document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
}
}
else { document.getElementById(menuArray[i]).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; }
}
}
// -->
</script>


BODY---------------

<table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid">
<tr><td bgcolor="#000000" style="font-family:arial, helvetica, sans-serif; font-weight:bold; color:white; font-size:12px">Collapsible Menu - II</td></tr>
<tr><td bgcolor="#ffff00" style="font-family:arial, helvetica, sans-serif; font-size:12px; color: blue; line-height: 19px">
<div onClick="openClose(mainNum,'a1')" class="main"><span id="tick_a1">+</span> <span class="mainLink">Computing Links</span></div>
<div id="a1" class="sublinks1">

<!-- below is an example of nested sub-links under the first main link. -->

<div onClick="openClose(subNum1,'b1')" class="main"><span id="tick_b1">+</span> <span class="mainLink">More Links</span></div>
<div id="b1" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br />
</div>

<div onClick="openClose(subNum1,'b2')" class="main"><span id="tick_b2">+</span> <span class="mainLink">Few More Links</span></div>
<div id="b2" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />-------------<br />
</div>

<!-- end of nested sub-links example. -->

<a href="http://www.microsoft.com/" class="link2">Microsoft Corp.</a><br />
<a href="http://home.netscape.com/" class="link2">Netscape Corp.</a><br />
<a href="http://www.macromedia.com" class="link2">Macromedia Inc.</a><br />
<a href="http://www.symantec.com" class="link2">Symantec Corp.</a><br />------------------------<br />
</div>

<div onClick="openClose(mainNum,'a2')" class="main"><span id="tick_a2">+</span> <span class="mainLink">JavaScript Links</span></div>
<div id="a2" class="sublinks1">

<!-- below is an example of nested sub-links under the second main link. -->

<div onClick="openClose(subNum2,'c1')" class="main"><span id="tick_c1">+</span> <span class="mainLink">More Links</span></div>
<div id="c1" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 3</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 4</a><br />-------------<br />
</div>

<div onClick="openClose(subNum2,'c2')" class="main"><span id="tick_c2">+</span> <span class="mainLink">Few More Links</span></div>
<div id="c2" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />-------------<br />
</div>

<div onClick="openClose(subNum2,'c3')" class="main"><span id="tick_c3">+</span> <span class="mainLink">Even More Links</span></div>
<div id="c3" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 3</a><br />-------------<br />
</div>

<!-- end of nested sub-links example. -->

<a href="http://www.sivamdesign.com/scripts/" class="link">The JS Page</a><br />
<a href="http://javascript.internet.com/" class="link2">JavaScript Source</a><br />
<a href="http://www.docjs.com/" class="link">Doc JavaScript</a><br />------------------------<br />
</div>

<div onClick="openClose(mainNum,'a3')" class="main"><span id="tick_a3">+</span> <span class="mainLink">PHP Links</span></div>
<div id="a3" class="sublinks1">
<a href="http://php.resourceindex.com/Complete_Scripts/" class="link2">PHP Res. Index</a><br />
<a href="http://px.sklar.com/" class="link2">PHP Code Excng.</a><br />------------------------<br />
</div>

<div>
<a href="#" class="link">Another Link 1</a><br />
<a href="#" class="link">Another Link 2</a><br />
<a href="#" class="link">Another Link 3</a><br />
</div>
</td></tr>
</table>

<!-- Each collapsible link has 2 DIV tags, one is the main link that opens or closes the
collapsible links and the other is for the collapsible links. In the first DIV tag the
text [onClick="openClose(mainNum,'a1')" class="main"] should not be changed and in the second DIV tag
the text [id="a1" class="sublinks"] is required. As you add more collapsible links the identifier
'a1' should be incremented for all new links in both DIV tags, for example a2 for link 2, a3 for
link 3 etc. Also for each collapsible link there is a SPAN tag that changes the + sign to - when
the menu is expanded. For each SPAN tag also there is text (id="tick_a1"). This identifier
also needs to be changed by matching the identifier 'a1' to the DIV identifier.

Each group of sub-links under each main link also should have text [openClose(subNum1,'b1')"
class="main"]. The text [subNum1] should also be incremented with each main link. For
example for the main link a1, the sub-links should be [subNum1,'b1'], [subNum1,'b2'] etc.
and for main link a2, the sub-link should be [subNum2,'c1'], [subNum2,'c2'] etc.

Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in
your documents. -->
User 271657 Photo


Senior Advisor
3,816 posts

Is the site live or are you previewing it? It might need to be live to for the script to work.
If live, can you post a link to the site?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 39678 Photo


Registered User
10 posts

I made it live so you could see it.
http://renoperinatal.com/prenatal_screening.html

There are javascripts being used on the main page to run a sidebar menu.
I suppose there could be a conflict.
I know just enough about coding to be dangerous :-)
tx
Dan
User 39678 Photo


Registered User
10 posts

Even this much simpler script doesn't work, it is on the website now:
http://renoperinatal.com/prenatal_screening.html

HEAD----
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>

BODY---------
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><b>1] Item 1 test:</b></div>
<div id="a1" class="texter">
Item 1 text.<br /><br />
</div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><b>2] Item 2 test:</b></div>
<div id="a2" class="texter">
Item 2 text.<br /><br />
</div>
User 187934 Photo


Senior Advisor
18,388 posts
Online Now

Place this in the head of your html box holding your script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Directly above this line.
<script language="JavaScript" type="text/javascript">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 39678 Photo


Registered User
10 posts

Thank you that did the trick!! I've spent hours and none of the pages I looked at showed a similar line.
One other small issue, How do I make the other text move down when I open the new text box?
right now it just overwrites it.
Thanks again,
Dan
User 187934 Photo


Senior Advisor
18,388 posts
Online Now

Add another textbox.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Senior Advisor
3,816 posts

I've spent hours and none of the pages I looked at showed a similar line.

For scripts to run, they have to be able to access the JS/Jquery code. The line above lets you access that code without having to install it on your site.
Not sure what you're describing here?
One other small issue, How do I make the other text move down when I open the new text box?
right now it just overwrites it.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 39678 Photo


Registered User
10 posts

If you look at the running example on the website:
http://renoperinatal.com/prenatal_screening.html

The text I'm adding with the html code doesn't affect the main page text so the new text box just overwrites what's there.
I suppose I could do the entire section with the html box but it seems there should be a better way.

Thank you
User 187934 Photo


Senior Advisor
18,388 posts
Online Now

I guess I don't understand what your trying to achieve. Use the text tool in VSD and click on your page to add another text box. Then you can drag them around where you need them. If you wan to alter an existing one dbl click on that and make the alterations.:)
Edit: Use the send to back and bring to front tools to set the Item1 and I tem2 text on top of the other textbox so you javascript will work.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.