Welcome to WebmasterWorld Guest from 3.227.233.6

Forum Moderators: open

Message Too Old, No Replies

Mootools based Vertical Accordion Menu

Help with javascript for beginner

     
7:37 pm on May 7, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts: 14
votes: 0


I am new to javascript and do not know much about it. I have tried to add the byslidemenu to my page but I am unable to make it work. The head of the page I am using is :
<script type="text/javascript" src="js/mootools1-2-2.js">
</script>
<script type="text/javascript" src="js/byslidemenu1-1.js">
</script>
<script type="text/javascript">
window.addEvent('domready', function(){
var verticalmenu = new BySlideMenu('verticalmenu', {
vertical: true,
expandMode: 'click',
pinMode: 'click',
elementWidth: 450
});
$('verticalmenu').getElements('li').setStyle('width', 450); // new width must be the above "elementWidth" - (left + right padding)
});
</script>

The open source also says I need to use these modules:
* Element.Dimensions
* Element.Event
* Fx.Tween
* Fx.Transitions
I cannot find them to begin to use them.

I dont know what else to show anyone to help with this problem. If anyone can help I will supply any information needed.

Thanks

11:06 pm on May 7, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


Welcome to WebmasterWorld, nugg79!

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

12:18 am on May 8, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts: 14
votes: 0


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]

3:46 pm on May 8, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


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).

3:22 pm on May 11, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts:14
votes: 0


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.
7:17 pm on May 19, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts:14
votes: 0


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]

9:51 pm on May 23, 2009 (gmt 0)

New User

10+ Year Member

joined:May 23, 2009
posts:2
votes: 0


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]

12:13 am on May 24, 2009 (gmt 0)

New User

10+ Year Member

joined:May 23, 2009
posts:2
votes: 0


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.