thr3ads.net - Rails spinoffs - Google/Netflix Like Tooltips [Jul 2006]

If this information is useful, please help other people find it:
Share via:

Athman,Joseph J

2006-Jul-05 17:51 UTC

Google/Netflix Like Tooltips

I need to have a toolip-like object which has dynamic content in it.  I
plan on using scriptaculous with an ajax call to retrieve the content,
but I would like to make the popup/tooltip/balloon text look as nice as
possible.  Does anyone have any examples or anything useful to create a
popup like the ones that Google and Netflix have?  I''d like to have one
which must be "X''ed" out of, not simply disappearing after
mousing off
of the object.  I googled around some, but didn''t find anything super
easy to use.  I was surprised that I didn''t find anything built into
Prototype/Scriptaculous to help with the Dom work.  Ideas?  Thanks for
any help.

 

Joe Athman  

 


=============================================================================This
communication, together with any attachments hereto or links contained herein,
is for the sole use of the intended recipient(s) and may contain information
that is confidential or legally protected. If you are not the intended
recipient, you are hereby notified that any review, disclosure, copying,
dissemination, distribution or use of this communication is STRICTLY PROHIBITED.
If you have received this communication in error, please notify the sender
immediately by return e-mail message and delete the original and all copies of
the communication, along with any attachments hereto or links herein, from your
system.

=============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/05/06, 13:51:11.



_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Eric Anderson

2006-Jul-05 17:57 UTC

head link

Re: Google/Netflix Like Tooltips

Athman,Joseph J wrote:> I need to have a toolip-like object which has dynamic content in it.  I 
Have you checked out http://tooltip.crtx.org/index.php. Not sure if it 
meets your needs.

Eric

Martinez, Andrew

2006-Jul-05 18:17 UTC

head link

RE: Google/Netflix Like Tooltips

In my opinion Prototype and Scriptaculous aren''t widget libraries
(except Scriptaculous has a quasai-widget; the auto-completer). However to
create a pop-up like Netflix or google, is incredibly easy.
 
<html>
            
            <head>
 
                        <title>SimpleUgly PopUp Test</title>      
                        <script type="text/javascript"
src="prototype.js"></script>
                        <script type="text/javascript"
src="scriptaculous.js"></script>
</head>
<body>
            <input type="button" id="button"
name="blar" value="blar">
            
            <div style="display:none;width:500;border:1px solid
black;" id="popUpContainer">
                        <div id="title"
style="border-bottom:1px solid black;">
                                    <span id="title" >My
PopUpTitle</span>
                                    <span id="close"
>X</span>
                        </div>
            <div id="content"
>blablalba<BR>bla<BR>bla</div>
            </div>
            
<script type="text/javascript">
            new Draggable( "popUpContainer" );
    Event.observe( "button", "click",
function(){$("popUpContainer").style.display="block"});
    Event.observe( "close", "click",
function(){$("popUpContainer").style.display="none"; });
</script>
 
            </body>
<head>
 
The ToDo List:
1)       add fade in/fade out effects from scriptaculous
2)       attach an IFRAME and div combo the document.body and have them
"mask" the underlying page.
3)       Add better CSS to the dialogue to add rounded corners (possibly remove
the title text)
 
 
 
-Andrew Martinez
 
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
Behalf Of Athman,Joseph J
Sent: Wednesday, July 05, 2006 1:51 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Google/Netflix Like Tooltips
 
I need to have a toolip-like object which has dynamic content in it.  I plan on
using scriptaculous with an ajax call to retrieve the content, but I would like
to make the popup/tooltip/balloon text look as nice as possible.  Does anyone
have any examples or anything useful to create a popup like the ones that Google
and Netflix have?  I''d like to have one which must be
"X''ed" out of, not simply disappearing after mousing off of
the object.  I googled around some, but didn''t find anything super easy
to use.  I was surprised that I didn''t find anything built into
Prototype/Scriptaculous to help with the Dom work.  Ideas?  Thanks for any help.
 
