Bob Stone
asked on
Make mootools based slidy menu item stay open on new page.
I have a fancy sliding pic mootools based menu, the menu item will stay open when clicked on but not from page to page. The site uses Server Side Includes with the menu in the header file.
How do I fix this?
URL with SSI - http://wizard-enterprises.com/tabbed/index.shtml
URL w/o SSI - http://wizard-enterprises.com/tabbed/index2.htm
How do I fix this?
URL with SSI - http://wizard-enterprises.com/tabbed/index.shtml
URL w/o SSI - http://wizard-enterprises.com/tabbed/index2.htm
/* the script
var ImageMenu = new Class({
initialize: function(myElements,options){
options = Object.extend({
onClick: Class.empty,
start: -1,
openWidth: 0,
smallWidth: 0,
itemWidth: 0,
selected: -1,
open: -1,
transition: Fx.Transitions.quadOut
}, options || {});
this.myElements = myElements;
this.options = options;
options.itemWidth = myElements[0].getStyle('width').toInt();
options.smallWidth = Math.round(((options.itemWidth*myElements.length)-options.openWidth)/(myElements.length-1));
var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: options.transition});
myElements.each(function(el, i){
el.addEvent('mouseover', function(e){
e = new Event(e).stop();
el.show();
});
el.addEvent('click', function(e){
el.select();
});
el.addEvent('mouseout', function(e){
e = new Event(e).stop();
el.hide();
});
el.show = function(){
var obj = {};
obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
myElements.each(function(other, j){
if (other != el){
var w = other.getStyle('width').toInt();
if (w != options.smallWidth) obj[j] = {'width': [w, options.smallWidth]};
}
});
fx.start(obj);
};
el.hide = function(){
var obj = {};
if(options.selected == -1){
myElements.each(function(el,i){
obj[i] = {'width': [el.getStyle('width').toInt(), options.itemWidth]};
});
}else{
myElements.each(function(el,i){
if(i != options.selected){
var w = el.getStyle('width').toInt();
if(w != options.smallWidth){obj[i] = {'width': [w, options.smallWidth]}};
}else{
obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
}
});
}
fx.start(obj);
};
el.select = function(){
if(options.selected == i){options.selected = -1}else{options.selected = i}
options.onClick(options.selected,options.open);
options.open = options.selected;
};
});
if(options.start != -1){
myElements[options.start].show();
myElements[options.start].select();
}
},
reset: function(){
this.options.selected = -1;
this.options.open = -1;
this.myElements.each(function(el, i){
el.hide();
});
}
});
/* the html
<DIV id="kwick">
<UL class="kwicks">
<a href="index.shtml"><LI class="kwick opt1"><SPAN>Home </SPAN> </LI></a>
<a href="index.shtml"><LI class="kwick opt2"><SPAN>About Us </SPAN> </LI></a>
<a href="index.shtml"><LI class="kwick opt3"><SPAN>Portfolio </SPAN> </LI></a>
<a href="index.shtml"><LI class="kwick opt4"><SPAN>Templates </SPAN> </LI></a>
<a href="index.shtml"><LI class="kwick opt5"><SPAN>Demos </SPAN> </LI></a>
<a href="index.shtml"><LI class="kwick opt6"><SPAN>Tech Tips </SPAN> </LI></a>
<a href="contact.shtml"><LI class="kwick opt7"><SPAN>Contact Us </SPAN> </LI></a>
</UL>
</DIV><!-- kwick -->
<SCRIPT type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:220});
</SCRIPT>
/* the css
#kwick {
width: 1014px;
margin: 0 auto;
DISPLAY: block;
padding: 0 0 0 20px;
}
#kwick .kwicks {
MARGIN: 0px;
HEIGHT: 85px
}
#kwick LI {
FLOAT: left;
}
#kwick .kwick {
BORDER-RIGHT: #fff 2px solid;
DISPLAY: block;
BACKGROUND: #fff;
OVERFLOW: hidden;
WIDTH: 110px;
CURSOR: pointer;
HEIGHT: 75px;
}
#kwick .kwick SPAN {
color: #375880;
background: #fff;
font-weight: bold;
padding: 30px 5px 0 5px;
font-size: 15px;
border-top: 1px solid #92a5bc;
border-bottom: 1px solid #92a5bc;
border-right: 1px solid #92a5bc;
}
#kwick .opt1 {
BACKGROUND: url(../images/home.png);
}
#kwick .opt2 {
BACKGROUND: url(../images/about.png);
}
#kwick .opt3 {
BACKGROUND: url(../images/port.png);
}
#kwick .opt4 {
BACKGROUND: url(../images/templates.png);
}
#kwick .opt5 {
BACKGROUND: url(../images/demo.png);
}
#kwick .opt6 {
BACKGROUND: url(../images/tips.png);
}
#kwick .opt7 {
BACKGROUND: url(../images/contact.png);
BORDER-RIGHT-WIDTH: 0px;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.