Hello,
I am new to javascript and i need some help. I have a expand and collapse menu all working just fine. I just need switchMenu boxes to be collapsed when the page loads. Here is my code that i have right now for the javscript part.

</style>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function switchMenu2(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>

I just want to function switchMenu to be collapsed by default not function switchMenu2. I am lost i cant find where i can have them collapsed on page load. I would really appriciate it if someone could help me out.

Thanks,
Tim!

have you tried body onload to call the function?

Hello,
No i havnt tried anything like that what do i need to put. You can see my source code www.Optical-Hosting.com the side bar is is where the javascript is. I am new to javascript and wanted to add some java to the side bar. Just let me know what i should put where and i can try it.

Thanks,
Tim!

<script type="text/javascript">
//This code courtesy of John Resig (http://ejohn.org/projects/flexible-javascript-events/)
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

function initBoxes(){
  //place here the call to initialise the boxes
}

addEvent(document, 'load', initBoxes);
</script>

Hello,
Ok i tried that code and did a few things but none of them worked. Like i said i really new to javascript. What exactly am i suppose to add/edit to the code you provided? I dont no what "//place here the call to initialise the boxes" consists of?

Thanks,
Tim!

I don't know...
What do you need to do to make them collapse ?
You have a javascript function for that already, right ?

I went to your page, but I didn't see any menu bar with collapsing elements, so I really don't know what should be put there.

I gave you the base where to place the javascript calls to be fired when the page finishes it's loading, but after that, it's up to you.

EDIT::
Ok, I looekd in the source and understood what you wanted to do...
You have to place what is in the "href=" of the links you want peoples to click to collapse / uncollapse the blocks.

function initBoxes(){
  //place here the call to initialise the boxes
  switchMenu('right_articles1');
  switchMenu('right_articles2');
  switchMenu('right_articles3');
  switchMenu2('right_articles4');
  switchMenu2('right_articles5');
  switchMenu2('right_articles6');
}

That should do it.

Hello,
The only java script i have is
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function switchMenu2(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>

thats all i have in the header of the page and where you click (EX. OperationsBase Client Login (Click Here) ) i have this

<a onClick="switchMenu('right_articles');" title="Switch the Menu"><h3>OperationsBase Client Login (Click Here)</h3></a>

I dont know if i have the option somwhere about having the box collapsed. If i do it must not be enabled because the boxes are open when the page loads. I just want it to where when you go to the page all you see is the OperationsBase Client Login (Click Here) and you have to click it to show the box that expands. I dont want it to where the box is showing/expanded when the page loads.

Thanks,
Tim!

Hello,
Ok i will try that real quick.

Thanks,
Tim!

Hello,
Here is my new code:

<script type="text/javascript">
//This code courtesy of John Resig (http://ejohn.org/projects/flexible-javascript-events/)
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
function initBoxes(){
//place here the call to initialise the boxes
switchMenu('right_articles');
switchMenu('right_articles2');
switchMenu('right_articles3');
}
addEvent(document, 'load', initBoxes);
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function switchMenu2(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>

The top three boxes still arent been collapsed on the page load for some reason. Anything i am doing wrong?

Thanks,
Tim!

ouch !!!
My bad, the line declaring the event was

addEvent(document, 'load', initBoxes);

but it should be

addEvent(window, 'load', initBoxes);

Hello,
GREAT i have been trying to get that to work for almost a day now. I have 2 more questions now that is fixed. I am very greatful for the help with that .

1) How can link the OperationsBase Client Login (Click Here) so that its like a ahref but it dosent go anywhere just brings the box down?

2) Is it possible with that code to make it to where on those top three boxes only one can be expanded at once. So if the top box is expanded and you click the next box down it closes the top box and opens next box down?

Thanks,
Tim!

1) Sure, but you'll need to alter your css for that. First, remove the <h3> tag that's inside your href, that's the reason why the links seems not usual.
Then, replace the links with:

