drop down hover bootstrap

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

I'm trying to follow this ...

GitHub - mdbootstrap/bootstrap-hover-dropdown: An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

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?

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

ok this is what I tried in one of my menus

  • Categories
      <% all_categories.each do |category| %>
    • <%= link_to category.name, category_path(category) %>
    • <% end %>
    • <%= link_to "All Categories", categories_path %>
  • I added 'data-hover="dropdown" data-delay="1000

    "’ to the href tag.

    That looks correct. Did it work?

    Walter

    No, it didn’t work :frowning:

    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.

    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

    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.

    :frowning:

    Did you try the steps I suggested?

    ok, I just tried $(‘.dropdown-toggle’).dropdownHover(options); and I get …

    VM155:1 Uncaught ReferenceError: options is not defined

    at :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.

    The best place to start is to completely read the Readme section for the plugin you are trying to use, GitHub - mdbootstrap/bootstrap-hover-dropdown: An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. 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

    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).

    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