TabSwapper = Drop down menu instead of lists and ahrefs?

[tommyh...@googlemail.com]

Hey guys,

Just want to establish this before I go further with my question. I've
barely been working with mootools for 2 weeks now. So the answer to my
problem is probably going to super simple.

My colleague utilized your tabswapper with a calendar, so the month
changes based on the link selected. An example of this can be found at
http://www.sunloungederby.co.uk/index.php?substance=whats.

I've basically copied what he's written and hooked it up to a CMS so
the client can add their own events. My issue is that they want to use
drop down select menus instead of an array of links to be able to
change date.

I managed to arrange that, however the tabs only swap in Firefox. In
Chrome & IE, nothing happens at all.

I can't post the code I use right now as I'm not in the office, but
before I go back in tomorrow, has anyone any ideas to what would stop
this working in some browsers? With the regular links, all browsers
support these.

Thanks a lot in advance and thankyou for the fantastic script as
well.I'm really getting into mootools now, this is a great example of
how to harness its power!!!

Tom Harding :-)

[tommyh...@googlemail.com]

Me again,

I now have the code to post:

The mootools part -

if ($defined($('tab-content'))) {

new TabSwapper({
tabs: $$('#tab-content .monthSelect .monthOption'),
clickers: $$('#tab-content .monthSelect .monthOption'),
sections: $$('div.panelSet div.panel'),
smooth: true
});
}

The HTML part:
<div id="tab-content">

<select class="monthSelect" name="calendarContent">
<option value="11" class="monthOption">November</option>
<option value="12" class="monthOption">December</option>
<option value="13" class="monthOption">January&nbsp;2010</
option>
</select>
</div>

Thanks again :-)

[Aaron Newton]

Tabswapper attaches its logic to individual elements, specifically, it attaches a click event (also a mouseover/out event for highlighting). The options probably don't fire click events in IE and other browsers, so I'm not surprised. I would create my instance of TabSwapper, and then attach a change event to the select list that then calls the methods in tabswapper. something like this (this code won't work literally, just to illustrate the point:

var myTabs = new TabSwapper(...same options you have in your example already...);

$('tab-content').getElement('.monthSelect').addEvent('change', function(e) {

  //get the index of the select list and call myTabs.show(index);

});

--

You received this message because you are subscribed to the Google Groups "Clientcide" group.
To post to this group, send email to clien...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/clientside?hl=.

[tommyh...@googlemail.com]

Thankyou ever so much, Aaron.

After what felt like months of trying to work out what on earth was
going on, i finally sorted it out.

Thanks soooo much! :-)

On Nov 16, 7:16 pm, Aaron Newton <aa...@iminta.com> wrote:
> Tabswapper attaches its logic to individual elements, specifically, it
> attaches a click event (also a mouseover/out event for highlighting). The
> options probably don't fire click events in IE and other browsers, so I'm
> not surprised. I would create my instance of TabSwapper, and then attach a
> change event to the select list that then calls the methods in tabswapper.
> something like this (this code won't work literally, just to illustrate the
> point:
>
> var myTabs = new TabSwapper(...same options you have in your example
> already...);
>
> $('tab-content').getElement('.monthSelect').addEvent('change', function(e) {
>   //get the index of the select list and call myTabs.show(index);
>
> });
>

> On Mon, Nov 16, 2009 at 3:46 AM, tommyhard...@gmail.com <