drop down hover bootstrap

22 views
Skip to first unread message

Joe Guerra

unread,
Nov 10, 2017, 3:53:24 PM11/10/17
to Ruby on Rails: Talk
I'm trying to follow this ...

https://github.com/CWSpear/bootstrap-hover-dropdown

and add hover to my drop down menus.  

But, I'm not sure what to do with the javascript in this situation?  Do I add it to the application.js manifest or do I add the requirements in the application.html?

Thanks,
Joe

Walter Lee Davis

unread,
Nov 10, 2017, 4:08:54 PM11/10/17
to rubyonra...@googlegroups.com
Reading the Usage section of the README, it appears that all you need to do is to add this file to your vendor/assets/javascripts folder, add a reference to this script into your application.js manifest, then add the data-hover="dropdown" attribute either in place of data-toggle="dropdown" or alongside it (so both events cause the dropdown to appear).

If you're adding this to your link with the normal Rails view helpers, then you already have

link_to(nil, 'Account', class: 'dropdown-toggle', data: { toggle: 'dropdown' })

Change that to read

link_to(nil, 'Account', class: 'dropdown-toggle', data: { toggle: 'dropdown', hover: 'dropdown' })

and you're done.

Walter

>
> Thanks,
> Joe
>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/6df61ead-8b0b-4ce7-9981-4aefef7d77b6%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Joe Guerra

unread,
Nov 10, 2017, 4:16:55 PM11/10/17
to Ruby on Rails: Talk
ok this is what I tried in one of my menus

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" role="button" aria-haspopup="true" aria-expanded="false">Categories<span class="caret"></span></a>
<ul class="dropdown-menu">
<% all_categories.each do |category| %>
<li><%= link_to category.name, category_path(category) %></li>
<% end %>
<li role="separator" class="divider"></li>
<li><%= link_to "All Categories", categories_path %></li>
</ul>
</li> I added 'data-hover="dropdown" data-delay="1000"' to the href tag.

Walter Lee Davis

unread,
Nov 10, 2017, 4:23:35 PM11/10/17
to rubyonra...@googlegroups.com
That looks correct. Did it work?

Walter
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/f19f5f74-84a5-4269-9337-f155f2e68c0c%40googlegroups.com.

Joe Guerra

unread,
Nov 10, 2017, 4:25:54 PM11/10/17
to Ruby on Rails: Talk
No, it didn't work :(

Mugurel Chirica

unread,
Nov 10, 2017, 5:41:17 PM11/10/17
to rubyonra...@googlegroups.com
Open the developer console (right click -> inspect in Chrome), and see if you get any related errors.

Alternatively try and use the suggested command from the Readme:
$('.dropdown-toggle').dropdownHover(options);

See if that helps in any way.

Joe Guerra

unread,
Nov 10, 2017, 7:10:51 PM11/10/17
to Ruby on Rails: Talk
Ok, I got it working.  For some odd reason I couldn't paste that hover javascript file into my javascript folder.
So, I created a new javascript file (using rubymine) and then pasted the actual code into it and saving it with the same name.

I don't know if that's a permissions problem, but it put the file in the root folder of my app (which I've deleted now).

Thanks,
Joe

Joe Guerra

unread,
Nov 11, 2017, 10:11:59 AM11/11/17
to Ruby on Rails: Talk
hmm,  not so fast.

It is working initially, but once I've clicked on a menu option in the drop down - the hover dropdown stops working.

:(

Mugurel Chirica

unread,
Nov 11, 2017, 10:26:48 AM11/11/17
to rubyonra...@googlegroups.com
Did you try the steps I suggested?

Joe Guerra

unread,
Nov 11, 2017, 10:41:52 AM11/11/17
to Ruby on Rails: Talk
ok, I just tried $('.dropdown-toggle').dropdownHover(options); and I get ...

VM155:1 Uncaught ReferenceError: options is not defined
    at <anonymous>:1:37

(but the hover drop down is working)...  If I click on a link in the menu

the hover menu stops working, I check the console and I've got plenty of turbo link errors.

Mugurel Chirica

unread,
Nov 11, 2017, 11:05:48 AM11/11/17
to rubyonra...@googlegroups.com
The best place to start is to completely read the Readme section for the plugin you are trying to use, https://github.com/CWSpear/bootstrap-hover-dropdown and after that try again and implement it on your website.

Check the console without the plugin to see if you get any turbo links errors, if you don't get any error proceed with integrating the plugin with your new knowledge from the Readme document.

If it's not working, then check the console again, if you get any new errors you are probably missing something and need to fix those js errors (make sure you check the gem dependencies as well).


ok, I just tried $('.dropdown-toggle').dropdownHover(options); and I get ...
VM155:1 Uncaught ReferenceError: options is not defined
    at <anonymous>:1:37

Yes, that's true because I gave you the example from the Readme, you need to customise it for your code.

$('YOUR_CLASS').dropdownHover({YOUR_OPTION: VALUE});
Ex: $('.dropdown-toggle').dropdownHover({delay: 5000});

This will tell you if the JavaScript implementation was correct, if you can't make that work in the console it's probably that.


After following all of the above steps you still can't make it work, I'll ask for more details and try and help you get it working.

Cheers

Joe Guerra

unread,
Nov 11, 2017, 1:51:27 PM11/11/17
to Ruby on Rails: Talk
Ok, I just discovered if I reload the page hover will work.

Not sure why it's not totally reloading the page after menu items have been click (while hover is working).

Walter Lee Davis

unread,
Nov 11, 2017, 4:29:01 PM11/11/17
to rubyonra...@googlegroups.com
That's a signal that you are not reloading something via TurboLinks that you expect to be there. When a full page reload makes it work again, that means that something JS related in the page needs to observe the event 'turbolinks:load' rather than just the page:load.

document.addEventListener("turbolinks:load", function() {
// ...
});

Walter
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/8e19cf61-ee40-4ca3-947b-a420aa91939a%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages