Pop up menus - any ideas?


#1

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 %>

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



<% for subcategory in category.subcategories %>
<%= link_to subcategory.name, :action => ‘category’, :id =>
subcategory %>
<% end %>

<% 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


#2

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


#3

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 B. removed_email_address@domain.invalid 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


#4

On 4/6/06, Adam B. removed_email_address@domain.invalid 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


#5

Adam,

<% for category in @categories %>

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



<% for subcategory in category.subcategories %>
<%= link_to subcategory.name, :action => ‘category’, :id
=>
subcategory %>
<% end %>

<% end %>

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

Why do you have two 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 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

#6

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

I wasn’t, but I fixed that. :slight_smile:

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


#7

On 4/6/06, Adam B. removed_email_address@domain.invalid 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


#8

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


#9

On 4/7/06, Adam B. removed_email_address@domain.invalid 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?


#10

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"


#11

Adam B. 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%>’)’


#12

With the link_to it looks like this:


Care management

Without it’s just:


Test

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


#13

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


#14

On 4/8/06, Peter M. removed_email_address@domain.invalid 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