By Jimmel on

Hi

I am llooking at getting a simple jquery plugin working just to see how jquery can be used in drupal

I have a js. file in the theme folder in which I have place the following jquery code

Drupal.behaviors.shadows = function (context) {
 	// Shawdow maker
  $('.block').boxShadow( 10px, 10px, 5, #888;);
};

This is from the shawdow box plugin in the jquery library. It is just meant to show up on blocks as a experiment.

But it does not work. Anyone have any idea of where I am going wrong.

Thanks in advance

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

How are you including the shadow box plugin and your own js code?

Jimmel’s picture

Jimmel commented

I am using the shadow box code inside of the script.js file, which drupal should pick up and pointing the css selector in the shadow box code to .block on the theme page.

It is not my own code but shadow box code. I just want it to work and at the moment it does not. I want a simple explaination of why it does it does not work as I cannot find a simple tutorial of how jquery css is selected from within the script.js file on the internet.

Other that that i don't really understand your question.

James

monteco’s picture

monteco commented

Did you include script.js in your theme.info? If you haven't, Drupal won't pick it up.
You'll want to add the following line to your theme.info file:
scripts[] = script.js
And then clear your site's cache under admin/settings/performance.

Jimmel’s picture

Jimmel commented

I have other scripts included in the script.js file and they work ok on the theme. script.js is the standard js. file that drupal automatically recognises in drupal 6 (its now changed in drupal 7). Thinking about it maybe they are javascript and not jquery.

Here are the ones that work. 

// Wrap span tags around the anchor text in the primary menu.
$(document).ready(function(){
  $("#navbar ul li a")
  .wrapInner("<span>" + "</span>");
});

//togg
Drupal.behaviors.togg = function (context) {
  $('a#togg-link2:not(.togg-processed)', context).addClass('togg-processed').each(function () {
    $(this).click(function() {
      $("div#togg2").toggle(400);
      return false;
    });
  });
};

I have found this on another thread.
"If your code relies on another .js file, then that .js file needs to be added to the script[] array before your code. So, if your script.js relies on innerfade.js then you'll want something like
script[] = innerfade.js;
script[] = script.js;"

Could it be that the shadow box .js file needs to placed in the theme file and that the code i am using in the script.js file is relying on this file to pick up the function call. And that all plugin js file need to be palce in drupal in order for them to work. I really am looking for a basic tutorial on how jquery can be incorporated into drupal without using the jquery modules which don't utilise all of the jquery plugins.

James

monteco’s picture

monteco commented

Thanks for the insight--I never knew that Drupal would automatically detect script.js. I've been manually adding it all this time. *bangs head on desk*

I couldn't imagine that it would want you to manually add every single plugin js file to theme.info, that would be ridiculous. Have you found this handbook page yet -- http://drupal.org/node/121997 -- Javascript in Drupal? There's a subpage, "Adding JavaScript to your theme or module," that talks about jquery.

Jimmel’s picture

Jimmel commented

Yes, i have had a look at these pages but it does not answer what i want. There does not seem to be a decent explaination of how jquery integrates with drupal out there. Which is strange as people seem to rave about jquery within drupal as being a distinct advantage over other CMS.

nevets’s picture

nevets commented

There are two ways jQuery integrates with Drupal

1) If you have any script files defined, jQuery plus the script(s) are included as part of the page. This works well when you want the script run on every page.

2) You can use drupal_add_js() to selectively add js files (this also results in jQuery being loaded). This works from modules and is the better choice when the element the script applies to is also selectively added to the page.

Note using either approach results in jquery.js automatically being added. Your code (or .info) needs to handle adding any other needed scripts.

Jimmel’s picture

Jimmel commented

nevets

So taking way :1 and assuming i know nothing about jquery within drupal (i always find that when you assume no knowledge, the explaination is better), do I place the jquery into the script.js file. Using the example in the original post could you tell where i am going wrong.

I am sure your expalination will not only help me but others aswell.

Jimmel’s picture

Jimmel commented

nevets

