This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.
Links from Video:
Thanks Chris! Definitely a useful screencast.
Great i’ve been waiting for part 3 for ages!
Nice job Chris.
Just watched the tutorial. Clearly explained and easy to understand as usual.
Just to let you know, when the options weren’t working, you had the removeTitle in all lowercase.
Great Tut as usual!
Also, I like the redesign of the comment box.
I was waiting :) …
Thank you, you made my day.
BTW I like the new comment area.
Kind regards
Rata
You are a brilliant man, thank you very much
isn’t working in IE7 for me,
Al
p.s. good luck at the conference Chris
Aw shucks. I swear I did my IE 6/7/8 testing but something buggered up. I think I have it fixed now.
I downloaded the file and executed it from there, I do note that the online demo is working in IE7. not sure what needs to be done to the d/l version for it to work in ie7
thanks Chris
Al
Really interesting jQuery plugin dev screencast!
Imo, a <br /> in an image title attribute is wrong semantically speaking. I’m sure there are easy workarounds for this, maybe something like exploding the title in 2 parts. You seem to use “ : ” in every title so perhaps use this as a separator and add the <br /> outside the real content with some jQuery magic ;)
Amazing stuff you can do with JQuery. Although I am not a java person I find it easier to learn especiially after watching you make a few typos and get firebug errors and very good at troubleshooting the error – like that typo for plugin defaults “removetitle” versus “removeTitle”
Great series – I hope more to follow
Awesome stuff. I never realized how easy jquery was. One more thing I’ll have to dig my teeth into.
Thanks for the great screencasts.
Isn’t this way easier to write jQuery plugins?
Yeah, thanks. I thought there was an easier way!
I’m gonna start making my own plugins, I’ll use this as the base. Chris’s code seems a little bloated
Awesome I was waiting for that :D
Very cool, thanks.
The “div”, the “JQ” understandable, but the plugin… mmm
This was Definitely a very useful post.
Thank You, I’ll be keeping an eye out for these!
Hey Chris,
the bug got fixed at 29’06”. But it wasn’t useless. It just shows that the annoying things I encounter as a programmer happens to the more experienced too.
We both share the somewhat annoyed and tension rising singing with a double check is it really not working now to end of with a boo or similar sound.
Anyhow I found myself yelling “You forgot your capital T man, that’s all”, “Come on, you can’t miss it”. Only to calm myself down and realize I’ve had worse events.
I’m gonna write a totally useless query-plugin only to show myself I can do this.
Love you man!
Cool tutorial, Chris!
One thing: I don’t understand why you’re declaring a variable called “config” when apparently the function is already being passed a variable with the same name:
var config = $.extend({}, $.titleBlock.defaults, config);That works, but I can’t see any reason to declare a new config to scope-out the old one. It confused me at first. How about this?
config = $.extend({}, $.titleBlock.defaults, config);That’s a typical coding pattern:
a = foo(..., a);P.S., I noticed for the first time the spinning asterisk in the intro animation. That’s a nice touch.
Hi Chris,
Great screencast, I never thought making a plugin was that easy !
Is there going to be an official minified version of this aswell ?
PS: When troubleshooting the removeTitle, the difference between the copypaste and the one typed from scratch is the lowercase “T” in removeTitle. It didn’t recognize the default cause of case sensitivity, and a non-existing variable always returns false ;)
Thanks again,
TeMc
Hey CSS-Tricks.com,
Here’s a slightly modified version of it (tabs instead of spaces, fewer empty lines, credit to Chris and more pluginish filename).
http://static.grizzdesign.nl/jquery.titleblock.js
Minified aswell:
http://static.grizzdesign.nl/jquery.titleblock.min.js
Are you planning to release this as a plugin in the JQuery repository? I think that could be really useful to some folks!
Awesome Screencast
@Tom Rogers:
Consider it done ;)
http://plugins.jquery.com/project/titleblock
Thank you so much dude..
Great screencast, Chris!
I’m not convinced that JavaScript is required, however, so I’ve responded in the form of a blog post titled Captions over images. You may be enjoying the jQuery so much that you overlooked the CSS solution. ;)
Those with only a second to spare can check out the captions over images demo for a comparison.
Cool, thanks for sharing David. Remember this whole idea started as a CSS only idea. The point of using jQuery was to:
1) Use the images title text instead of duplicating that value.
2) Reduce the amount of markup needed (an image remains just an image in the markup)
3) Demonstrate the theory of building a plugin
I’m not advocating duplicating the value, just putting it in a different place.
The two methods use different markup for image descriptions: one uses the img element’s title attribute, the other places captions in their own elements. Both approaches are valid, and it’s always nice to have options. :)
You did a great job of demonstrating the steps involved in building a jQuery plugin. For me, the process was more important than the finished product in this screencast.
I really dig this CSS only version. 2 awesome ways to get something done.
Thanks to both Chris and David C. for sharing these tutorials.
NICE!! It like having Seth Rogan teach you javascript!
Wow! For as long as I have known about jQuery, I have wondered how to create plugins and where the strange key/value pair syntax for config comes from. Now I know, and of course I have to create a bunch of jQuery plugins now. :) Thanks for opening my eyes!