Joe Athman  
 
=============================================================================This
communication, together with any attachments hereto or links contained herein,
is for the sole use of the intended recipient(s) and may contain information
that is confidential or legally protected. If you are not the intended
recipient, you are hereby notified that any review, disclosure, copying,
dissemination, distribution or use of this communication is STRICTLY PROHIBITED.
If you have received this communication in error, please notify the sender
immediately by return e-mail message and delete the original and all copies of
the communication, along with any attachments hereto or links herein, from your
system.
 
=============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/05/06, 13:51:11.
 


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Martinez, Andrew

2006-Jul-05 18:28 UTC

head link

RE: Google/Netflix Like Tooltips

Also, to do the mouse over and not close change


    Event.observe( "button", "click",
function(){$("popUpContainer").style.display="block"});
 
To
 
    Event.observe( "button", "mouseover",
function(){$("popUpContainer").style.display="block"});
 
-Andrew Martinez
 
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
Behalf Of Martinez, Andrew
Sent: Wednesday, July 05, 2006 2:18 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] Google/Netflix Like Tooltips
 
In my opinion Prototype and Scriptaculous aren''t widget libraries
(except Scriptaculous has a quasai-widget; the auto-completer). However to
create a pop-up like Netflix or google, is incredibly easy.
 
<html>
            
            <head>
 
                        <title>SimpleUgly PopUp Test</title>      
                        <script type="text/javascript"
src="prototype.js"></script>
                        <script type="text/javascript"
src="scriptaculous.js"></script>
</head>
<body>
            <input type="button" id="button"
name="blar" value="blar">
            
            <div style="display:none;width:500;border:1px solid
black;" id="popUpContainer">
                        <div id="title"
style="border-bottom:1px solid black;">
                                    <span id="title" >My
PopUpTitle</span>
                                    <span id="close"
>X</span>
                        </div>
            <div id="content"
>blablalba<BR>bla<BR>bla</div>
            </div>
            
<script type="text/javascript">
            new Draggable( "popUpContainer" );
    Event.observe( "button", "click",
function(){$("popUpContainer").style.display="block"});
    Event.observe( "close", "click",
function(){$("popUpContainer").style.display="none"; });
</script>
 
            </body>
<head>
 
The ToDo List:
1)       add fade in/fade out effects from scriptaculous
2)       attach an IFRAME and div combo the document.body and have them
"mask" the underlying page.
3)       Add better CSS to the dialogue to add rounded corners (possibly remove
the title text)
 
 
 
-Andrew Martinez
 
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
Behalf Of Athman,Joseph J
Sent: Wednesday, July 05, 2006 1:51 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Google/Netflix Like Tooltips
 
I need to have a toolip-like object which has dynamic content in it.  I plan on
using scriptaculous with an ajax call to retrieve the content, but I would like
to make the popup/tooltip/balloon text look as nice as possible.  Does anyone
have any examples or anything useful to create a popup like the ones that Google
and Netflix have?  I''d like to have one which must be
"X''ed" out of, not simply disappearing after mousing off of
the object.  I googled around some, but didn''t find anything super easy
to use.  I was surprised that I didn''t find anything built into
Prototype/Scriptaculous to help with the Dom work.  Ideas?  Thanks for any help.
 
Joe Athman  
 
=============================================================================This
communication, together with any attachments hereto or links contained herein,
is for the sole use of the intended recipient(s) and may contain information
that is confidential or legally protected. If you are not the intended
recipient, you are hereby notified that any review, disclosure, copying,
dissemination, distribution or use of this communication is STRICTLY PROHIBITED.
If you have received this communication in error, please notify the sender
immediately by return e-mail message and delete the original and all copies of
the communication, along with any attachments hereto or links herein, from your
system.
 
=============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/05/06, 13:51:11.
 


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Athman,Joseph J

2006-Jul-18 14:56 UTC

head link

RE: Re: Google/Netflix Like Tooltips

