search

loukmanebabakhalil / prototype-carousel

Automatically exported from code.google.com/p/prototype-carousel
0 stars 0 forks source link

add selectedClassName to triggering element as it was in prev version #2

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
Hello, very nice script!

I have a feature request/or backward compatibility complain ;)

Is it possible an option to be added so that the triggering element to
receive the class in selectedClassName when the 'auto' option is set to
true as it was in previous version. Now the class is added only when you
click a jumper link.

I tried to implement it somehow in beforeMove/afterMove but failed.
Any hints on this? If you have an idea how could it be done I could provide
a patch :)

Original issue reported on code.google.com by matix...@gmail.com on 21 May 2009 at 11:31

GoogleCodeExporter commented 8 years ago 
I think this is related to what I'm trying to accomplish. I'd like to be able to
apply the selectedClassName to a tab when clicking the prev or next buttons. 
Thank you!

Original comment by crai...@gmail.com on 2 Jun 2009 at 8:47

GoogleCodeExporter commented 8 years ago 
OK, here's how I did it by defining the following afterMove callback, hope it 
helps
someone else:

var crsl = new Carousel(...
  {
    afterMove: function(){
      crsl.controls.each(function (elm) {
        elm.removeClassName(crsl.options.selectedClassName);
      });
      crsl.controls.each(function (elm) {
        if (elm.rel == crsl.current.id) {
          elm.addClassName(crsl.options.selectedClassName);
        }
      });
    }
  }

Original comment by matix...@gmail.com on 3 Jun 2009 at 9:35

GoogleCodeExporter commented 8 years ago 
Hello, thanks to Matix.bg for your tip which completes this usefull script :)

Original comment by pixelpo...@gmail.com on 6 Jul 2009 at 1:35

GoogleCodeExporter commented 8 years ago 
just add this to the MoveTo function

I assigned IDs to all my jumpers (nav links)

if($(this.previous.id+"-control").hasClassName(this.options.selectedClassName))
    $(this.previous.id+"-control").removeClassName(this.options.selectedClassName);
$(this.current.id+"-control").addClassName(this.options.selectedClassName);

Original comment by dod...@gmail.com on 27 Jul 2009 at 6:28

GoogleCodeExporter commented 8 years ago 
Hello Dodeja,
Where exactly do you put this code in the js file ? I've tried several places 
without
success.

Thanks for your help.

Original comment by jiseg...@gmail.com on 28 Aug 2009 at 5:17

GoogleCodeExporter commented 8 years ago 
kudos to matix.bg , worked flawlessly.

Original comment by jaysw...@gmail.com on 17 Sep 2009 at 3:41

GoogleCodeExporter commented 8 years ago 
Matix.bg, where should I copy your afterMove callback to?

Original comment by guilherm...@gmail.com on 21 Oct 2009 at 5:16

GoogleCodeExporter commented 8 years ago 
In your source code of course :)
The example code I've posted clearly states this - it's the place where you 
create
your carousel.. I don't know how to say it other words. It's just there - where 
you
say new Carousel({blablabla})

Original comment by matix...@gmail.com on 21 Oct 2009 at 5:27

GoogleCodeExporter commented 8 years ago 
Couldn't make it work. Here's the link to my page 
http://www.spiritlevelfilm.com/.
Help please?

Original comment by guilherm...@gmail.com on 30 Nov 2009 at 2:37

GoogleCodeExporter commented 8 years ago 
Matix.bg, thank you so much for your tip, works flawlessly.

Original comment by b...@jealousrepublic.com on 3 Dec 2009 at 7:47

GoogleCodeExporter commented 8 years ago 
Hi Folks, I also had the need to do the same thing. Thanks Matix for providing 
the code. It took me a little while to figure where to put it but I figured it 
out. I also put the entire call into an "Event.onDOMReady" and stuck the whole 
thing in the <HEAD> tag (we have a business requirement for not putting any 
Javascript code of this type in the <BODY>).

Here is my full command in case anyone else needs the context:

<script type="text/javascript">
Event.onDOMReady(function(){
var crsl = new Carousel('carousel-wrapper', /* wrapper section */
          $$('#carousel-content .slide'),   /* slides section */
          $$('a.carousel-control', 'a.carousel-jumper'), /* triggers section */
          { /* BEGIN: options section */
            duration: 0.4, 
            circular: true,
            afterMove: function(){
              crsl.controls.each(function (elm) {
                elm.removeClassName(crsl.options.selectedClassName);
              });
              crsl.controls.each(function (elm) {
                if (elm.rel == crsl.current.id) {
                  elm.addClassName(crsl.options.selectedClassName);
                }
              });
            }
          } /* END: options section */
        ); // END: new Carousel
}); // END: Event.onDOMReay
</script>

Original comment by tiren...@gmail.com on 28 Sep 2010 at 12:09

GoogleCodeExporter commented 8 years ago 
You really only need two changes to the carousel.js module to restore this 
functionality. Currently the code to update which control has selectedClassName 
only appears in the click event handler. Just take it out from there and place 
it in the moveTo function, which handles all slide changes (whether auto, 
wheel, next/prev, or jump initiated).

        click : function (event) {
            this.stop();

            var element = event.findElement('a');

            if (!element.hasClassName(this.options.disabledClassName)) {
                if (element.hasClassName(this.options.controlClassName)) {
                    eval("this." + element.rel + "()");
                } else if (element.hasClassName(this.options.jumperClassName)) {
                    this.moveTo(element.rel);
                    /*BOF MOD ---- Always Update Jumpers with selectedClassName ----
                    if (this.options.selectedClassName) {
                    this.controls.invoke('removeClassName', this.options.selectedClassName);
                    element.addClassName(this.options.selectedClassName);
                    }
                    EOF MOD ---- Always Update Jumpers with selectedClassName ---- */
                }
            }

            this.deactivateControls();

            event.stop();
        },

        moveTo : function (element) {
            if (this.options.beforeMove && (typeof this.options.beforeMove == 'function')) {
                this.options.beforeMove();
            }

            this.previous = this.current ? this.current : this.slides[0];
            this.current = $(element);

            //BOF MOD ---- Always Update Jumpers with selectedClassName ----
            if ((this.options.selectedClassName)&&(this.controls)) {
                this.controls.invoke('removeClassName', this.options.selectedClassName);
                var jumper = Selector.matchElements(this.controls, '[rel="' + this.current.id + '"]')[0];
                if (jumper) {
                    jumper.addClassName(this.options.selectedClassName);
                }
            }
            //EOF MOD ---- Always Update Jumpers with selectedClassName ----

Original comment by sam.Cros...@gmail.com on 10 Jan 2014 at 11:02

Attachments: