Welcome to the Geeks & God Static Archive. Read more »

Jquery & Drupal Basics

2.833335

You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialize correctly.

Are you ready to drink a new flavor of tasty kool aid? This week we talk about jQuery, the JavaScript library bundled with drupal. If you've wondered how drupal has those resizing text fields, it's autocomplete fields, and drag and drop interfaces we need to look no further than jQuery. It's what's making the magic happen.

jQuery provides us a powerful way to write snippets of JavaScript that can do a whole lot. They can update sections of an already loaded webpage, like the homepage for Mothers Click or they can be used to create some advanced functionality, like the htmlbox wysiwyg editor.

In this weeks episode we give an overview of what jQuery is and talk about how to use it from within drupal. We thought some of the material needed some examples for you, our listeners, to see. You can find those examples in the article "jQuery and Drupal" on InnovatingTomorrow.net.

Killer Episode!

Killer Episode! As someone who experimented with (and eventually threw up my hands in disgust) JavaScript in the late '90's, jQuery has really attracted my interest!

While reading about the amazing Eureka! Science News, I was struck by:

"...don’t forget that a module has to be loaded completely in memory, so every feature you don’t need is an extra cost on every page load. For example, the Adsense.module, while very useful in some cases, can most of the time be replace by simply pasting the Adsense code in node.tpl.php (or where appropriate). Same thing with Google Analytics; there is a module for that, but just incorporating the code in the footer of every page does the job most of the time."

So why load Drupal modules if directly loading the plug-in is as simple as a couple of add calls in the template.php file?

Thanks again, this show was one of your best!

Blessings! -NP

some value added

NP,

I'm not familiar with the Adsense module, but the Google Analytics module does add some value beyond the standard Google Analytics script, such as allowing you to exclude certain Drupal roles from being tracked, tracking mailto and download links, and more. I agree though, that it's important to weigh the cost of adding yet another module to your site. There are trade offs.

- Matt V.

Thanks

Hey Matt, thanks for the clarification. Blessings! -NP

Great episode. Made be buy

Great episode. Made be buy another book. Dang it.
Got a little lost on the second half. Ill have to play it a few times to let it sink in.
Thanks

Great one guys! I will have

Great one guys! I will have to listen again. No problem on the link to my del.icio.us. It is out there anyway ;)

Shrop

Mark Shropshire "shrop"
Geeks & God Forums Moderator
http://geeksandgod.com/users/shrop

jq_eyecandy

Hi guys, I've been playing with the jq_eyecandy module. The gradient and curvy corner features are great, but I've been running into performance problems that seem to be related to this. Should I expect better performance on graphics for this that the jquery way?

What do you mean?

Can you describe your performance problems? I have not used the module but I've done some neat graphical things with jquery and have never had performance issues.

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

I concur!

First off, Thanks for a spectacular podcast once again. I love jQuery, and this is helpful. I really don't get it, but I love what it can do.

I would concur however, that it would seem the eyecandy stuff does seem to slow things down. However, I have not been able to effectively test this yet.

If someone could run some test would be nice to know how jQuery Eyecandy or just jQuery effects performance.

As I'm moving into some larger projects I have been looking at performance, dedicated servers, redundancy, and more. Something completely new to me. (maybe an idea for a show?) Why Dedicated Servers vs. Shared Servers. Why you do or don't need them. Obviously smaller churches could combine together and run on even a single shared host, but larger churches may need a dedicated server to handle things?

Just some thoughts. THANKS GUYS!

Randall Benson
www.YourGeekGuy.com

Is it jQuery?

Is it jQuery that's slowing down the page itself or something else? How many javascript files are included? How many other things are effecting the page? What makes you think it's the jQuery?

My first gut is to question what the cause of the problem is.

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Lightweight

Sorry Matt, I haven't been able to really test it yet. All I know is that this is a lightweight site that was only running Views to show a block on the sidebar of Blog Teasers. Aside from that it's was a really stripped down Zen Themed site.

I don't really know if it was something else, but I am curious to find out.

Randall Benson
www.YourGeekGuy.com

You can feel free to take a

You can feel free to take a look for yourself at what I'm doing. If you really want a deeper look, I'll gladly hand over a username/password. It is still in dev.

http://members.fim.org/

I've noticed that on Safari, the gradients and curved corners on the block sometimes just don't happen or happen poorly.

There are 5 javascript calls in the header.

I haven't done any great performance investigation. I could be wrong, but it seemed to get slower when I added jq_eyecandy and started playing with that. I had YSlow on it at some point and it seemed to think it should be pretty quick.

Another jQuery book

Another good jQuery book is jQuery In Action. The authors take a very different approach in this book than they do in the "Learning jQuery" book Rob mentioned (and linked to). "Learning jQuery" takes a lot more hands on approach (which I love), where "jQuery in Action" takes a more theoretical approach where Bibeault (the author) details a lot of the methods, but uses pre-written lab pages to demonstrate how things work. But he also does more pretty good in depth explanation of how jQuery and JavaScript work underneath, so you get a good understanding of why things work the way they do sometimes. As with learning anything, it's a good idea to learn from more than one place so you get different points of view, and this is a good example.

Both authors are very responsive, too. I had a nice e-mail conversation with Karl Swedburg (one of the authors of "Learning jQuery") when I submitted a question on his site, and Bear Bibeault has a forum where he answers questions on things in his book as well as other jQuery questions (at the link above).

One more good source for jQuery help is the jQuery Google group (Karl Swedburg pointed me to it and he actively participates).

A couple of jQuery/Drupal

A couple of jQuery/Drupal articles at www.raincitystudios.com were mentioned on the recent www.lullabot.com podcast. They are pretty good. Check them out at http://www.raincitystudios.com/blogs-and-pods/kath...

Mark Shropshire "shrop"
Geeks & God Forums Moderator
http://geeksandgod.com/users/shrop

jQuery...I'm still missing something

OK, I'm running a Drupal 5.7 site locally and I can't figure out how to use jQuery plugins.

Since I'm digging the LavaLamp plugin, I dropped a copy into my theme folder. Because it's jQuery 1.2, I grabbed jQuery update (v.1) and then copied jquery.js to the misc folder. I'm not receiving any errors.

In template.php I added:

drupal_add_js(path_to_theme().'/lavalamptest.js', 'theme');

drupal_add_css(path_to_theme().'/lavalamp_test.css', 'theme', 'all', TRUE);
$styles = drupal_get_css();

The rendered page recognizes my .js
<script src="/drupal/sites/all/themes/my_theme/lavalamptest.js" type="text/javascript">

and .css files
<style media="all" type="text/css">
1@import "/drupal/sites/all/themes/my_theme/lavalamp_test.css";
</style>

In the body of my node (input set to "Full HTML"), I entered code based that based on that found on the demo site.
<ul id="lavaLampBasicImage" class="lamp">
<li><a href="#">link_1</a></li>
<li><a href="#">link_2</a></li>
<li><a href="#">link_3</a></li>
</ul>

The links show up but are not styled. The background image and rollover effect does not display. FireFox's JavaScript is enabled, as the demo site works just fine. Any clue what I screwed up?
Blessings! -NP

demo site?

No clue. Do you have a url I can see this not working on?

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

lavaLamp Issue

@NP Did you ever figure out the lavaLamp plugin issue?

LavaLamp tutorial

JStieglitz,

Very sorry for my very delayed response! I kinda moved away from LavaLamp but will try and get back to it at some point. I did see your tutorial and will review that first.

Thanks much!

-NP