I wanted to let you know that this worked great.  I added a little to
allow for the tooltip to show dynamic content, but this helped out a
lot.  Thanks for the help finding this!

Joe Athman 
St. Paul Travelers - IS Investments 
651-310-7597 


-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Eric
Anderson
Sent: Wednesday, July 05, 2006 12:57 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Re: Google/Netflix Like Tooltips

Athman,Joseph J wrote:> I need to have a toolip-like object which has dynamic content in it.I 

Have you checked out http://tooltip.crtx.org/index.php. Not sure if it 
meets your needs.

Eric

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


=============================================================================This
communication, together with any attachments hereto or links contained herein,
is for the sole use of the intended recipient(s) and may contain information
that is confidential or legally protected. If you are not the intended
recipient, you are hereby notified that any review, disclosure, copying,
dissemination, distribution or use of this communication is STRICTLY PROHIBITED.
If you have received this communication in error, please notify the sender
immediately by return e-mail message and delete the original and all copies of
the communication, along with any attachments hereto or links herein, from your
system.

=============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/18/06, 10:56:13.

WJRANKIN-J6ISH/MDR2c@public.gmane.org

2006-Jul-18 15:00 UTC

head link

RE: Re: Google/Netflix Like Tooltips

I''m curious - does this work OK on IE? Last time I tried this tooltip,
it
didn''t work properly on IE. I can''t recall what the problem
was.

Thank you,
Jeff Rankin
Human Factors
544-4333



                      "Athman,Joseph J"
                     
<JATHMAN1-0aoIJ9HRPsEtWWYCGzgkZEEOCMrvLtNR@public.gmane.org>           To:
rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
                      Sent by:                                 cc:       (bcc:
William J. Rankin/UPC)
                     
rails-spinoffs-bounces-1W37MKcQCpIbvKGg9ot7NQ@public.gmane.org        Subject: 
RE: [Rails-spinoffs] Re: Google/Netflix Like Tooltips
                      onrails.org


                      07/18/2006 09:56 AM
                      Please respond to rails-spinoffs






I wanted to let you know that this worked great.  I added a little to
allow for the tooltip to show dynamic content, but this helped out a
lot.  Thanks for the help finding this!

Joe Athman
St. Paul Travelers - IS Investments
651-310-7597


-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Eric
Anderson
Sent: Wednesday, July 05, 2006 12:57 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Re: Google/Netflix Like Tooltips

Athman,Joseph J wrote:> I need to have a toolip-like object which has dynamic content in it.I

Have you checked out http://tooltip.crtx.org/index.php. Not sure if it
meets your needs.

Eric

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


=============================================================================
This communication, together with any attachments hereto or links contained
herein, is for the sole use of the intended recipient(s) and may contain
information that is confidential or legally protected. If you are not the
intended recipient, you are hereby notified that any review, disclosure,
copying, dissemination, distribution or use of this communication is
STRICTLY PROHIBITED.  If you have received this communication in error,
please notify the sender immediately by return e-mail message and delete
the original and all copies of the communication, along with any
attachments hereto or links herein, from your system.

=============================================================================
The St. Paul Travelers e-mail system made this annotation on 07/18/06,
10:56:13.


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Athman,Joseph J

2006-Jul-18 15:45 UTC

head link

RE: Re: Google/Netflix Like Tooltips

There is a note on the website which says: The following is a Netflix
copycat. Note: Does not work properly in IE properly, as it uses 24bit
pngs, which IE doesn''t support (by default:)

Because of this I did not use the "Netflix" style tooltip, just the
normal style.  In addition to the above note, I did have some issues
with it (not IE specific though).  

I didn''t like the idea of having to add a bunch of divs on my pages. 
So
I needed to dynamically create new tooltip divs.  My problem was when I
attempted to dynamically add the tooltip via the
Tooltip.add(''idOfActivator'', ''idOfTooltip'');
function he describes on
the website it didn''t work correctly.  However, when the div had the
"tooltip" class defined everything worked fine.  So this was my work
around (just the important stuff):

