By schlonkey on

Hello,

I have been trying to integrate the Superfish menu's into my Drupal 7 site. All tutorials I have found state to snippet to the head of your page.tpl.php file:

<script type="text/javascript" >
  $(document).ready(function() {
    $("#superfish ul.menu").superfish();
  }); 
</script>

No matter what I have tried/researched, I am unable to do this in Drupal 7. I have been able to integrate this in Drupal 6 successfully.

If anyone is able to provide guidance it would be greatly appreciated!

Thank you,
Shaun

⋅ Categories: Drupal 7.x

Comments

Danny Englander’s picture

Danny Englander
(he/him)
commented

A few comments. First, Drupal 7 uses html.tpl.php for anything in the head area:

http://api.drupal.org/api/drupal/modules--system--html.tpl.php/7

...which is very different than drupal 6 which integrated that in page.tpl.php. Most themes won't need this as it's a core file & does not need to change much. (An example of needing to override this file would be if you were making an HTML 5 theme for example.) That being said you can copy the core file and put it in your theme folder to override. I'm not a Javascript expert but I think the way you want to add scripts is outlined on this page:

http://drupal.org/node/756722

So perhaps make a .js file out of your code above (or a modified version that will work in Drupal 7) and just add that file with one of the methods described in the link above.

The other option is to use a module like Superfish or Nice Menus which will do all the heavy lifting for you.

http://drupal.org/project/superfish
http://drupal.org/project/nice_menus

Both are available for Drupal 7. I hope this helps.

Danny Englander | Twitter | Instagram

schlonkey’s picture

schlonkey commented

That you very much highrockmedia! It must have been an extremely long day yesterday as I couldn't get the modules to work for the life of me which is why I was trying to do manually. And this morning within about 45 minutes, I have been able to get the Superfish module to work.

Either way, thank you for your advice! Your assistance is greatly appreciated.

Katy J’s picture

Katy J commented

I'm going crazy trying to work out why this menu won't work. I think I'm confusing things by doing some of manual instructions from http://adaptivethemes.com/add-superfish-drop-menus-to-any-theme-easily as well as having the module and library installed. If I have the superfish library in /sites/all/libraries and the module in /sites/all/modules and the sf folder containing the css/js/images in my theme folder then I should be set up to go, is that right? I'm using AT Timeout, an Adaptivetheme subtheme.

So then I use the existing primary links menu and leave parent items expanded and place the menu (via blocks) in the superfish region?

I can't see the superfish region in my page.tpl.php and have tried adding it in manaully but that didn't help.

Have you got any advice about where I might possibly be going wrong? Or has anyone got any tips/ideas for me?

Thanks a lot!

Katy J’s picture

Katy J commented

I've got the menu in the right place (was using the Drupal 6 mark up for adding the region) but it's only working with css and it's not pulling through the js at all. Not adding classes, no animation.... I guess it's because I haven't worked out how to call the

$(document).ready(function() { $("#superfish ul.menu").superfish(); });

Can someone please explain in plain English how I get this in the head when there is no head tag in my page.tpl.pho. I will be sooo grateful!

Danny Englander’s picture

Danny Englander
(he/him)
commented

Please see my comment above (http://drupal.org/node/1019896#comment-3922876), as I mention the head tag in Drupal 7 is handled by html.tpl.php which is a core file and not in most themes. You can copy that file into your theme, clear cache and then add stuff. There are also other methods, you may want to take a look at this: http://drupal.org/node/756722

Danny Englander | Twitter | Instagram

Danny Englander’s picture

Danny Englander
(he/him)
commented

Hmm, this might help you also:

http://drupal.org/node/1018908

Danny Englander | Twitter | Instagram

erode’s picture

erode commented

Is it any coincidence that the default Bartik theme doesn't include the *-html.tpl.php file? I've been shoving script and css in through page.tpl.php using drupal_add_js() and drupal_add_css(). When desperate, I also used drupal_add_html_head(). Would you recommend that I create this html.tpl.php file?

Danny Englander’s picture

Danny Englander
(he/him)
commented

Is it any coincidence that the default Bartik theme doesn't include the *-html.tpl.php file?

Are you implying that you are modifying Bartik? If so then I would avoid that as it's a core theme and any Drupal upgrade will overwrite your changes. Either copy that theme into your theme folder /sites/all/themes and rename it or likewise create a subtheme which is probably the better idea.

Would you recommend that I create this html.tpl.php file?

Most likely yes, if you are doing those types of changes then simiply copy the core html.tpl.php to your theme's folder and clear your cache. Note that you can also add JS files in your theme's .info file as well but it might depend on what you are trying to accomplish.

Danny Englander | Twitter | Instagram

erode’s picture

erode commented

Wow, I am disappointed I did not know that. Thanks for informing me before something tragic happened.

You can tell how new I am.

Also, I discovered the reason I was unable to use page-front.tpl.php! It's something a beginner would definitely do, so I'll throw this out there:

If you've been mucking around in Views and you create a "front page" emulator, disable it, because it overrides the page-front.tpl.php function. Hopefully that helps someone out there.

Hadi Farnoud’s picture

Hadi Farnoud commented

I'm looking for a method without editing theme files (in order to keep it theme-independent). I found a really cool project called Add to Head
unfortunately, this module is not D7 compatible! do you know any other module that gives me just that?

Lloyd’s picture

Lloyd commented

Add to Head was great in D6. Would love to have something like that in D7,

koppie’s picture

koppie commented

Hey guess what there's a D7 version now!

Novitsh’s picture

Novitsh commented

I would still suggest drupal_add_js() in your template / module file.

aryashreep’s picture

aryashreep commented

You can add javascript to head by using theme_preprocess_html()

function theme_preprocess_html(&$var) {
      $script = array(
        '#tag' => 'script',
        '#attributes' => array('type' => 'text/javascript'),
        '#value' => 'Add your javascript here',
       );
       drupal_add_html_head($script, 'script');  
    }
MediaFormat’s picture

MediaFormat commented 
function theme_preprocess_html(&$var) {
      $script = array(
        '#tag' => 'script',
        '#attributes' => array(
			'type' => 'text/javascript',
			'src' => 'https://example.com/myscript.js'
		),
        '#value' => '',
       );
       drupal_add_html_head($script, 'script');  
    }
Patricia_W’s picture

Patricia_W commented

the site I manage has an old <script> file in the <head> area of the HTML. I can't find it in the theme  html.tpl.php

Where else could it be added?

Patricia W

MediaFormat’s picture

MediaFormat commented

It may also have been added by a module!

Patricia_W’s picture

Patricia_W commented

I searched for one but couldn't find it.

Patricia W

MediaFormat’s picture

MediaFormat commented

It may have been added in the theme .info file, or in the template.php file.

Patricia_W’s picture

Patricia_W commented

Thanks for replying but I can't find the script in either of those files.

Patricia W

ahmed_maruf’s picture

ahmed_maruf commented

function drupal_add_js add js to head by default.
Ref: https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_...