So taking way :1 and assuming i know nothing about jquery within drupal (i always find that when you assume no knowledge, the explaination is better), do I place the jquery into the script.js file. Using the example in the original post could you tell where i am going wrong.

I am sure your expalination will not only help me but others aswell.

JoeMcGuire’s picture

JoeMcGuire commented

Hi Jimmel,

I'm not too sure where you are going wrong. I tried to work with the jQuery box shadow class and didn't have any luck. But other than that it sounds like what you have should work. These are the files i used.

example.info 
name = example theme
description = a quick example to show how drupal can integrate with jquery in a theme
core = 6.x
version = 6.x-1.0
scripts[] = jquery.boxshadow.js
scripts[] = shadows.js
base theme = garland
engine = phptemplate
shadows.js

Currently on turns a block background red - let us know if you get shadows working

/**
 * @file shadows.css
 * Simple example of javascript being integrated with a drupal theme
 */
Drupal.behaviors.shadows = function(context) {
  $('.block', context).css('background-color', 'red');
}

http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

masagin’s picture

masagin commented

Hi Jimmel,

there are a few ways how to enable jquery in drupal:

1. Simply include script.js file in your theme's root folder. In this case, all the code has to be in this one file. What happens is that Drupal will accept the script.js file and automagically includes jQuery and drupal.js behind the scenes.

2. If you want to use jquery plugins, simply put it in your theme's folder (I recommend creating a js/ subfolder for that) and put this in your .info file:
scripts[] = js/jquery.plugin1.js
scripts[] = js/jquery.plugin2.js
scripts[] = script.js

It's important to put script.js there too in this case, because once you use script[] in your .info file, Drupal will no longer use script.js automatically. Anyway, jQuery and drupal.js will be included automagically again.

3. Use drupal_add_js(...) in your template/module/whatever. jQuery and drupal.js will be auto-included once again. :)

masagin’s picture

masagin commented

There's one more thing I wanted to point out. Don't forget to use context when dealing with Drupal.behaviors, otherwise things may break:

Drupal.behaviors.shadows = function (context) {
  // Shawdow maker
  $('.block', context).boxShadow( 10px, 10px, 5, #888;);
};
Jimmel’s picture

Jimmel commented

Bganicky

Thanks for the reply.However when i put your above code into the script.js file. it still does nothing. according to the page source code it seems to be recognising the script.js file but not the shadow function.

All

I have now bought Jquery and drupal from pkt publishing and am due to go to a drupal weekend conference for two jquery lectures tomorrow where hopefully i will get some insight. If i find the answer i will post it up here.

James

Jimmel’s picture

Jimmel commented

Ok. I have got other jquery plugins workiing by
1: Putting the plugins in the theme folder. (you could also make a js sub folder and put them in there)
2: Placing each plugin in the .info file such as
scripts[] = jquery.corner.js
3: Also place the script.js in the .info file such as; scripts[] = script.js. If it is not in there then the varibles won't load, This happens when you put in other scripts in the info file. If you don't put other script files in the .info file then drupal automatically inserts it.
4: Place the jquery changes you want to make in the script.js file in the theme folder such as

$(window).load(function(){
      $("#a").corner("bevel 20px")
    });

Where #a is the css ellement you want to change. How the code is loaded also makes a difference.

However the using this proceedure the boxshadow plugin still does not work. It must have someting to do with the wrappers around the jquery code that drupal uses. I am still not up to scratch with how each one of these makes a difference. Although saying that the code does not work in firefox console either without the wrapper. So i do not know. I am taking it that there is something wrong with the boxshadow pluginat this moment.

If you have anything more to put to this, please go ahead.

masagin’s picture

masagin commented

Do you use Firebug? Does it throw some errors or something?
You can also try writing
console.log(jQuery.fn.boxShadow); in your script or in the console and it should return the function if it does exist.

masagin’s picture

masagin commented

Also, the shadowBox plugin is supposed to work in IE only, encouraging you to use CSS box-shadow property in modern browsers instead.