className = "tooltip for_" + startDiv.id;
Element.addClassName(outerDiv, className);

// make it a new tooltip, do normal setup
Tooltip.setup();
	
// move the tooltip to the cursor location
Tooltip.autoMoveToCursor = true;

//show the tooltip
Tooltip.toggle(startDiv, event);


That way you are using the class name to create the tooltip, however it
is still dynamic.  Did you have any specific issues with it in IE?


Joe Athman 

-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of
Athman,Joseph J
Sent: Tuesday, July 18, 2006 9:56 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: RE: [Rails-spinoffs] Re: Google/Netflix Like Tooltips

I wanted to let you know that this worked great.  I added a little to
allow for the tooltip to show dynamic content, but this helped out a
lot.  Thanks for the help finding this!

Joe Athman 
St. Paul Travelers - IS Investments 
651-310-7597 


-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Eric
Anderson
Sent: Wednesday, July 05, 2006 12:57 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] Re: Google/Netflix Like Tooltips

Athman,Joseph J wrote:> I need to have a toolip-like object which has dynamic content in it.I 

Have you checked out http://tooltip.crtx.org/index.php. Not sure if it 
meets your needs.

Eric

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


============================================================================This
communication, together with any attachments hereto or links
contained herein, is for the sole use of the intended recipient(s) and
may contain information that is confidential or legally protected. If
you are not the intended recipient, you are hereby notified that any
review, disclosure, copying, dissemination, distribution or use of this
communication is STRICTLY PROHIBITED.  If you have received this
communication in error, please notify the sender immediately by return
e-mail message and delete the original and all copies of the
communication, along with any attachments hereto or links herein, from
your system.

============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/18/06,
10:56:13.


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


=============================================================================This
communication, together with any attachments hereto or links contained herein,
is for the sole use of the intended recipient(s) and may contain information
that is confidential or legally protected. If you are not the intended
recipient, you are hereby notified that any review, disclosure, copying,
dissemination, distribution or use of this communication is STRICTLY PROHIBITED.
If you have received this communication in error, please notify the sender
immediately by return e-mail message and delete the original and all copies of
the communication, along with any attachments hereto or links herein, from your
system.

=============================================================================The
St. Paul Travelers e-mail system made this annotation on 07/18/06, 11:45:38.

Fabian Lange

2006-Jul-18 20:44 UTC

head link

script.aculo.us effect to update elements

Hi,
perhaps I am overseeing this but it seems that there is no easy way to set
up a queue with two effects (fade and appear) and in between exchange the
content.
So I have an application with static layout and just want to animate the
exchange of the content from the main div.

So I wrote my own effect. The nice thing is that this is now queue able.

