How to make WHMCS 5.0 Client Area menu tabs automatically open on hover?

[VertigoAeroplanes]

Hi,

 

How can I make the Client Area menu tabs automatically open on hover with WHMCS 5.0? I don't like the fact that you have to click on each item for it to show the dropdown menu.

 

Thanks!

[tsiedsma]

Edit whmcs.js in the default/js folder.

 

Change

jQuery(".dropdown-toggle, a.menu").click(function(e) {

to

jQuery(".dropdown-toggle, a.menu").mouseover(function(e) {

[Si]

Edit whmcs.js in the default/js folder.

 

Change

jQuery(".dropdown-toggle, a.menu").click(function(e) {

to

jQuery(".dropdown-toggle, a.menu").mouseover(function(e) {

 

That works until they login. For some reason clients who are logged in have to click on the menu items to get them to expand.

[tsiedsma]

That works until they login. For some reason clients who are logged in have to click on the menu items to get them to expand.

 

Clear your template cache. The code doesn't change just because you are logged in!

[Si]

Clear your template cache. The code doesn't change just because you are logged in!

 

Yea that was the first thing I did, and then scanned the code trying to find another call to the 'loggedin' menus but for the life of me couldn't see one. Will try again. Hmmm

[Si]

Nope, def not helping with the cache cleared. Strange one. Will look at it at another time when I've time. Thanks anyway.

[tsiedsma]

Strange, I made that one change and it works great for me.

[swg]

Strange, I made that one change and it works great for me.

 

Worked for me too.

[Si]

I 'think' it has something to do with it working in http: and not working in https: which is what my whole client area is in. As soon as I go https, it stops working.

[swg]

Our entire client area is ev-ssl, so that isn't it. Are you sure you made the change to the correct template you are using?

[tsiedsma]

It has nothing to do with SSL. All you're doing is changing the event trigger from a click to mouseover. If you make that change, it will just work.

[Si]

It has nothing to do with SSL. All you're doing is changing the event trigger from a click to mouseover. If you make that change, it will just work.

 

I don't think it's that simple. And I believe it has something to do with SSL.

 

If I go to the GENERAL tab in WHMCS and remove my SSL url from the part:

 

WHMCS SSL System URL

 

it works. As soon as I put the ssl url back in, it stops working. It works in non-SSL, and stops working in SSL.

 

Weird I know.

[Si]

Got it. It's a firefox issue.

 

It works fine in Safari and Opera. Not in Firefox 8.0.1

 

Haven't tried IE.

[zomex]

Got it. It's a firefox issue.

 

It works fine in Safari and Opera. Not in Firefox 8.0.1

 

Haven't tried IE.

 

That's strange, I would have expected Firefox to work considering they pride themselves on web standards.

 

I'll probably make this change too.

[shops-a-lot]

I have just made this change.

 

I'd like to ask how you guys handle your custom file changes when it is time to upgrade? Do you have to keep your own changelog to keep up with your customizations?

[tsiedsma]

I have just made this change.

 

I'd like to ask how you guys handle your custom file changes when it is time to upgrade? Do you have to keep your own changelog to keep up with your customizations?

 

I created a module that compares your files to the same version of WHMCS so you can make a list of what files were modified. I take that info and then compare the files to apply the changes to the new files in the latest version.

[mk1200]

I checked whmcs.js in 5.2.3 and dropdown-toggle isn't there. Anyone know how to make mouseovers work in the latest version?

[Maher Khamiss]

This worked for me. I'm on V.8.6.

I added this to the header.tpl right before the </head> Got it from this article

<style>
    .dropdown:hover .dropdown-menu{
        display: block;
    }
    .dropdown-menu{
        margin-top: 0;
    }
</style>
<script>
$(document).ready(function(){
    $(".dropdown").hover(function(){
        var dropdownMenu = $(this).children(".dropdown-menu");
        if(dropdownMenu.is(":visible")){
            dropdownMenu.parent().toggleClass("open");
        }
    });
});     
</script>

 

[Martin Soluce]

@Maher Khamiss  Thanks it worked like breeze.