<a href="javascript:switchMenu('right_articles');" title="Switch the Menu" class="handle">OperationsBase Client Login (Click Here)</a>

and add this in your css

.handle {
    background:#000000 url(corner.gif) no-repeat scroll right top;
    color:#FFFFFF;
    font-family:Tahoma,Arial,Sans-Serif;
    font-size:1em;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    line-height:normal;
    text-decoration:none!important;
    margin:0pt 0pt 3px;
    padding:7px 0pt 7px 5px;
}
a.handle:hover{
    text-decoration:underline!important;
    display: block;
}
a.handle{
    background:#000000 url(corner.gif) no-repeat scroll right top;
    color:#FFFFFF;
    display: block;
}

2) Not directly. The simple way of doing this is to create an intermediate function, in which you first set all boxes style.display="none", and then you switch the display of the desired box to the state it's wanted.

Hello,
1) Looks great i got it all set in the css and on the page. Thanks again so much!

2) You lost me at "create an intermediate function" I am still learning javascript as you can tell most of it looks like giberish :S. Do you know of a tutorial that could help accomplish what i was talking about? I hate bothering you with this because you done so much as it is but if you could help me find a tutorial or help me code what you said that would be AMAZING. Thanks again for the help you did already.

Thanks,
Tim!

I don't know any tutorial for this no, and it's not purely javascript, it's a concept.

function closeAll(){
  var aryBoxes=new Array ("right_articles1","right_articles2","right_articles3","right_articles4","right_articles5","right_articles6");
  for (var cpt=0;cpt<aryBoxes.length;cpt++){
    if(aryBoxes[cpt]!=_except){
      document.getElementById(aryBoxes[cpt]).style.display="none";
    }
  }
}

Then modify your functions that expand a box to call that function first:

function switchMenu(obj) {
  var el = document.getElementById(obj);
  closeAll();
  if ( el.style.display != "none" ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = '';
  }
}
function switchMenu2(obj) {
  var el = document.getElementById(obj);
  closeAll();
  if ( el.style.display != "none" ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = '';
  }
}

And voila, it should be enough.

Hello,
Here is the code i have:

