Posts Tagged ‘plugin’
A jQuery accordion plug-in August 23rd, 2012
Today I finished building a beautiful jQuery accordion plug-in which hopefully will end up in a suite of plug-ins and jQuery bits and pieces in the companies new product offering next year.
This is quite a long post but my other jQuery posts have all been a bit boring so I thought I’d make a bit more out of this one and add some more examples, instructions etc.
The plug-in works best when attached to a <dl> HTML element although as long as you structure your code in a similar way you can use anything you like with a bit of tweaking of the parameters.
Example 1
The list below is what you will get if you apply the plugin to a <dl> without changing any parameters.
- Item title One
- Item content One
- Item title Two
- Item content Two
- Item title Three
- Item content Three
Example 1 code
$('#list1').siAccordian();
Example 2
Now one with a few of the parameters set for a slightly fancier experience.
- Item One here’s a non clickable sub heading
- List content One
- Item Two here’s a link that wont expand the list
- List content Two
- Item Three
- List content Three
Example 2 code
$('#list2').siAccordian({
instigateElement : ' > a:first-child',
startOpen : 0,
collapseSiblings : true,
animate : true,
openClass : 'contract'
});
So there it is. There are a few more parameters to play around with, they’re all listed in the JS file. Most notably there’s a ‘save state’ parameter which will use a cookie to remember the state of the list when you navigate away from the page so that when you return the page is as you left it.
As I said at the beggining I’ve literally finished this today and it has yet to go through proper QA so there are doubtless a few bugs. Please download the files and have a play with it, but please let me know if you find any bugs and if you don’t mind, leave the credits in the JS file in-tact.
Cheers, Scriptic
Another jQuery slider (v 2.0) December 17th, 2011
I don’t know how it happened but it’s December already! Soon it’ll be time for me to do a Christmas post but I thought that since, unforgivably, I haven’t posted since August I’d squeeze in a last work entry of 2011. This might seem like a bit of a cheat, some might say this belongs more as an update of my previous jQuery slider post, but as it has some pretty key differences I have decided to call it jQuery slider version 2.0 and give it a post of it’s own. This also affords me the opportunity of displaying some more photos, today’s theme: The Lake District where my girlfriend and I got engaged earlier this year.
Our camping pod.
The slider differs to version 1.0 mainly in that it can handle content other than imagery. You can now feed it a container type (e.g ‘div) and it will treat that container and everything inside it as a slide. Also the slides are now all present within the HTML rather than being loaded in by the JS. Additional features include the ability to switch the menu on and off and change the slide direction. You can download the files here. As always I value feedback, again I haven’t exhaustively tested this and I’d be interested to see how it fits within other templates and style sheets.
jQuery popup plugin August 4th, 2011
I seem to be doing a lot of bits and pieces of jQuery at the moment, which is good because I quite enjoy it. I must confess I used to feel like it was cheating but fortunately i’ve managed to shed that particular misconception and now use it in almost all the online stuff I work on.
So here’s another little plugin I knocked up for work, a jQuery popup script. Most of these bits start as some random function written for a particular site which I then make into a reusable plugin and add to my script library for re-use.
You feed this one an element ID (i’d suggest a div) and it’ll remove it from the DOM (that way you can initially stick it anywhere on the page as an accessible alternative to the pop up), re-append it just before the closing </body> tag, create (if required) a background overlay and open it up at the click of a button.
Optional settings include fade in / out, background on / off, colour and opacity, close button, and close on background click.
So test it or download the source files. Poptastic!
Hello world!
UPDATE 2: Now version 1.2 – The popup will now re-centralise when you resize the window, also fixed a couple of little bugs.
UPDATE: Now version 1.1 – i’ve fixed a bug wherein if you fired the same pop-up using multiple links, multiple versions of the background overlay were being created with the same ID. I can only apologise for this schoolboy error.
jQuery form validation plugin November 15th, 2010
So in my last post I promised something scripty and here it is – my first attempt at a jQuery plugin. Some of you might remember a previous post of mine concerning JavaScript form validation – I used this as the base to build my jQuery plugin. It does much of the same sort of validation but it’s much easier to implement, can be used on multiple forms, on the same page with different settings and has several different methods of alerting the user to validation fails. The two forms below show some of it’s features in action and you can download the files for a more in depth look.
Form 1
Form 2
The files include the plugin as well as a sample HTML form. Feel free to download and use - but if you do it would be nice if you left the credits in the JS file as they are.
This is currently version 1.0 and as I use this in my own work I'll probably be expanding the functionality and improving it over time so do watch for updates. Also if you have any functionality requests or suggestions for improvement, or if you make any improvements yourself, please let me know.
