[Pro] ScriptyAccordion and images before heading

Freeway
1

I have been asked to make something similar like this page, the accordion under Annonces.
http://www.duinvliet.nl/tennismaatje.html

I know this can be done with ScriptyAccordion but my client also want a turning arrow like the example, is there a method to do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Unlike some of the other Scripty Actions, I didn’t add any “marker” classnames to the elements, so it’s not currently possible to use CSS directly to do this. If you have a specific page structure laid out, and have applied the Action to the element, could you post that somewhere and send a link? I may be able to come up with a “side-car” approach to tack this on using the Protaculous Action.

Walter

On Apr 20, 2012, at 8:16 AM, b8 wrote:

I have been asked to make something similar like this page, the accordion under Annonces.
http://www.duinvliet.nl/tennismaatje.html

I know this can be done with ScriptyAccordion but my client also want a turning arrow like the example, is there a method to do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,
thanks for your reply, I am going to start with this project next week and I will send you a link when the page is online somewhere.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Sounds good. I will be in Austin next week at the RailsConf, so I may not be as responsive as usual until the end of the week.

Walter

On Apr 20, 2012, at 8:46 AM, b8 wrote:

Hi Walter,
thanks for your reply, I am going to start with this project next week and I will send you a link when the page is online somewhere.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Walter,

the link to the example page http://www.rommeldomein.nl/scripty/

Besides three nav lists and a few links there will be nothing else on the page.

Thanks in advanced.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

You can certainly change the class of an item using JS with an onclick event.

At the moment your arrows are outside the header but if they were inside then it could be done.

This page uses this method on the images http://www.deltadesign.co/fw_examples/jQuery/change-class.html

So it should be doable for you.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

And here is an example for you http://www.deltadesign.co/jsclasschange/change-class.html

There will be other ways of doing this but I had been toying with this method a couple of weeks ago.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Dave, since you’ve already got prototype.js in your page, then the cngClass method could be written like this (choose prototype-packed from the Protaculous Library picker):

Element.addMethods({
	cngClass: function(obj){
		var obj = $(obj);
		obj.siblings().invoke('removeClassName','pointer');
		return obj.addClassName('pointer');
	}
});

And then hooked onto your heads like this (i.e. no inline event handler code needed):

$$('#yourBox h3').invoke('observe', 'click', 'cngClass').first().cngClass();

The first block of code adds a ‘cngClass’ method to all elements on the page, allowing them to toggle the ‘pointer’ classname, so that only one of them per parent container will have it at a time. This method is automatically extended onto every element in the page, with no extra effort or code needed. Next, the one-liner hooks all of the H3 tags in the ‘yourBox’ DIV to have them respond to the click event by running the cngClass method. And the tail-call function at the end applies the method to the first H3 in the box, so that it will get the “open” appearance when the page loads.

Walter

On Apr 28, 2012, at 8:58 PM, DeltaDave wrote:

And here is an example for you http://www.deltadesign.co/jsclasschange/change-class.html

There will be other ways of doing this but I had been toying with this method a couple of weeks ago.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

I knew you would have something to add Walter - thanks.

I will look at adding that method to my example.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

My problem with your method Walter is that mine (not really mine at all - borrowed) changes the class on the accordion headers whereas yours (as I read it) removes a class.

So I am struggling to get yours to change it rather than remove it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Mine does two things. First, it finds any peers of the current item that already have the pointer class applied to them, and removes that (this is so that only one element has the pointer class at any one time). Next, it applies the pointer class to the current item.

Here’s a test page showing what I mean: Pointer

Note also that I made a mistake with the one-liner, it’s not quite as simple as I had it, because we are hooking the click event, not the element itself.

$$('li').invoke('observe', 'click', function(evt){this.cngClass()}).first().cngClass();

Walter

On Apr 29, 2012, at 9:16 PM, DeltaDave wrote:

My problem with your method Walter is that mine (not really mine at all - borrowed) changes the class on the accordion headers whereas yours (as I read it) removes a class.

So I am struggling to get yours to change it rather than remove it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Even neater way, updated:

$$('li').invoke('observe', 'click', Element.Methods.cngClass.methodize()).first().cngClass();

Walter

On Apr 29, 2012, at 9:33 PM, Walter Lee Davis wrote:

Mine does two things. First, it finds any peers of the current item that already have the pointer class applied to them, and removes that (this is so that only one element has the pointer class at any one time). Next, it applies the pointer class to the current item.

Here’s a test page showing what I mean: Pointer

Note also that I made a mistake with the one-liner, it’s not quite as simple as I had it, because we are hooking the click event, not the element itself.

$$(‘li’).invoke(‘observe’, ‘click’, function(evt){this.cngClass()}).first().cngClass();

Walter

On Apr 29, 2012, at 9:16 PM, DeltaDave wrote:

My problem with your method Walter is that mine (not really mine at all - borrowed) changes the class on the accordion headers whereas yours (as I read it) removes a class.

So I am struggling to get yours to change it rather than remove it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Hi Dave and Walter
thanks for your reply and many thanks for your example Dave. I try to apply it in my document.
Also curious to the updated page with Walters code.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Also curious to the updated page with Walters code.

Not got to that yet!

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

OK - example updated and download now includes both pages.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options