[Addon} Superfish Categories Box

[♥joli1811]

I think the latest migrate fixes the fancy box issue at least for me solved that by placing the latest jquery-migrate-1.2.1.min.js" just below the jquery-ui-1.8.22.min.js

 

if you put below the fancy box the fancy box will break

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webwinkel het Varaantje</title>
<base href="http://www.osc-design.com/holland/" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/pallets/minified/jquery-ui.min.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>
<script type="text/javascript" src="ext/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484
if ( $.attrFn ) { $.attrFn.text = true; }
</script>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-nl.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['nl']);
</script>
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="pallet.css" />
 <script type="text/javascript" src="ext/jquery/superfish/js/jquery.hoverIntent.minified.js"></script>
 <script type="text/javascript" src="ext/jquery/superfish/js/superfish.js"></script>
 <script type="text/javascript" src="ext/jquery/superfish/js/supersubs.js"></script>
 <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish.css" />
 <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish-vertical.css">

 <script type="text/javascript">
   jQuery(document).ready(function(){
  jQuery('ul.sf-menu').superfish({
    animation: {height:'show'},   // slide-down effect without fade-in
    delay:	 1200			   // 1.2 second delay on mouseout
  });
   });
 </script>

 

Regards

Joli

[Eduardo9350]

The script has a bug:

When I make a click on the product image it opens a new window.

[♥joli1811]

Nothing to do with superfish works perfectly Fancy Box bugs would be a different topic and probably do not belong in the superfish thread

 

it is a problem with the latest jquery versions read my post above for a possible fix or downgrade the jquery another option the newest fancy box files that works are available on git hub but I believe they are now commercial.

Regards

Joli

[Roaddoctor]

I'm using the responsive Usemantic CSS Framework, it is like 960gs but grid based on %'s.

Is it possible to have the width of the categories match the full width of the (varying size) column,

I fiddled with the css but couldn't seem to find where that is controlled. I know very little css beyond the basics. I tried adding some class statements but it got messy.

 

I like superfish over categories accordion, but I'm finding it more difficult getting superfish to behave elegantly on the responsive design..

 

Thank you in advance for any advice,

Dave

[♥joli1811]

Hi David

 

never tested but have a look

 

https://github.com/AmberJune/superfish-responsive-mobile-friendly

 

I know I used the css sometime in the past a lot of the px were changed em

 

Regards

Joli

[Roaddoctor]

Thanks!

Just had to change this in superfish.css

.sf-menu li {
/* background: #BDD2FF;  */
*white-space: nowrap; /* no need for Supersubs plugin */
white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
 /*  min-width: 148px; *//* Make the top-level categories fit in the column width */
   width: 100%;  /* for full responsive width */

 

When sized to mobile the category blocks now stack nicely, but if you tap a category the fly out goes off page to the right.

 

Thinking about it, it seems accordion menu is just structured better for narrow screen mobile...back to the dungeon for me and see if I can mobilize this somewhat

 

Thx

[Digibooks]

Hi and thanks for picking up my random query in General Addons :)

 

I have changed the width of the SUperfish menu successfully. I now have the problem of changing the arrow color. Currently I am using the AMY grey template bought from one of the OSC partners and the Supertfish menu bars are very light with white arrows which you cannot really see.

 

I have to say that I really struggle with the way templates / colors work in OSC!!!!!! Any pointers please would be a great help.

 

Thanks

Alan

Edited April 25, 2014 by Digibooks

[♥Tsimi]

First you need to know the color codes that are used in the amy template. Look for a custom css file or contact the template seller to get the color codes.

next look for the superfish.css file inside the catalog/ext/jquery/superfish/css/ folder. (instead of catalog you might have a different name)

in that file you have to play around with the background color codes and look for the sf-arrows classes.

 

I have to say that I really struggle with the way templates / colors work in OSC!!!!!!

 

It's not so difficult once you get the hang of it. It's basically all css.

 

http://www.w3schools.com/css/default.asp

Edited April 25, 2014 by Tsimi

[Digibooks]

OK - Thanks Tsimi - I'm beginning to get it through trial and error! My understanding of CSS and all these different browsers is clearly not as good as yours :) I have worked out where to change for IE8 and other browsers.

 

