Welcome to WebmasterWorld, nugg79!

What happens when you load your page? Are there javascript errors or does it simply not do anything?

It doesnt do anything. its at <snip> Take out spaces and periods where neccessary. Im sorry if I broke a rule about websites but I dont think I will get it solved without seeing the site.
Thanks

[edited by: whoisgregg at 3:32 pm (utc) on May 8, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] [/edit]

It often seems like it can be impossible to troubleshoot without linking to the actual page, but we manage to do a pretty good job in most instances. :)

In this case, I would recommend first making sure that the window.addEvent('domready', function(){ bit is working like you expect it to. Replace the entire block there with a simple:

 window.addEvent('domready', function(){
alert('domready fired');
}); 

If that alert doesn't work, then there's a problem with the actual mootools install. If it does work, the problem is related to the BySlideMenu file or how it's being accessed. Looking at the code you've posted, I don't see any syntax errors.

Have you made any edits to the mootools or the byslidemenu javascript files? If so, it might help to see the sections you've edited. If you've made extensive changes, you may want to upload a "fresh" version of each to see if that fixes the problem. If it does, then you know where to look for the error. :)

I'd also highly recommend checking the page in Firefox and installing something like Firebug to aid in debugging (otherwise you have to check the error console manually to see javascript problems).

I tried applying the changes as you requested. I did receive an error as the page loaded. I will redownload the files and let you know.

I have basically started over with this menu. I have gotten it to work with FF 3 and Safari 4. I am receiving an error in firebug stating: container is null on line 54 of the byslidemenu.js. I believe this is causing a problem with the viewing in IE7 and 8. The code follows:

HTML
<!-- Vertical Menu -->
<div class="vertical" id="verticaltextmenu">
<div class="bg1 first">
<h5><a href="http://www.example.com/companion.html">Example Animal <br /> Whole</a></h5>
<p align="justify">A high resolution direct radiography system.</p>
</div>
<div class="bg2">

<h5><a href="http://www.example.com/digitaldental.html">Example Animal <br />Digital</a></h5>
<p align="justify">Digital radiography for the dental world.</p>
</div>
<div class="bg1">
<h5><a href="http://www.example.com/digitalview.html">Example View Boxes</a></h5>
<p align="justify">The next-generation in medical imaging.</p>
</div>

<div class="bg2">
<h5><a href="http://www.example.com">example</a></h5>
<p align="justify"> Online backup made simple.</p>
</div>

<div class="bg1">
<h5><a href="http://www.example.com/whitecap.html">Example Software</a></h5>
<p align="left"> Simple Software for powerful Technology.</p>
</div>
</div>
<!-- End of Vertical Menu -->

js in head

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/byslidemenu.js"></script>
<script type="text/javascript">
var verticaltextmenu;
window.addEvent('load', function(){

verticaltextmenu = new BySlideMenu('verticaltextmenu', {
defaultIndex: 1,
vertical: true,
elementHeight: 130,
elementWidth: 200,
compressSize: 30,
useOverflow: true
});
var pinovermenu = new BySlideMenu('pinovermenu', {pinMode: 'mouseover'});
});
</script>

js from byslidemenu.js

var BySlideMenu = new Class({
Implements: Options,

options: {
defaultIndex: false,
expandMode: 'mouseover',
pinMode: false,
vertical: false,
compressSize: 40,
elementWidth: 320,
elementHeight: 240,
autoSize: true,
duration: 500,
transition: 'linear',
containerWidth: null,
containerHeight: null,
useOverflow: false
},

initialize: function(containerId, options){
this.setOptions(options);
this.elementsId = [];
this.containerId = $pick(containerId, 'byslidemenu');

var container = $(this.containerId);

container.addEvent('mouseleave', function(){
this.resetAll();
}.bind(this));

var elements = container.getChildren();
var num = elements.length;

var imgHeight = null, imgWidth = null;
if(this.options.autoSize)
{
var firstImg = elements[0].getElement('img');

if(firstImg)
{
imgHeight = firstImg.getHeight();
imgWidth = firstImg.getWidth();
}
}

var offsetWidth =
elements[0].getStyle('padding-left').toInt()
+ elements[0].getStyle('padding-right').toInt()
+ elements[0].getStyle('border-left-width').toInt()
+ elements[0].getStyle('border-right-width').toInt();
var offsetHeight =
elements[0].getStyle('padding-top').toInt()
+ elements[0].getStyle('padding-bottom').toInt()
+ elements[0].getStyle('border-top-width').toInt()
+ elements[0].getStyle('border-bottom-width').toInt();

if(this.options.vertical)
{
this.posAttr = 'top';
var containerWidth = $pick(imgWidth, this.options.containerWidth, this.options.elementWidth);
if(containerWidth == "full")
containerWidth = container.getParent().getStyle('width').toInt();
if(this.options.containerHeight)
{
if(this.options.containerWidth == 'full')
var containerHeight = container.getParent().getStyle('height').toInt();
else
var containerHeight = this.options.containerHeight;

this.openSize = containerHeight - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgHeight, this.options.elementHeight);
var containerHeight = this.openSize + ((num - 1) * this.options.compressSize);
}

this.closeSize = containerHeight / num;

var elementHeight = this.openSize;
var elementWidth = containerWidth;
}
else
{
this.posAttr = 'left';
var containerHeight = $pick(imgHeight, this.options.containerHeight, this.options.elementHeight);
if(containerHeight == "full")
containerHeight = container.getParent().getStyle('height').toInt();
if(this.options.containerWidth)
{
if(this.options.containerWidth == 'full')
var containerWidth = container.getParent().getStyle('width').toInt();
else
var containerWidth = this.options.containerWidth;

this.openSize = containerWidth - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgWidth, this.options.elementWidth);
var containerWidth = this.openSize + ((num - 1) * this.options.compressSize);
}
this.closeSize = containerWidth / num;

var elementHeight = containerHeight;
var elementWidth = this.openSize;
}

container.setStyles({
padding: 0,
position: 'relative',
overflow: 'hidden',
width: containerWidth,
height: containerHeight
});

var id = 0;

elements.each(function(element){
var beforePos = id * this.options.compressSize;
var afterPos = this.openSize + ((id - 1) * this.options.compressSize);
var closePos = id * this.closeSize;
element.setStyles({
position: 'absolute',
height: elementHeight - offsetHeight,
width: elementWidth - offsetWidth
});
element.setStyle(this.posAttr, closePos);
element.set('tween', {
duration: this.options.duration,
transition: this.options.transition
});

id++;

element.set('id', this.containerId + '_Elm' + id);
element.store('id', id);

element.store('beforePos', beforePos);
element.store('afterPos', afterPos);
element.store('closePos', closePos);

this.elementsId.include(id);

if([this.options.pinMode, this.options.expandMode].contains('mouseover'))
{
element.addEvent('mouseenter', function(element){
if(this.options.expandMode == 'mouseover')
this.expand(element, this.options.pinMode == 'mouseover');
}.bind(this, element));
}

if(this.options.pinMode ¦¦ this.options.expandMode == 'click')
{
element.addEvent('click', function(element){
if(this.options.defaultIndex == element.retrieve('id'))
{
this.options.defaultIndex = 0;
this.resetAll();
}
else if(this.options.expandMode == 'click')
this.expand(element, this.options.pinMode == 'click');
else
this.options.defaultIndex = element.retrieve('id');
}.bind(this, element));
}

}, this);

if(this.options.defaultIndex)
this.expand(this.options.defaultIndex, false, true);
},

expand: function(element, setDefault, noAnim){
if($type(element) == 'number')
element = $(this.containerId + '_Elm' + element);

if(this.options.useOverflow)
this.clearOverflow();

var currentId = element.retrieve('id');

if(this.options.useOverflow)
this.switchOverflowTimer = this.switchOverflow.delay(this.options.duration, this, element);

if(setDefault)
this.options.defaultIndex = currentId;

this.elementsId.each(function(elementId){
var elm = $(this.containerId + '_Elm' + elementId);
if(elementId > currentId)
this.compressAfter(elm, noAnim);
else
this.compressBefore(elm, noAnim);
}, this);
},

switchOverflow: function(element){
element.setStyle('overflow', 'auto');
},

clearOverflow: function(){
$clear(this.switchOverflowTimer);
$(this.containerId).getChildren().setStyle('overflow', '');
},

compressBefore: function(element, noAnim){
var pos = element.retrieve('beforePos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});

if(noAnim)
tween.set(pos);
else
tween.start(pos);
},

compressAfter: function(element, noAnim){
var pos = element.retrieve('afterPos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});
if(noAnim)
tween.set(pos);
else
tween.start(pos);
},

reset: function(element){
var pos = element.retrieve('closePos');
element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}).start(pos);
},

resetAll: function(){
if(this.options.useOverflow)
this.clearOverflow();

if(this.options.defaultIndex)
this.expand(this.options.defaultIndex);
else
{
this.elementsId.each(function(elementId){
this.reset($(this.containerId + '_Elm' + elementId));
}, this);
}
}
});

[edited by: whoisgregg at 6:20 pm (utc) on May 26, 2009]
[edit reason] Removed specifics, please use "example.com" Thanks! :) [/edit]

I have the same problem.
My BySlideMenu works on FF but it doesn't on IE. It seems werid because I can see the demo from the website just fine. There must be something missing or extra on my website that is preventing it to start. I checked and the ByslideScript.js runs. So it must be some bug along the code. I haven't changed neither the mootools or the BySlideMenu files. I am fairly new at javascript and I am getting overwhelmed in checking the code. But will keep trying out. I have my presite loaded at:
<snip>
I check at the line 54 that Nugg found on firebug and it seems to work fine.
If anyone has any ideas to see where the problem is, I would appreciate it. There has to be something fixable in my html code because the js work just fine in the demo.

Thank you
Dario

[edited by: tedster at 6:02 pm (utc) on May 26, 2009]
[edit reason] no links to personal sites, please [/edit]

I found the problem in my case. I am not sure if it's the same thing for you Nugg. Mine was a simple noob mistake. I got my menu inside a <table> and inside the <tr> but not inside a <td>. Apparently IE doesn't like that. I add the <td> and it worked just fine. Hope is the same for you so you are able to fix it easily.