<script type="text/javascript">
function closeAll(){
var aryBoxes=new Array ("right_articles","right_articles2","right_article s3");
for (var cpt=0;cpt<aryBoxes.length;cpt++){
if(aryBoxes[cpt]!=_except){
document.getElementById(aryBoxes[cpt]).style.display="none";
}
}
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
function initBoxes(){
switchMenu('right_articles');
switchMenu('right_articles2');
switchMenu('right_articles3');
}
addEvent(window, 'load', initBoxes);
function switchMenu(obj) {
var el = document.getElementById(obj);
closeAll();
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function switchMenu2(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>

For some reason it just expanded the top three again and i cant expand and collapse anymore. Did i do something wrong?

Thanks,
Tim!

There, I forgot junk in the function:

function closeAll(){
  var aryBoxes=new Array ("right_articles","right_articles2","right_articles3","right_articles4","right_articles5" );
    for (var cpt=0;cpt<aryBoxes.length;cpt++){
        try{
            var trg=document.getElementById(aryBoxes[cpt]);
            trg.style.display="none";
        }
        catch(err){
            alert(err);
        }
  }
}
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

function initBoxes(){
    closeAll();
}

addEvent(window, 'load', initBoxes);

function switchMenu(obj) {
  var el = document.getElementById(obj);
  closeAll();
  if ( el.style.display != "none" ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = 'block';
  }
}
function switchMenu2(obj) {
    var el = document.getElementById(obj);
    closeAll();
    if ( el.style.display != "none" ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = 'block';
    }
}

Hello,
Ok everything is officially perfect thanks alot! I really apprciate your time and help i would have never have done it by myself. www.Optical-Hosting.com tell me what you think thanks to tripy!

Thanks Again,
Tim!

:-)
You may want to clean up a bit your html, and maybe not use xhtml strict...

Result: 2 errors / 57 warnings

line 97 column 5 - Warning: <marquee> is not approved by W3C
line 100 column 6 - Warning: <div> isn't allowed in <h3> elements
line 101 column 20 - Warning: discarding unexpected </div>
line 99 column 1 - Warning: <style> isn't allowed in <div> elements
line 176 column 10 - Warning: <embed> is not approved by W3C
line 179 column 13 - Warning: replacing <p> by <br>
line 179 column 13 - Warning: inserting implicit <br>
line 179 column 13 - Warning: <br> element not empty or not closed
line 189 column 19 - Warning: discarding unexpected </input>
line 232 column 19 - Warning: discarding unexpected </input>
line 273 column 30 - Warning: <input> element not empty or not closed
line 318 column 21 - Warning: <input> isn't allowed in <table> elements
line 324 column 21 - Warning: <input> element not empty or not closed
line 318 column 21 - Warning: <input> isn't allowed in <table> elements
line 325 column 21 - Warning: <input> element not empty or not closed
line 318 column 21 - Warning: <input> isn't allowed in <table> elements
line 326 column 21 - Warning: <input> element not empty or not closed
line 333 column 19 - Warning: missing <tr>
line 336 column 25 - Error: discarding unexpected </form>
line 336 column 32 - Error: discarding unexpected </td>
line 316 column 8 - Warning: missing </form>
line 349 column 1 - Warning: <style> isn't allowed in <div> elements
line 361 column 55 - Warning: <br> element not empty or not closed
line 362 column 57 - Warning: <br> element not empty or not closed
line 367 column 55 - Warning: <br> element not empty or not closed
line 368 column 57 - Warning: <br> element not empty or not closed
line 373 column 57 - Warning: <br> element not empty or not closed
line 374 column 59 - Warning: <br> element not empty or not closed
line 385 column 135 - Warning: <img> element not empty or not closed
line 386 column 1 - Warning: missing </center>
line 384 column 28 - Warning: missing </center>
line 84 column 26 - Warning: <img> proprietary attribute value "absmiddle"
line 84 column 26 - Warning: <img> lacks "alt" attribute
line 133 column 76 - Warning: <img> lacks "alt" attribute
line 153 column 69 - Warning: <img> lacks "alt" attribute
line 160 column 30 - Warning: <img> lacks "alt" attribute
line 225 column 1 - Warning: <div> anchor "right" already defined
line 240 column 37 - Warning: <input> anchor "username" already defined
line 250 column 25 - Warning: <input> anchor "password" already defined
line 259 column 19 - Warning: <input> anchor "submit" already defined
line 268 column 1 - Warning: <div> anchor "right" already defined
line 283 column 37 - Warning: <input> anchor "username" already defined
line 293 column 25 - Warning: <input> anchor "password" already defined
line 302 column 19 - Warning: <input> anchor "submit" already defined
line 311 column 1 - Warning: <div> anchor "right" already defined
line 333 column 23 - Warning: <input> anchor "submit" already defined
line 349 column 1 - Warning: <div> anchor "right" already defined
line 170 column 6 - Warning: trimming empty <p>
line 186 column 6 - Warning: trimming empty <p>
line 219 column 17 - Warning: trimming empty <p>
line 229 column 6 - Warning: trimming empty <p>
line 262 column 17 - Warning: trimming empty <p>
line 272 column 6 - Warning: trimming empty <p>
line 305 column 17 - Warning: trimming empty <p>
line 316 column 5 - Warning: trimming empty <p>
line 338 column 21 - Warning: trimming empty <p>
line 341 column 17 - Warning: trimming empty <p>
line 344 column 17 - Warning: trimming empty <p>
line 386 column 1 - Warning: trimming empty <center>
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like HTML Proprietary

Otherwise, I found the bg music a bit irritating, after a while.
The colors are clean and don't have too much contrast, which I like.