Post by sunsys » Fri May 29, 2015 9:40 am

I have made some cosmetic changes in the top menu bar and now I would somebody to please help me out with a small problem that I face. Please see the image below.
selectandstay-1.jpg

selectandstay-1.jpg (22.33 KiB) Viewed 1692 times


I want that, after the user selects a "category"(shown in red box above) that selected "category" should remain highlighted even after the mouse has been moved away so that the user comes to know what "category" he has selected.
I hope I have explained it clearly. Can someone please show or guide me how to do this.

Thank You for your time.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by sunsys » Sun Jun 28, 2015 8:23 am

BUMP...
Really, nobody even after a month ?

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by deepvision » Sun Jun 28, 2015 1:58 pm

I can offer you only quick & dirty solution :)

1. in the /catalog/view/theme/default/stylesheet/stylesheet.css add:

Code: Select all

#menu .nav > li.active {
    background:#349ECA;
}
2. In the /catalog/view/theme/default/template/common/header.tpl
after

Code: Select all

<?php foreach ($categories as $category) { ?>
add

Code: Select all

          <?php
          $is_active = false;
          if(isset($_GET['path'])){
              list($category_id) = explode('_',$_GET['path']);
              if(preg_match('~&path='.$category_id.'(&|_|$)~',$category['href'])){
                  $is_active = true;
              }
          }
          ?>
change

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
to

Code: Select all

<li class="dropdown<?php if($is_active):?> active<?php endif;?>"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
and change

Code: Select all

<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
to

Code: Select all

<li<?php if($is_active):?> class="active"<?php endif;?>><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am

Post by deepvision » Sun Jun 28, 2015 3:20 pm

The javascript solution might be better:

1. Add the following code to the /catalog/view/javascript/common.js

Code: Select all

<script>
$(document).ready(function() {
    if(document.URL.match(/&path=(\d+)(_|&|$)/)){
        $('a[href$="path='+RegExp.$1+'"]').each(function(){
            $(this).parent().addClass('active');
        })
    }else if(document.URL.match(/[^/]+\/([^/]+)(\/|$)/)){
        $('a[href$="/'+RegExp.$1+'"]').each(function(){
            $(this).parent().addClass('active');
        })
    }
});    
</script>
2. Add the same styles as before to the /catalog/view/theme/default/stylesheet/stylesheet.css

Code: Select all

#menu li.active {
    background:#349ECA ;
}
Last edited by deepvision on Mon Jun 29, 2015 12:19 am, edited 2 times in total.

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am

Post by sunsys » Sun Jun 28, 2015 10:33 pm

@deepvision: Thank for your reply.

BTW the example is of OC-1564, and not of OC-20xx, I hope you got that. Now if I use your 2nd solution(java script) then I believe that 1st solution is not required. Well I have as you have posted but there is no effect, the blue box does not stay fixed when I choose category and move the mouse away.

PS: Please can you also give me a solution for the same for OC-2031.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by deepvision » Sun Jun 28, 2015 11:50 pm

Yes, the 1st solution is not required.
The 2nd one works fine with the OC-2031. Just make sure the menu background color is different from the active menu background in the new css.

P.S. Updated the javascript to work with SEO enabled URLs as well.
Last edited by deepvision on Mon Jun 29, 2015 12:19 am, edited 1 time in total.

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am

Post by deepvision » Mon Jun 29, 2015 12:03 am

The same javascript works for me in the latest 1.5.6.4
And here is the css code for the default 1.5.6.4 theme:

Code: Select all

#menu li.active >a{
    background:black;
    border-radius:5px;
}

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am

Post by sunsys » Mon Jun 29, 2015 11:18 am

deepvision wrote:The same javascript works for me in the latest 1.5.6.4
And here is the css code for the default 1.5.6.4 theme:

Code: Select all

#menu li.active >a{
    background:black;
    border-radius:5px;
}
Thanks a ton deepvision, it is working 100% perfect in both versions of OC, no issues till now.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by sunsys » Fri Oct 02, 2015 9:27 am

@Deepvision: This worked fine for 3 months and I feel that I must have added some ext that has stopped this highlight and stay function from working and I don't know what I have done to cause this, I have PM'd my site url to you, please can you kindly just have a look as to what could have stop working.

Thank you for your time.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by deepvision » Sat Oct 03, 2015 1:00 pm

I don't see any PM

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am

Post by sunsys » Sun Oct 04, 2015 2:04 am

deepvision wrote:I don't see any PM
You must have received a mail from opencart forums that you have a new PM also you can login to your pm box and you will see it. I have just checked and seen that you have not yet retrieved my PM.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by deepvision » Thu Oct 15, 2015 12:10 pm

sunsys wrote:
deepvision wrote:I don't see any PM
You must have received a mail from opencart forums that you have a new PM also you can login to your pm box and you will see it. I have just checked and seen that you have not yet retrieved my PM.
No, there is no unread emails in my PM. Every time I get a notification, then login and read one.
None from you. Are you sure it is for me? :) Or maybe there is a forum bug.

ImageImageImage


User avatar
Active Member

Posts

Joined
Tue May 19, 2015 1:03 am
Who is online

Users browsing this forum: No registered users and 79 guests