Help upgrading sliding tabs to mootools 1.3

Hi All,

I am trying to upgrade the sliding tabs class to mootools 1.3 for a sit eI am developing.

Now there seems to be an issue with the change to method;

 // to change to a specific tab, call this, argument is the pane element you want to switch to.
    changeTo: function(element, animate) {
      if ($type(element) == 'number') {element = this.panes[element - 1];};
      if (!$defined(animate)) {animate = true;};
      var event = { cancel: false, target: $(element), animateChange: animate };
      this.fireEvent('change', event);
      if (event.cancel == true) { return; };
     
      if (this.buttons) { this.buttons[this.current].removeClass(this.options.activeButtonClass); };
      this.current = this.panes.indexOf($(event.target));
      if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); };
     
      this.fx.cancel();
      if (event.animateChange) {
       this.fx.toElement(event.target);
      } else {
        this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
      };
     
         //if (this.options.animateHeight);
        //this.heightFX.set({
        //height:this.panes[this.current].offsetHeight,
        //});
       
          if (this.options.animateHeight){
        this.heightFx.tween('height',this.panes[this.current].offsetHeight);
       };
    },

it seems to be randomly ignoring some transitions?

any ideas whats going on. A live example can be seen here http://dev.mfitonline.co.uk

thanks in advance guys.

Matt
flynnyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

soujanya_gCommented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
flynnyAuthor Commented:
ok? thanks for the link, but I just want to debug the above code as its is almost working?

From further testing it seems to be firing the transistion every other click?

is this a bug in mootools?
flynnyAuthor Commented:
if it helps here is the whole code for the sliding class

 1var SlidingTabs = new Class({
2 Implements: [Options,Events],
3 options: {
4 startingSlide: false, // sets the slide to start on, either an element or an id
5 activeButtonClass: 'active', // class to add to selected button
6 activationEvent: 'click', // you can set this to ÔmouseoverÕ or whatever you like
7 wrap: true, // calls to previous() and next() should wrap around?
8 slideEffect: { // options for effect used to animate the sliding, see Fx.Base in mootools docs
9 duration: 400 // 0.4 of a second
10 },
11 animateHeight: true, // animate height of container
12 rightOversized: 0 // how much of the next pane to show to the right of the current pane
13 },
14 current: null, // zero based current pane number, read only
15 buttons: false,
16 outerSlidesBox: null,
17 innerSlidesBox: null,
18 panes: null,
19 fx: null, // this one animates the scrolling inside
20 heightFx: null, // this one animates the height
21
22
23 initialize: function(buttonContainer, slideContainer, options) {
24 if (buttonContainer) { this.buttons = $(buttonContainer).getChildren(); };
25 this.outerSlidesBox = $(slideContainer);
26 this.innerSlidesBox = this.outerSlidesBox.getFirst();
27 this.panes = this.innerSlidesBox.getChildren();
28
29 this.setOptions(options);
30
31 this.fx = new Fx.Scroll(this.outerSlidesBox, this.options.slideEffect);
32 this.heightFx = this.outerSlidesBox.set('height', this.options.slideEffect);
33
34 // set up button highlight
35 this.current = this.options.startingSlide ? this.panes.indexOf($(this.options.startingSlide)) : 0;
36 if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); };
37
38 // add needed stylings
39 this.outerSlidesBox.setStyle('overflow', 'hidden');
40 this.panes.each(function(pane, index) {
41 pane.setStyles({
42 'float': 'left',
43 'overflow': 'hidden'
44 });
45 }.bind(this));
46
47 // stupidness to make IE work - it boggles the mind why this has any effect
48 // maybe it's something to do with giving it layout?
49 this.innerSlidesBox.setStyle('float', 'left');
50
51 if (this.options.startingSlide) {this.fx.toElement(this.options.startingSlide);};
52
53 // add events to the buttons
54 if (this.buttons) this.buttons.each( function(button) {
55 button.addEvent(this.options.activationEvent, this.buttonEventHandler.bindWithEvent(this, button));
56 }.bind(this));
57
58 if (this.options.animateHeight){
59 this.heightFx.tween('height',this.panes[this.current].offsetHeight);
60 };
61
62 // set up all the right widths inside the panes
63 this.recalcWidths();
64 },
65
66 // to change to a specific tab, call this, argument is the pane element you want to switch to.
67 changeTo: function(element, animate) {
68 if ($type(element) == 'number') {
69 element = this.panes[element - 1];
70 };
71 if (!$defined(animate)) {
72 animate = true;
73 };
74
75 var event = { cancel: false, target: $(element), animateChange: animate };
76
77 this.fireEvent('change', event);
78
79 if (event.cancel == true) {
80 return;
81 };
82
83 if (this.buttons) {
84 this.buttons[this.current].removeClass(this.options.activeButtonClass);
85 };
86
87 this.current = this.panes.indexOf($(event.target));
88
89 if (this.buttons) {
90 this.buttons[this.current].addClass(this.options.activeButtonClass);
91 };
92
93 this.fx.cancel();
94 if (event.animateChange) {
95 this.fx.toElement(event.target);
96 } else {
97 this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
98 };
99
100 //if (this.options.animateHeight);
101 //this.heightFX.set({
102 //height:this.panes[this.current].offsetHeight,
103 //});
104
105 if (this.options.animateHeight){
106 this.heightFx.tween('height', this.panes[this.current].offsetHeight);
107 };
108 },
109
110
111 // Handles a click
112 buttonEventHandler: function(event, button) {
113 if (event.target == this.buttons[this.current]) {return;};
114 this.changeTo(this.panes[this.buttons.indexOf($(button))]);
115 },
116
117 // call this to go to the next tab
118 next: function() {
119 var next = this.current + 1;
120 if (next == this.panes.length) {
121 if (this.options.wrap == true) { next = 0 } else { return };
122 };
123
124 this.changeTo(this.panes[next]);
125 },
126
127 // to go to the previous tab
128 previous: function() {
129 var prev = this.current - 1
130 if (prev < 0) {
131 if (this.options.wrap == true) { prev = this.panes.length - 1 } else { return };
132 };
133
134 this.changeTo(this.panes[prev]);
135 },
136
137 // call this if the width of the sliding tabs container changes to get everything in line again
138 recalcWidths: function() {
139 this.panes.each(function(pane, index) {
140 pane.setStyle('width', this.outerSlidesBox.offsetWidth.toInt() - this.options.rightOversized + 'px');
141 }.bind(this));
142
143 this.innerSlidesBox.setStyle(
144 'width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length) + 'px'
145 );
146
147 // fix positioning
148 if (this.current > 0) {
149 this.fx.cancel();
150 this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
151 };
152 }
153 });
FORCEDTOCREATETHISUSERNAMECommented:
This is a joke! There is no solution here.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.