jQuery toggle with a changing image

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

jQuery toggle with a changing image

Bob Nemec
Hello,
I'm using a jQuery ajax script to toggle the display of a component. The anchor is initially displayed with a '+' png image. When clicked the hidden div is toggled and the anchor image is changed to a '-'. My code works, but I suspect it is not elegant. What I'd like to do to change the anchor image on each click (and the title), rather than the component replacement I'm doing now.  I tried toggling the class of the anchor div to show different background images, but I could not get that to work (it feels like it should be easy).

Here is what I'm doing now... ('entireContact' is a pre-formatted view of all contact fields in a contact list application).
I'd prefer a solution that does not use a server call, which the #html: method requires.

Thanks for any help,
Bob
 

renderContactToggleOn: html

html div id: 'contactToggle'; with: [
self renderContactMoreOn: html].


renderContactMoreOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactLessOn: r]]);
title: 'Show all contact attributes'; 
with: [html image url: TSwaFileLibrary / #morePng].  " + "


renderContactLessOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactMoreOn: r]]);
title: 'Hide contact attributes'; 
with: [html image url: TSwaFileLibrary / #lessPng].  " - "


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Bob Nemec
Reply | Threaded
Open this post in threaded view
|

RE: jQuery toggle with a changing image

Robert Sirois
Pop both anchors in there and do a show/hide. I think there's a toggle for hidden in there somewhere too.

RS


Date: Wed, 22 Jun 2011 16:30:47 -0400
From: [hidden email]
To: [hidden email]
Subject: [Seaside] jQuery toggle with a changing image

Hello,
I'm using a jQuery ajax script to toggle the display of a component. The anchor is initially displayed with a '+' png image. When clicked the hidden div is toggled and the anchor image is changed to a '-'. My code works, but I suspect it is not elegant. What I'd like to do to change the anchor image on each click (and the title), rather than the component replacement I'm doing now.  I tried toggling the class of the anchor div to show different background images, but I could not get that to work (it feels like it should be easy).

Here is what I'm doing now... ('entireContact' is a pre-formatted view of all contact fields in a contact list application).
I'd prefer a solution that does not use a server call, which the #html: method requires.

Thanks for any help,
Bob
 

renderContactToggleOn: html

html div id: 'contactToggle'; with: [
self renderContactMoreOn: html].


renderContactMoreOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactLessOn: r]]);
title: 'Show all contact attributes'; 
with: [html image url: TSwaFileLibrary / #morePng].  " + "


renderContactLessOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactMoreOn: r]]);
title: 'Hide contact attributes'; 
with: [html image url: TSwaFileLibrary / #lessPng].  " - "


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery toggle with a changing image

Bob Nemec
Well... that was way too easy ;-)

Thanks,
Bob

On Wed, Jun 22, 2011 at 5:02 PM, Robert Sirois <[hidden email]> wrote:
Pop both anchors in there and do a show/hide. I think there's a toggle for hidden in there somewhere too.

RS


Date: Wed, 22 Jun 2011 16:30:47 -0400
From: [hidden email]
To: [hidden email]
Subject: [Seaside] jQuery toggle with a changing image


Hello,
I'm using a jQuery ajax script to toggle the display of a component. The anchor is initially displayed with a '+' png image. When clicked the hidden div is toggled and the anchor image is changed to a '-'. My code works, but I suspect it is not elegant. What I'd like to do to change the anchor image on each click (and the title), rather than the component replacement I'm doing now.  I tried toggling the class of the anchor div to show different background images, but I could not get that to work (it feels like it should be easy).

Here is what I'm doing now... ('entireContact' is a pre-formatted view of all contact fields in a contact list application).
I'd prefer a solution that does not use a server call, which the #html: method requires.

Thanks for any help,
Bob
 

renderContactToggleOn: html

html div id: 'contactToggle'; with: [
self renderContactMoreOn: html].


renderContactMoreOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactLessOn: r]]);
title: 'Show all contact attributes'; 
with: [html image url: TSwaFileLibrary / #morePng].  " + "


renderContactLessOn: html

html anchor 
onClick: (
html jQuery ajax script: [:s | 
s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.
s << (html jQuery id: 'contactToggle') load html: [:r | self renderContactMoreOn: r]]);
title: 'Hide contact attributes'; 
with: [html image url: TSwaFileLibrary / #lessPng].  " - "


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Bob Nemec