[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Danny Nolan 
Example? Im very new to jQuery, the old code was partially provided by someone 
else with a few edits, so not sure how to create that new level you was talking 
about.

--- On Thu, 5/14/09, Richard D. Worth rdwo...@gmail.com wrote:

From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget
To: jquery-en@googlegroups.com
Date: Thursday, May 14, 2009, 10:12 PM

You'll need to add an extra level: section divs containing each related h3 and 
content div. Then you can call .sortable() the main div#accordion1

- Richard

On Thu, May 14, 2009 at 9:38 PM, DanN danny_no...@yahoo.co.uk wrote:



Got this coded, its an accordion like tool. It functions just how I

need it, except id love to make it sortable. Anyone help with the code

update?



jQuery :



        $(function() {

        $(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)

        .find(h3)

                .addClass(ui-accordion-header ui-helper-reset ui-state-default 
ui-

corner-top ui-corner-bottom)

                .prepend('span class=ui-icon ui-icon-triangle-1-e/')

                .hover(function() {

                        $(this).addClass(ui-state-hover);

                },

                function() {

                        $(this).removeClass(ui-state-hover);

                })

                .click(function() {

                        
$(this).toggleClass(ui-accordion-header-active).toggleClass(ui-

state-active)

                                
.toggleClass(ui-state-default).toggleClass(ui-corner-bottom)

                        .find( 
.ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass

(ui-icon-triangle-1-s)

                        
.end().next().toggleClass(ui-accordion-content-active).toggle();

                        return false;

                })

                .next().addClass(ui-accordion-content ui-helper-reset 
ui-widget-

content ui-corner-bottom).hide();

        })



HTML:



div id=accordion1



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



/div



Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Richard D. Worth 
Sure, here you go:

http://jsbin.com/aqeca

You can edit this example here:

http://jsbin.com/aqeca/edit

It's not perfect, since when you sort one, it also toggles it, but it's a
start.

- Richard

On Fri, May 15, 2009 at 10:19 AM, Danny Nolan danny_no...@yahoo.co.ukwrote:

 Example? Im very new to jQuery, the old code was partially provided by
 someone else with a few edits, so not sure how to create that new level you
 was talking about.

 --- On *Thu, 5/14/09, Richard D. Worth rdwo...@gmail.com* wrote:


 From: Richard D. Worth rdwo...@gmail.com
 Subject: [jQuery] Re: Sortable accordion-like widget
 To: jquery-en@googlegroups.com
 Date: Thursday, May 14, 2009, 10:12 PM


 You'll need to add an extra level: section divs containing each related h3
 and content div. Then you can call .sortable() the main div#accordion1

 - Richard

 On Thu, May 14, 2009 at 9:38 PM, DanN 
 danny_no...@yahoo.co.ukhttp://mc/compose?to=danny_no...@yahoo.co.uk
  wrote:


 Got this coded, its an accordion like tool. It functions just how I
 need it, except id love to make it sortable. Anyone help with the code
 update?

 jQuery :

$(function() {
$(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)
.find(h3)
.addClass(ui-accordion-header ui-helper-reset
 ui-state-default ui-
 corner-top ui-corner-bottom)
.prepend('span class=ui-icon ui-icon-triangle-1-e/')
.hover(function() {
$(this).addClass(ui-state-hover);
},
function() {
$(this).removeClass(ui-state-hover);
})
.click(function() {

  $(this).toggleClass(ui-accordion-header-active).toggleClass(ui-
 state-active)

  .toggleClass(ui-state-default).toggleClass(ui-corner-bottom)
.find(
 .ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass
 (ui-icon-triangle-1-s)

  .end().next().toggleClass(ui-accordion-content-active).toggle();
return false;
})
.next().addClass(ui-accordion-content ui-helper-reset
 ui-widget-
 content ui-corner-bottom).hide();
})

 HTML:

 div id=accordion1

h3a href=#DRAW2/a/h3

div
CONTENT
/div

h3a href=#DRAW2/a/h3

div
CONTENT
/div

 /div

 Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Danny Nolan 
Almost, I found it worked almost, except for the fact that the sortable 
affected only the UL-LI objects, the contents were static. How to get past that?

--- On Fri, 5/15/09, Richard D. Worth rdwo...@gmail.com wrote:

From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget
To: jquery-en@googlegroups.com
Date: Friday, May 15, 2009, 10:51 AM

Sure, here you go:

http://jsbin.com/aqeca

You can edit this example here:

http://jsbin.com/aqeca/edit

It's not perfect, since when you sort one, it also toggles it, but it's a start.


- Richard

On Fri, May 15, 2009 at 10:19 AM, Danny Nolan danny_no...@yahoo.co.uk wrote:


Example? Im very new to jQuery, the old code was partially provided by someone 
else with a few edits, so not sure how to create that new level you was talking 
about.

--- On Thu, 5/14/09, Richard D. Worth rdwo...@gmail.com wrote:


From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget

To: jquery-en@googlegroups.com
Date: Thursday, May 14, 2009, 10:12 PM

You'll need to add an extra level: section divs containing each related h3 and 
content div. Then you can call .sortable() the main div#accordion1


- Richard

On Thu, May 14, 2009 at 9:38 PM, DanN danny_no...@yahoo.co.uk wrote:




Got this coded, its an accordion like tool. It functions just how I

need it, except id love to make it sortable. Anyone help with the code

update?



jQuery :



        $(function() {

        $(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)

        .find(h3)

                .addClass(ui-accordion-header ui-helper-reset ui-state-default 
ui-

corner-top ui-corner-bottom)

                .prepend('span class=ui-icon ui-icon-triangle-1-e/')

                .hover(function() {

                        $(this).addClass(ui-state-hover);

                },

                function() {

                        $(this).removeClass(ui-state-hover);

                })

                .click(function() {

                        
$(this).toggleClass(ui-accordion-header-active).toggleClass(ui-

state-active)

                                
.toggleClass(ui-state-default).toggleClass(ui-corner-bottom)

                        .find( 
.ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass

(ui-icon-triangle-1-s)

                        
.end().next().toggleClass(ui-accordion-content-active).toggle();

                        return false;

                })

                .next().addClass(ui-accordion-content ui-helper-reset 
ui-widget-

content ui-corner-bottom).hide();

        })



HTML:



div id=accordion1



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



/div



Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Danny Nolan 
Let me be more specific, this is the code I have:

$(function() {
    $(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)
    .find(h3)
        .addClass(ui-accordion-header ui-helper-reset ui-state-default 
ui-corner-top ui-corner-bottom)
        .prepend('span class=ui-icon ui-icon-triangle-1-e/')
        .hover(function() {
            $(this).addClass(ui-state-hover);
        },
        function() {
            $(this).removeClass(ui-state-hover);
        })
        .click(function() {
            
$(this).toggleClass(ui-accordion-header-active).toggleClass(ui-state-active)
                .toggleClass(ui-state-default).toggleClass(ui-corner-bottom)
            .find( 
.ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass(ui-icon-triangle-1-s)
            .end().next().toggleClass(ui-accordion-content-active).toggle();
            return false;
        })
        .next().addClass(ui-accordion-content ui-helper-reset 
ui-widget-content ui-corner-bottom).hide();
        //$(#accordion1).sortable();
})

Where am I going wrong?

--- On Fri, 5/15/09, Richard D. Worth rdwo...@gmail.com wrote:

From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget
To: jquery-en@googlegroups.com
Date: Friday, May 15, 2009, 10:51 AM

Sure, here you go:

http://jsbin.com/aqeca

You can edit this example here:

http://jsbin.com/aqeca/edit

It's not perfect, since when you sort one, it also toggles it, but it's a start.


- Richard

On Fri, May 15, 2009 at 10:19 AM, Danny Nolan danny_no...@yahoo.co.uk wrote:


Example? Im very new to jQuery, the old code was partially provided by someone 
else with a few edits, so not sure how to create that new level you was talking 
about.

--- On Thu, 5/14/09, Richard D. Worth rdwo...@gmail.com wrote:


From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget

To: jquery-en@googlegroups.com
Date: Thursday, May 14, 2009, 10:12 PM

You'll need to add an extra level: section divs containing each related h3 and 
content div. Then you can call .sortable() the main div#accordion1


- Richard

On Thu, May 14, 2009 at 9:38 PM, DanN danny_no...@yahoo.co.uk wrote:




Got this coded, its an accordion like tool. It functions just how I

need it, except id love to make it sortable. Anyone help with the code

update?



jQuery :



        $(function() {

        $(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)

        .find(h3)

                .addClass(ui-accordion-header ui-helper-reset ui-state-default 
ui-

corner-top ui-corner-bottom)

                .prepend('span class=ui-icon ui-icon-triangle-1-e/')

                .hover(function() {

                        $(this).addClass(ui-state-hover);

                },

                function() {

                        $(this).removeClass(ui-state-hover);

                })

                .click(function() {

                        
$(this).toggleClass(ui-accordion-header-active).toggleClass(ui-

state-active)

                                
.toggleClass(ui-state-default).toggleClass(ui-corner-bottom)

                        .find( 
.ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass

(ui-icon-triangle-1-s)

                        
.end().next().toggleClass(ui-accordion-content-active).toggle();

                        return false;

                })

                .next().addClass(ui-accordion-content ui-helper-reset 
ui-widget-

content ui-corner-bottom).hide();

        })



HTML:



div id=accordion1



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



/div



Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Richard D. Worth 
What UI-LI objects? Your sample code (which I added an extra div level to)
only has DIVs and H3s.

- Richard

On Fri, May 15, 2009 at 2:21 PM, Danny Nolan danny_no...@yahoo.co.ukwrote:

 Almost, I found it worked almost, except for the fact that the sortable
 affected only the UL-LI objects, the contents were static. How to get past
 that?

 --- On *Fri, 5/15/09, Richard D. Worth rdwo...@gmail.com* wrote:


 From: Richard D. Worth rdwo...@gmail.com
 Subject: [jQuery] Re: Sortable accordion-like widget
 To: jquery-en@googlegroups.com
 Date: Friday, May 15, 2009, 10:51 AM


 Sure, here you go:

 http://jsbin.com/aqeca

 You can edit this example here:

 http://jsbin.com/aqeca/edit

 It's not perfect, since when you sort one, it also toggles it, but it's a
 start.

 - Richard

 On Fri, May 15, 2009 at 10:19 AM, Danny Nolan 
 danny_no...@yahoo.co.ukhttp://mc/compose?to=danny_no...@yahoo.co.uk
  wrote:

  Example? Im very new to jQuery, the old code was partially provided by
 someone else with a few edits, so not sure how to create that new level you
 was talking about.

 --- On *Thu, 5/14/09, Richard D. Worth 
 rdwo...@gmail.comhttp://mc/compose?to=rdwo...@gmail.com
 * wrote:


 From: Richard D. Worth 
 rdwo...@gmail.comhttp://mc/compose?to=rdwo...@gmail.com
 
 Subject: [jQuery] Re: Sortable accordion-like widget
 To: 
 jquery-en@googlegroups.comhttp://mc/compose?to=jquery...@googlegroups.com
 Date: Thursday, May 14, 2009, 10:12 PM


 You'll need to add an extra level: section divs containing each related h3
 and content div. Then you can call .sortable() the main div#accordion1

 - Richard

 On Thu, May 14, 2009 at 9:38 PM, DanN 
 danny_no...@yahoo.co.ukhttp://mc/compose?to=danny_no...@yahoo.co.uk
  wrote:


 Got this coded, its an accordion like tool. It functions just how I
 need it, except id love to make it sortable. Anyone help with the code
 update?

 jQuery :

$(function() {
$(#accordion1).addClass(ui-accordion ui-widget
 ui-helper-reset)
.find(h3)
.addClass(ui-accordion-header ui-helper-reset
 ui-state-default ui-
 corner-top ui-corner-bottom)
.prepend('span class=ui-icon ui-icon-triangle-1-e/')
.hover(function() {
$(this).addClass(ui-state-hover);
},
function() {
$(this).removeClass(ui-state-hover);
})
.click(function() {

  $(this).toggleClass(ui-accordion-header-active).toggleClass(ui-
 state-active)

  .toggleClass(ui-state-default).toggleClass(ui-corner-bottom)
.find(
 .ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass
 (ui-icon-triangle-1-s)

  .end().next().toggleClass(ui-accordion-content-active).toggle();
return false;
})
.next().addClass(ui-accordion-content ui-helper-reset
 ui-widget-
 content ui-corner-bottom).hide();
})

 HTML:

 div id=accordion1

h3a href=#DRAW2/a/h3

div
CONTENT
/div

h3a href=#DRAW2/a/h3

div
CONTENT
/div

 /div

 Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Danny Nolan 
yep, took me a while to realize that :)

Implemented the extra layer of divs and its working great!

Thank you so much!

UL-LIs was for the tabs above, not involved, my mistake :)

--- On Fri, 5/15/09, Richard D. Worth rdwo...@gmail.com wrote:

From: Richard D. Worth rdwo...@gmail.com
Subject: [jQuery] Re: Sortable accordion-like widget
To: jquery-en@googlegroups.com
Date: Friday, May 15, 2009, 2:04 PM

What UI-LI objects? Your sample code (which I added an extra div level to) only 
has DIVs and H3s.

- Richard

On Fri, May 15, 2009 at 2:21 PM, Danny Nolan danny_no...@yahoo.co.uk wrote:


Almost, I found it worked almost, except for the fact that the sortable 
affected only the UL-LI objects, the contents were static. How to get past that?

--- On Fri, 5/15/09, Richard D. Worth rdwo...@gmail.com wrote:


From: Richard D. Worth rdwo...@gmail.com

Subject: [jQuery] Re: Sortable accordion-like widget
To: jquery-en@googlegroups.com
Date: Friday, May 15, 2009, 10:51 AM


Sure, here you go:

http://jsbin.com/aqeca

You can edit this example here:

http://jsbin.com/aqeca/edit


It's not perfect, since when you sort one,
 it also toggles it, but it's a start.


- Richard

On Fri, May 15, 2009 at 10:19 AM, Danny Nolan danny_no...@yahoo.co.uk wrote:




Example? Im very new to jQuery, the old code was partially provided by someone 
else with a few edits, so not sure how to create that new level you was talking 
about.

--- On Thu, 5/14/09, Richard D. Worth rdwo...@gmail.com wrote:



From: Richard D. Worth rdwo...@gmail.com

Subject: [jQuery] Re: Sortable accordion-like widget

To: jquery-en@googlegroups.com
Date: Thursday, May 14, 2009, 10:12 PM

You'll need to add an extra level: section divs containing each related h3 and 
content div. Then you can call .sortable() the main div#accordion1



- Richard

On Thu, May 14, 2009 at 9:38 PM, DanN danny_no...@yahoo.co.uk wrote:





Got this coded, its an accordion like tool. It functions just how I

need it, except id love to make it sortable. Anyone help with the code

update?



jQuery :



        $(function() {

        $(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)

        .find(h3)

                .addClass(ui-accordion-header ui-helper-reset ui-state-default 
ui-

corner-top ui-corner-bottom)

                .prepend('span class=ui-icon ui-icon-triangle-1-e/')

                .hover(function() {

                        $(this).addClass(ui-state-hover);

                },

                function() {

                        $(this).removeClass(ui-state-hover);

                })

                .click(function() {

                        
$(this).toggleClass(ui-accordion-header-active).toggleClass(ui-

state-active)

                                
.toggleClass(ui-state-default).toggleClass(ui-corner-bottom)

                        .find( 
.ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass

(ui-icon-triangle-1-s)

                        
.end().next().toggleClass(ui-accordion-content-active).toggle();

                        return false;

                })

                .next().addClass(ui-accordion-content ui-helper-reset 
ui-widget-

content ui-corner-bottom).hide();

        })



HTML:



div id=accordion1



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



        h3a href=#DRAW2/a/h3



        div

                CONTENT

        /div



/div



Help appreciated in advance.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread DanN 

Got that sorted, now for something tougher.

Say I have two seperate accordions in two areas of a page (two
seperate tabs), can I make items movable between those two accordions.
Basically each accordion draw hosts a seperate tool my coworkers and I
use daily, however every person uses a different set and I would love
for each person to be able to display their faves on the front tab
accordion, moving the others to the 2nd accordion on a separate tab,
no memory or cache is needed.

[jQuery] Re: Sortable accordion-like widget

2009-05-15 Thread Richard D. Worth 
I wonder if this demo will give you some ideas:

http://jqueryui.com/demos/sortable/#connect-lists-through-tabs

It's sortable lists that are connected even though they're on separate tabs.
If you decided to do something like this and need some help, here would be
the place to ask:

http://groups.google.com/group/jquery-ui

- Richard

On Fri, May 15, 2009 at 3:36 PM, DanN danny_no...@yahoo.co.uk wrote:


 Got that sorted, now for something tougher.

 Say I have two seperate accordions in two areas of a page (two
 seperate tabs), can I make items movable between those two accordions.
 Basically each accordion draw hosts a seperate tool my coworkers and I
 use daily, however every person uses a different set and I would love
 for each person to be able to display their faves on the front tab
 accordion, moving the others to the 2nd accordion on a separate tab,
 no memory or cache is needed.

[jQuery] Re: Sortable accordion-like widget

2009-05-14 Thread Richard D. Worth 
You'll need to add an extra level: section divs containing each related h3
and content div. Then you can call .sortable() the main div#accordion1

- Richard

On Thu, May 14, 2009 at 9:38 PM, DanN danny_no...@yahoo.co.uk wrote:


 Got this coded, its an accordion like tool. It functions just how I
 need it, except id love to make it sortable. Anyone help with the code
 update?

 jQuery :

$(function() {
$(#accordion1).addClass(ui-accordion ui-widget ui-helper-reset)
.find(h3)
.addClass(ui-accordion-header ui-helper-reset
 ui-state-default ui-
 corner-top ui-corner-bottom)
.prepend('span class=ui-icon ui-icon-triangle-1-e/')
.hover(function() {
$(this).addClass(ui-state-hover);
},
function() {
$(this).removeClass(ui-state-hover);
})
.click(function() {

  $(this).toggleClass(ui-accordion-header-active).toggleClass(ui-
 state-active)

  .toggleClass(ui-state-default).toggleClass(ui-corner-bottom)
.find(
 .ui-icon).toggleClass(ui-icon-triangle-1-e).toggleClass
 (ui-icon-triangle-1-s)

  .end().next().toggleClass(ui-accordion-content-active).toggle();
return false;
})
.next().addClass(ui-accordion-content ui-helper-reset
 ui-widget-
 content ui-corner-bottom).hide();
})

 HTML:

 div id=accordion1

h3a href=#DRAW2/a/h3

div
CONTENT
/div

h3a href=#DRAW2/a/h3

div
CONTENT
/div

 /div

 Help appreciated in advance.