Hi guys, i''m relatively new to ajax, and I''ve built the following site: http://www.bluntside.com/v.x3/index2.html with the help of xilinus and his prototype carousel script. So right now the way it works is I have 2 carousels with x number of thumbnails in them. Each thumnail is a link to an external content page. Right now I have each thumbnail linking to the Effect.toggle function that toggles a container div under the carousel. The problem is that since it''s a toggle, after you''ve expanded the div with a first click, if you click on another thumbnail it will collapse the div. Can anyone suggest a way to check and see if the container is visible or not and then either load the content into the container or close the container? Any help is appreciated. Thanks james --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You could try this:
code:
if ( ! $(element).visible() ) {
$(element).toggle();
}
One thing you might need to consider (in case you''re like me and
you''re using classes to set the initial display style attribute) is
that Prototype''s Element.Methods.visible() function manually checks
the .style.display attribute which isn''t set if you''re setting
the
initial display attribute in a CSS class.
I had to fork my Prototype code like this:
Element.addMethods({
visible: function(element) {
return $(element).getStyle(''display'') !=
''none'';
}
});
That will check the computedStyle of that element and will work in most cases.
Let us know if this helps,
-E
On 12/27/06, James Song
<bluntside-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Hi guys,
> i''m relatively new to ajax, and I''ve built the following
site:
>
> http://www.bluntside.com/v.x3/index2.html
>
> with the help of xilinus and his prototype carousel script. So right
> now the way it works is I have 2 carousels with x number of
> thumbnails in them. Each thumnail is a link to an external content
> page. Right now I have each thumbnail linking to the Effect.toggle
> function that toggles a container div under the carousel. The problem
> is that since it''s a toggle, after you''ve expanded the
div with a
> first click, if you click on another thumbnail it will collapse the
> div. Can anyone suggest a way to check and see if the container is
> visible or not and then either load the content into the container or
> close the container? Any help is appreciated. Thanks
>
> james
>
> >
>
--
Eric Ryan Harrison
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Thanks Eric! To be clear, when you guys talk about Prototype, you are talking about the "prototype.js" that comes with script.aculo.us? Also, so I would add this:> visible: function(element) { > return $(element).getStyle(''display'') != ''none''; > }to the Element.addMethods function in the prototype.js file? How exactly would I implement this in the html file? As I have it right now, the container div is hidden in HTML level css, not through a css class ("style="display: none;""). Where would I put this:> if ( ! $(element).visible() ) { > $(element).toggle(); > }?? Sorry for all the questions, but I''m learning as I go. Thanks! james On Dec 28, 2006, at 3:39 AM, Eric Harrison wrote:> > You could try this: > > code: > > if ( ! $(element).visible() ) { > $(element).toggle(); > } > > One thing you might need to consider (in case you''re like me and > you''re using classes to set the initial display style attribute) is > that Prototype''s Element.Methods.visible() function manually checks > the .style.display attribute which isn''t set if you''re setting the > initial display attribute in a CSS class. > > I had to fork my Prototype code like this: > > Element.addMethods({ > visible: function(element) { > return $(element).getStyle(''display'') != ''none''; > } > }); > > That will check the computedStyle of that element and will work in > most cases. > > Let us know if this helps, > > -E > > On 12/27/06, James Song <bluntside-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >> Hi guys, >> i''m relatively new to ajax, and I''ve built the following site: >> >> http://www.bluntside.com/v.x3/index2.html >> >> with the help of xilinus and his prototype carousel script. So right >> now the way it works is I have 2 carousels with x number of >> thumbnails in them. Each thumnail is a link to an external content >> page. Right now I have each thumbnail linking to the Effect.toggle >> function that toggles a container div under the carousel. The problem >> is that since it''s a toggle, after you''ve expanded the div with a >> first click, if you click on another thumbnail it will collapse the >> div. Can anyone suggest a way to check and see if the container is >> visible or not and then either load the content into the container or >> close the container? Any help is appreciated. Thanks >> >> james >> >> > >> > > > -- > Eric Ryan Harrison > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Whenever I''m talking about Prototype.js, I try to make my
''P''
capitalized. When I''m talking about the .prototype property, I try to
make it extremely clear that I''m talking about the property and not
the library.
The good thing about the toggle() method is that it is going to check
the visibility property of the element on its own. Wrapping a check on
.visible() around the .toggle() is erroneous. Just do this:
$(element).toggle()
That will hide it if it''s visible and display it if it''s not.
Place that code in an event handler somewhere.
Either inline:
<div onclick="this.toggle();"></div>
or in code:
$(element).observe(''click'',$(element).toggle);
-E
On 12/29/06, James Song
<bluntside-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Thanks Eric!
> To be clear, when you guys talk about Prototype, you are talking
> about the "prototype.js" that comes with script.aculo.us? Also,
so I
> would add this:
>
> > visible: function(element) {
> > return $(element).getStyle(''display'') !=
''none'';
> > }
>
> to the Element.addMethods function in the prototype.js file? How
> exactly would I implement this in the html file? As I have it right
> now, the container div is hidden in HTML level css, not through a css
> class ("style="display: none;""). Where would I put
this:
>
> > if ( ! $(element).visible() ) {
> > $(element).toggle();
> > }
>
> ??
>
> Sorry for all the questions, but I''m learning as I go. Thanks!
>
> james
>
>
>
> On Dec 28, 2006, at 3:39 AM, Eric Harrison wrote:
>
> >
> > You could try this:
> >
> > code:
> >
> > if ( ! $(element).visible() ) {
> > $(element).toggle();
> > }
> >
> > One thing you might need to consider (in case you''re like me
and
> > you''re using classes to set the initial display style
attribute) is
> > that Prototype''s Element.Methods.visible() function manually
checks
> > the .style.display attribute which isn''t set if
you''re setting the
> > initial display attribute in a CSS class.
> >
> > I had to fork my Prototype code like this:
> >
> > Element.addMethods({
> > visible: function(element) {
> > return $(element).getStyle(''display'') !=
''none'';
> > }
> > });
> >
> > That will check the computedStyle of that element and will work in
> > most cases.
> >
> > Let us know if this helps,
> >
> > -E
> >
> > On 12/27/06, James Song
<bluntside-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >>
> >> Hi guys,
> >> i''m relatively new to ajax, and I''ve built the
following site:
> >>
> >> http://www.bluntside.com/v.x3/index2.html
> >>
> >> with the help of xilinus and his prototype carousel script. So
right
> >> now the way it works is I have 2 carousels with x number of
> >> thumbnails in them. Each thumnail is a link to an external content
> >> page. Right now I have each thumbnail linking to the Effect.toggle
> >> function that toggles a container div under the carousel. The
problem
> >> is that since it''s a toggle, after you''ve
expanded the div with a
> >> first click, if you click on another thumbnail it will collapse
the
> >> div. Can anyone suggest a way to check and see if the container is
> >> visible or not and then either load the content into the container
or
> >> close the container? Any help is appreciated. Thanks
> >>
> >> james
> >>
> >> >
> >>
> >
> >
> > --
> > Eric Ryan Harrison
> >
> > >
>
>
> >
>
--
Eric Ryan Harrison
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---