Forum: Ruby on Rails Pop up menus - any ideas?

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-07 06:13
I've got a menu in which I have all of my categories as links. Each
category also has subcategories. I want to set it up so when you mouse
over the category the subcategories will pop up (to the right of the
main list, but that's just CSS). This is what I have so far:

<% for category in @categories %>
	<a href="#"
onmouseover="Element.show('subcategories_<%=category.name%>')">
	<%= link_to category.name, :action => 'category', :id => category %>
	<div id="subcategories_<%=category.name%>" style="display:none">
		<div id="indented_categories">
	<% for subcategory in category.subcategories %>
		<%= link_to subcategory.name, :action => 'category', :id =>
subcategory %>
	<% end %>
	</div></div>
<% end %>

Problems:

Obviously, the subcategories will never dissappear. Is there a
onmouseleave action I could wrap around it?

The pop-up is inconsistent. Not sure about this one. I think it's
because the <a href ... > isn't actually part of the link.

Any ideas or thoughts? Anything would be welcome.

Thanks,

Adam
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-07 06:24
(Received via mailing list)
Are you avoiding the simpler use of the CSS :hover pseudo-class for a
reason? There are ligit Internet Explorer reasons for avoiding it but
a well known workaround for IE exists.

On 4/6/06, Adam Bloom <admanb@gmail.com> wrote:

> Obviously, the subcategories will never dissappear. Is there a
> onmouseleave action I could wrap around it?

after the onmouseover attribute use an onmouseout attribute

onmouseout="Element.hide(


> The pop-up is inconsistent. Not sure about this one. I think it's
> because the <a href ... > isn't actually part of the link.

Inconsistent how?

Peter
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-07 06:45
>> The pop-up is inconsistent. Not sure about this one. I think it's
>> because the <a href ... > isn't actually part of the link.
>
> Inconsistent how?

It seems to work randomly. When I add the onmouseout part the menu will
flash on the screen but never stay.

When I change:

<%= link_to category.name, :action => 'category', :id => category %>

to some normal html code, it works as expected.

Thanks,

-Adam
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-07 06:54
(Received via mailing list)
On 4/6/06, Adam Bloom <admanb@gmail.com> wrote:


>
> <%= link_to category.name, :action => 'category', :id => category %>
>
> to some normal html code, it works as expected.

What is the difference in resulting html between the above link_to and
the normal html? Look in the browser "view source". Something must be
different there.

Peter
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-07 07:02
With the link_to it looks like this:

<a href="#" onmouseover="Element.show('subcategories_Care management')"
		   onmouseout="Element.hide('subcategories_Care management')">
	<a href="/providers/category/3">Care management</a>

...

</a>

Without it's just:

<a href="#" onmouseover="Element.show('subcategories_Care management')"
				onmouseout="Element.hide('subcategories_Care management')">
	Test

...

</a>

So the difference is the <a href ...> inside there.

I'm going to take a look at the :hover method. That's what I used on the
older version of the site, but we ran into problems with the javascript
workaround for IE (it didn't work) after I made some small change to the
CSS.

-Adam
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-07 07:19
(Received via mailing list)
Adam,

<% for category in @categories %>
       <a href="#"
onmouseover="Element.show('subcategories_<%=category.name%>')">
       <%= link_to category.name, :action => 'category', :id => category
%>
       <div id="subcategories_<%=category.name%>" style="display:none">
               <div id="indented_categories">
       <% for subcategory in category.subcategories %>
               <%= link_to subcategory.name, :action => 'category', :id
=>
subcategory %>
       <% end %>
       </div></div>
<% end %>


Are you properly closing the <a href="#" tag with an </a>?

Why do you have two <a> tag's in the first place? Either change the
outer one to some other tag.
Or maybe you want to move the onmouseover and onmouse out attributes
into the link_to with is something like this

               <%= link_to subcategory.name, {:action => 'category', :id
=>
subcategory}, {:onmouseover=>'do stuff', :onmouseout=>'do other'} %>

BTW, if you are using the outer <a> just to make the cursor look like
a pointer you can do that with css for any element. Set the pointer
attribute.

pointer:cursor;


- Peter
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-07 07:51
> Are you properly closing the <a href="#" tag with an </a>?

I wasn't, but I fixed that. :)

> Or maybe you want to move the onmouseover and onmouse out attributes
> into the link_to with is something like this
>
>                <%= link_to subcategory.name, {:action => 'category', :id
> =>
> subcategory}, {:onmouseover=>'do stuff', :onmouseout=>'do other'} %>

That's exactly what I want to do. However, I don't know how to embed the
javascript command Element.show in the Ruby tag. >_> I remember I tried
this before for a different part of the app, and never figured it out.

Sorry for troubling you, and thanks again.

-Adam
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-07 20:57
(Received via mailing list)
On 4/6/06, Adam Bloom <admanb@gmail.com> wrote:

<%= link_to subcategory.name, {:action => 'category', :id
> > =>
> > subcategory}, {:onmouseover=>'do stuff', :onmouseout=>'do other'} %>
>
> That's exactly what I want to do. However, I don't know how to embed the
> javascript command Element.show in the Ruby tag. >_> I remember I tried
> this before for a different part of the app, and never figured it out.

i THINK YOU just put it where the do stuff and do other is in my snip
above. look in the link_to documentation.

Peter
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-08 01:25
> i THINK YOU just put it where the do stuff and do other is in my snip
> above. look in the link_to documentation.
>
> Peter

That's what I thought too, but I get a syntax error when I try to do a
straight copy-paste. Could it be because I'm trying to run JS commands
through Rails?

-Adam
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-08 03:07
(Received via mailing list)
On 4/7/06, Adam Bloom <admanb@gmail.com> wrote:
> > i THINK YOU just put it where the do stuff and do other is in my snip
> > above. look in the link_to documentation.
> >
> > Peter
>
> That's what I thought too, but I get a syntax error when I try to do a
> straight copy-paste.

what is the error?
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-08 07:56
> what is the error?

It's long, but this is the top line:

compile error
/Users/admanb/listings/public/../config/../app/views/providers/main.rhtml:43:
syntax error
				{:onmouseover =>
'Element.show('subcategories_<%=category.name).to_s); _erbout.concat
"')', \n"
6ec1e89eef5ce09fbfa56be5b6dd17b5?d=identicon&s=25 Adam Bloom (admanb)
on 2006-04-08 07:57
Adam Bloom wrote:
>
>> what is the error?
>
> It's long, but this is the top line:
>
> compile error
> /Users/admanb/listings/public/../config/../app/views/providers/main.rhtml:43:
> syntax error
> 				{:onmouseover =>
> 'Element.show('subcategories_<%=category.name).to_s); _erbout.concat
> "')', \n"

This is what the code for that looks like:

'Element.show('subcategories_<%=category.name%>')'
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-08 13:08
(Received via mailing list)
you can't have <%%> tags nested. Inside double quotes you can do can
do something like

<%= .............all the other
stuff............."${category.name}".................more stuff...%>


you need to use the " and ' pairs correctly. which may mean you have
to escape some inner double quotes if you need them eg \".

This should make it work.

also in the example you just showed the <%= was not paired correctly
with a %>

Peter




 {:onmouseover =>
> > 'Element.show('subcategories_<%=category.name).to_s); _erbout.concat
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-04-08 13:11
(Received via mailing list)
On 4/8/06, Peter Michaux <petermichaux@gmail.com> wrote:
> you can't have <%%> tags nested. Inside double quotes you can do can
> do something like
>
> <%= .............all the other
> stuff............."${category.name}".................more stuff...%>


Sorry, that dollar sign is a typo. Try

> <%= .............all the other
> stuff............."#{category.name}".................more stuff...%>

Peter
This topic is locked and can not be replied to.