Effect.Updater = Class.create();
Object.extend(Object.extend(Effect.Updater.prototype,
Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      duration: 0.001,
      newContent: ''''
    }, arguments[1] || {});
    this.start(options);
  },
  loop: function(timePos) {
    if(timePos >= this.startOn) {
      Element.update(this.element,this.options.newContent);
      this.cancel();
      return;
    }
  }
});

So I can now put this to the method I pass to onComplete of Ajax.Request

function reload_content(ajax){
  el = $(''content'');
  new Effect.Fade(el,{queue:''front''});
  new
Effect.Updater(el,{newContent:ajax.responseText,queue:''end''});
  new Effect.Appear(el,{queue:''end''});
}

Is there a better way to accomplish this? If not, then I might contribute
this when I figure out how the version control system works :)


Br
Fabian

Ryan Gahl

2006-Jul-18 20:52 UTC

head link

Re: script.aculo.us effect to update elements

Nice effect... although I''m more inclined to call it a control or
widget
than effect. Perhaps you can also make it support passing in an array of
values to allow for non-ajax updates. For instance, "new Effect.Updater(el,
{newContentArray: [''foo'', ''bar'',
''blah''], queue: ''end''});"


On 7/18/06, Fabian Lange <Fabian.Lange-S0/GAf8tV78@public.gmane.org>
wrote:>
> Hi,
> perhaps I am overseeing this but it seems that there is no easy way to set
> up a queue with two effects (fade and appear) and in between exchange the
> content.
> So I have an application with static layout and just want to animate the
> exchange of the content from the main div.
>
> So I wrote my own effect. The nice thing is that this is now queue able.
>
> Effect.Updater = Class.create();
> Object.extend(Object.extend(Effect.Updater.prototype,
> Effect.Base.prototype), {
>   initialize: function(element) {
>     this.element = $(element);
>     var options = Object.extend({
>       duration: 0.001,
>       newContent: ''''
>     }, arguments[1] || {});
>     this.start(options);
>   },
>   loop: function(timePos) {
>     if(timePos >= this.startOn) {
>       Element.update(this.element,this.options.newContent);
>       this.cancel();
>       return;
>     }
>   }
> });
>
> So I can now put this to the method I pass to onComplete of Ajax.Request
>
> function reload_content(ajax){
>   el = $(''content'');
>   new Effect.Fade(el,{queue:''front''});
>   new
Effect.Updater(el,{newContent:ajax.responseText,queue:''end''});
>   new Effect.Appear(el,{queue:''end''});
> }
>
> Is there a better way to accomplish this? If not, then I might contribute
> this when I figure out how the version control system works :)
>
>
> Br
> Fabian
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Stripe-man

2006-Jul-19 08:03 UTC

head link

Re: Re: Google/Netflix Like Tooltips

can we see aworking demo ?

On 7/18/06, Athman,Joseph J
<JATHMAN1-0aoIJ9HRPsEtWWYCGzgkZEEOCMrvLtNR@public.gmane.org>
wrote:>
> There is a note on the website which says: The following is a Netflix
> copycat. Note: Does not work properly in IE properly, as it uses 24bit
> pngs, which IE doesn''t support (by default:)
>
> Because of this I did not use the "Netflix" style tooltip, just
the
> normal style.  In addition to the above note, I did have some issues
> with it (not IE specific though).
>
> I didn''t like the idea of having to add a bunch of divs on my
pages.  So
> I needed to dynamically create new tooltip divs.  My problem was when I
> attempted to dynamically add the tooltip via the
> Tooltip.add(''idOfActivator'',
''idOfTooltip''); function he describes on
> the website it didn''t work correctly.  However, when the div had
the
> "tooltip" class defined everything worked fine.  So this was my
work
> around (just the important stuff):
>
> className = "tooltip for_" + startDiv.id;
> Element.addClassName(outerDiv, className);
>
> // make it a new tooltip, do normal setup
> Tooltip.setup();
>
> // move the tooltip to the cursor location
> Tooltip.autoMoveToCursor = true;
>
> //show the tooltip
> Tooltip.toggle(startDiv, event);
>
>
> That way you are using the class name to create the tooltip, however it
> is still dynamic.  Did you have any specific issues with it in IE?
>
>
> Joe Athman
>
> -----Original Message-----
> From:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of
> Athman,Joseph J
> Sent: Tuesday, July 18, 2006 9:56 AM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> Subject: RE: [Rails-spinoffs] Re: Google/Netflix Like Tooltips
>
> I wanted to let you know that this worked great.  I added a little to
> allow for the tooltip to show dynamic content, but this helped out a
> lot.  Thanks for the help finding this!
>
> Joe Athman
> St. Paul Travelers - IS Investments
> 651-310-7597
>
>
> -----Original Message-----
> From:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Eric
> Anderson
> Sent: Wednesday, July 05, 2006 12:57 PM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> Subject: [Rails-spinoffs] Re: Google/Netflix Like Tooltips
>
> Athman,Joseph J wrote:
> > I need to have a toolip-like object which has dynamic content in it.
> I
>
> Have you checked out http://tooltip.crtx.org/index.php. Not sure if it
> meets your needs.
>
> Eric
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
> =======================================================================>
=====> This communication, together with any attachments hereto or links
> contained herein, is for the sole use of the intended recipient(s) and
> may contain information that is confidential or legally protected. If
> you are not the intended recipient, you are hereby notified that any
> review, disclosure, copying, dissemination, distribution or use of this
> communication is STRICTLY PROHIBITED.  If you have received this
> communication in error, please notify the sender immediately by return
> e-mail message and delete the original and all copies of the
> communication, along with any attachments hereto or links herein, from
> your system.
>
> =======================================================================>
=====> The St. Paul Travelers e-mail system made this annotation on 07/18/06,
> 10:56:13.
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
>
=============================================================================>
This communication, together with any attachments hereto or links
> contained herein, is for the sole use of the intended recipient(s) and may
> contain information that is confidential or legally protected. If you are
> not the intended recipient, you are hereby notified that any review,
> disclosure, copying, dissemination, distribution or use of this
> communication is STRICTLY PROHIBITED.  If you have received this
> communication in error, please notify the sender immediately by return
> e-mail message and delete the original and all copies of the communication,
> along with any attachments hereto or links herein, from your system.
>
>
>
=============================================================================>
The St. Paul Travelers e-mail system made this annotation on 07/18/06,
> 11:45:38.
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>