Thank you all here on the Superfish add-on topic - finally a group that actually talks to us newbies sensibly :)

[♥joli1811]

Was just messing about the code below turns my arrows black if pasted to the bottom of superfish css but my stylesheet is a bit custom but will give you an idea only tested with x 1 subcategory

 

.sf-arrows > li > .sf-with-ul:focus:after,

.sf-arrows > li:hover > .sf-with-ul:after,

.sf-arrows > .sfHover > .sf-with-ul:after {

border-top-color: black; /* IE8 fallback colour */

}

 

/* styling for right-facing arrows */

.sf-arrows li .sf-with-ul:after {

margin-top: -5px;

margin-right: -3px;

border-color: transparent;

border-left-color: #000000; /* edit this to suit design (no rgba in IE8) */

}

[Xpajun]

Hi,

 

First off many thanks for this mod - it's something I've been looking for for a long time...

 

I want to add images to the categories in this mod, so far all I have managed is the image name :rolleyes:

 

I've also tried using

tep_db_fetch_array($image)

to no avail

 

 

Can anyone point me in the direction I should be looking

 

Thanks

[♥kymation]

Which images? If you want the stock category images, you first need to retrieve the image name from the database in the get_subcategories() method:

 

 

          $categories_query_raw = "
            select
              c.categories_id,
              c.parent_id,
              cd.categories_name,
              c.categories_image

 

Then add it to the array:

 

 

              $categories_data[$index] = array (
                'id' => $categories_id,
                'name' => $categories['categories_name'],
                'parent_id' => $categories['parent_id'],
                'path' => $path_string,
                'image' +> $categories['categories_image']
              );

 

Then use that image name in the output. I don't know where in the box you want the image to show, so you will have to figure that out. You will need to add

 

 

            $output .= $category['image'];

 

somewhere in the format_data() method.

 

Regards

Jim

[Xpajun]

Thank you Jim - I was on  the right track - it was the output that I couldn't get right, I've now done it, I will post the code and a screen capture of how it looks when I reduce the images a littie ;)

[Xpajun]

As promised:

 

add

c.categories_image

to the select query:

          $categories_query_raw = "

            select

              c.categories_id,

              c.parent_id,

              c.categories_image,

              cd.categories_name

add    

'image' => $categories['categories_image'],

to the array:

            if ($categories_id != 0) {

              $categories_data[$index] = array (

                'id' => $categories_id,

                'name' => $categories['categories_name'],

                'image' => $categories['categories_image'],

                'parent_id' => $categories['parent_id'],

                'path' => $path_string

              );

finally add

$output .= '      <img src="images/' . $category['image'] . '">  ';

before or after the name output

          foreach( $data_array as $category ) {

            if( $category['parent_id'] == 0 ) {

              $output .= '    <li class="sf-menu sf-vertical ui-state-default ui-corner-all" onmouseover="$(\'a#categories\').removeClass(\'ui-state-default\').addClass(\'ui-state-hover ui-state-focus\');" onmouseout="$(\'a#categories\').addClass(\'ui-state-default\').removeClass(\'ui-state-hover ui-state-focus\'">' . PHP_EOL;

            } else {

              $output .= '    <li class="subcat">' . PHP_EOL;

            }

            

            $output .= '      <a href="' . tep_href_link( FILENAME_DEFAULT, $category['path'], 'NONSSL' ) . '">';

            $output .= '      <img src="images/' . $category['image'] . '">  ';

            $output .= $category['name'];

            $output .= '</a>' . PHP_EOL;

            if( $category['subcat'] !== false ) {

              $output .= $this->format_data( $category['subcat'], true );

            }

            $output .= '    </li>' . PHP_EOL;

          }

The result:

 

 

The logos are 30px high while the pics are 180px wide - you have to make the pics all the correct (similar) size

Edited July 31, 2014 by Xpajun

[Andromeda100]

This contribution is pretty awesome and helpful. I just would like to change the main design so that there is no relation to the jquery theme. Is it possible to edit files so that it becomes independent of the jquery?

[♥kymation]

You can override the theme by adding CSS code to your main /stylesheet.css, or by making changes to the /ext/jquery/superfish/css/superfish.css. There's also this line in the /includes/modules/boxes/bm_categories_superfish.php:

              $output .= '    <li class="sf-menu sf-vertical ui-state-default ui-corner-all" onmouseover="$(\'a#categories\').removeClass(\'ui-state-default\').addClass(\'ui-state-hover ui-state-focus\');" onmouseout="$(\'a#categories\').addClass(\'ui-state-default\').removeClass(\'ui-state-hover ui-state-focus\');">' . PHP_EOL;

You can remove every class starting with ui-state- to remove the jQuery UI styling completely, or replace those classes with your own if you want. Note that some of the spacing/formatting is dependent on those classes.

 

I recommend using Firebug in Firefox to see exactly what styles are applied to each element. You can also make temporary changes to those styles to see what the effect will be.

 

Regards

Jim

[♥joli1811]

Just done a few days ago add to stylesheet

 

.sf-menu.ui-state-default {
background: #07911e; /* YOUR COLOUR*/
border:1px solid #FBC5ED;
}

 

 

Regards

Joli

[nastea]

I'm sure I did something wrong or missed something. I had to merge the code in due to my customization. However it doesn't appear that superfish is pulling CSS correctly. 

Anyone?

[♥kymation]

Check that all of the required files in /ext are there and are being included correctly in the head section of the page.

 

Regards

Jim

[jcannaveno]

Hello,

 

I recently had a problem with site security and my SSL certificate as browsers have recently become more strict about this.  The problem was being caused by something on the site calling for jquery-1.9.1.min.js.  I don't know what element was calling on this jquery file.  I still had the file on my site I had just changed it to jquery-1.9.1.min.old after I loaded jquery-1.10.1.min.js.  When I changed it back to .js from .old it fixed my site security issue but now the arrows in my Superfish categories no longer show up.  Any ideas?

[♥kymation]

You can only have one version of jQuery in use. Look in your /includes/template_top.php for a line like this:

<script type="text/javascript" src="ext/jquery/jquery-1.11.1.min.js"></script>

That example shows the version number as 1.11.1. If you have one of those lines with the version number 1.10.1 and one with a version number 1.9.1, delete the line with  1.9.1.

 

Regards

Jim

[♥joli1811]

yeah there is a weird bug there somewhere seen it a few times I believe it is something to do with the positioning of the super fish scripts and css in template-top.php

 

Try first the js then the css and most important

<!-- <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({
        animation: {height:'show'},   // slide-down effect without fade-in
        delay:     1200               // 1.2 second delay on mouseout
      });
    });
  </script>/-->

this is where i think the bug is try swapping positions he should be before most of the other loads best just below

<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
  }
?>

well lets know  if you isolate i have 2 virtually identical template-top.php one has arrows one does not only difference is the position of css and scripts.

 

i was moving the css to the top because of page speeds when i lost my arrows :-  got them back though so happy chappy

 

using

 

<script type="text/javascript" src="ext/jquery/jquery-1.11.1.min.js"></script>

 

myself

 

but that should not make a difference

 

Regards

Joli

Edited November 10, 2014 by joli1811

[jcannaveno]

There is nothing in template_top.php that calls for the 1.9.1 jquery file.  But when I name it to .old it causes a security issue.  What else could be calling for that jquery file?

[♥kymation]

Nothing else should be calling for that file. Use View Source in your browser and search for jquery-1.9.1 on the page.

 

Regards

Jim

[jcannaveno]

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
  <script type="text/javascript" src="ext/jquery/superfish/js/jquery.hoverIntent.minified.js"></script>
  <script type="text/javascript" src="ext/jquery/superfish/js/superfish.js"></script>
  <script type="text/javascript" src="ext/jquery/superfish/js/supersubs.js"></script>
  <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish.css" />
  <link rel="stylesheet" media="screen" href="ext/jquery/superfish/css/superfish-vertical.css">
  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery('ul.sf-menu').superfish({
        animation: {height:'show'},   // slide-down effect without fade-in
        delay:     1200               // 1.2 second delay on mouseout
      });
    });
  </script>
<script type="text/javascript" src="ext/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/custom-theme/jquery-ui-1.10.3.css" />

 

This is the block of code that has the jquery-1.9.1.mis.js line in it.  But this is not in my template_top.php