-- 
"I have learned that you should''nt compare yourself to others -
they are
more screwed up than you think." ...unknown

"In the 60''s, people took acid to make the world weird.  Now the
world is
weird and people take Prozac to make it normal." ..unknown
_____________________________
Terry Remsik
stripe-man.dyndns.org
remsikt-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Bauser, Joseph (Joe)

2006-Jul-19 12:37 UTC

head link

RE: script.aculo.us effect to update elements

I must say I like your approach.

I was looking for something similar for my website a week or so ago and rolled
my own solution which is nowhere near as elegant.
(code at http://www.josephbauser.net/javascripts/application.js example use
at... well the main site. If you do check it out, please be gentile
it''s very much a work in progress ;)

I definitely over thought the solution (forgot about Element.update for one).

Well done. :)

Joe

-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
Behalf Of Fabian
Lange
Sent: Tuesday, July 18, 2006 4:45 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
Subject: [Rails-spinoffs] script.aculo.us effect to update elements


Hi,
perhaps I am overseeing this but it seems that there is no easy way to set
up a queue with two effects (fade and appear) and in between exchange the
content.
So I have an application with static layout and just want to animate the
exchange of the content from the main div.

So I wrote my own effect. The nice thing is that this is now queue able.

Effect.Updater = Class.create();
Object.extend(Object.extend(Effect.Updater.prototype,
Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      duration: 0.001,
      newContent: ''''
    }, arguments[1] || {});
    this.start(options);
  },
  loop: function(timePos) {
    if(timePos >= this.startOn) {
      Element.update(this.element,this.options.newContent);
      this.cancel();
      return;
    }
  }
});

So I can now put this to the method I pass to onComplete of Ajax.Request

function reload_content(ajax){
  el = $(''content'');
  new Effect.Fade(el,{queue:''front''});
  new
Effect.Updater(el,{newContent:ajax.responseText,queue:''end''});
  new Effect.Appear(el,{queue:''end''});
}

Is there a better way to accomplish this? If not, then I might contribute
this when I figure out how the version control system works :)


Br
Fabian

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Seemingly Similar Threads

Search for more possibly parallel threads

Rails spinoffs - Jul 2006 - Google/Netflix Like Tooltips

Google/Netflix Like Tooltips

Re: Google/Netflix Like Tooltips

RE: Google/Netflix Like Tooltips

RE: Google/Netflix Like Tooltips

RE: Re: Google/Netflix Like Tooltips

RE: Re: Google/Netflix Like Tooltips

RE: Re: Google/Netflix Like Tooltips

script.aculo.us effect to update elements

Re: script.aculo.us effect to update elements

Re: Re: Google/Netflix Like Tooltips

RE: script.aculo.us effect to update elements

Seemingly Similar Threads