Home & blog  /  Scripts  /  view post  /

JAWS: news ticker and mini accordion

Overview

This widget-esq script is at once both a news ticker and a mini accordion. It takes a config file of data (headlines, image SRCs, URLs etc) and paginates your headlines into folds. It will optionally auto-rotate through these folds, though you can navigate between them with the numeric tabs at the top right. If an item has 'more info' data set in the config, then clicking the headline will reveal that data in an accordion fashion. See below for an example.

Example

Click the list items to reveal more info.


Here's the code behind this example:

1new Jaws({

2     container: '#jawsHolder',

3     title: 'latest news',

4     jsonFile: '../inc/script_demos/jaws/json.json',

5     itemsPerFold: 4,

6     doNumbers: true

7});

^^ top of page

Usage and params

Create a Jaws in your page by calling new Jaws(params), where 'params' is an object of parameters including:

container (string) - a jQuery selector string targeting the container element you want to insert the Jaws into

title (string) - the title to appear at the top of your Jaws, e.g. "latest headlines"

jsonFile (string) - a filepath to a JSON-formatted data file to feed the Jaws (see data format below for info on this)

data (object) - if you want to directly pass in data to feed your Jaws, rather than loading it from a JSON file, pass it in as an object in this parameter

itemsPerFold (integer) - the number of items that should be visible without needing to scroll (i.e. this decides the height of your Jaws)

doNumbers (boolean; default: false) - if true, the items in your list will be numbered

^^ top of page

Data format

Jaws reads JSON data. You can have it load your data either by specifying a path to a file where it's stored (see the jsonFile parameter above) or by passing in data directly as an object literal (see the data parameter above).

The format is simple, and looks like this:

1[

2     {

3         "title": "item 1 title",

4         "url": "http://www.someurl.com",

5         "moreInfo": {

6             "info": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet hendrerit arcu",

7             "image": "images/someImage.jpg"

8         }

9     },

10     {

11         "title": "Item 2 title",

12         "url": "http://www.someotherurl.com",

13         "moreInfo": {

14             "info": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet hendrerit arcu,",

15             "image": "images/someOtherImage.jpg"

16         }

17     }

18     //etc

19]

As you can see, it's rather self-explanatory. Click here to see the JSON file that powers the example at the top of this page.

^^ top of page

Notes

Dependencies

There is an accompanying CSS file for this script, included in the source download, that you will need to call into your page.

Items with no 'more info'

If you don't pass moreInfo for a particular item, clicking an item will take the user directly to its associated URL, without showing any more info.

Curvy corners

Obviously the CSS-powered curvy corners won't show up in IE. You can get round this by using my CurveMe plugin.

^^ top of page
post new comment

Comments (26)

User, at 20/10/'10 00:00, said: 
Ummm theres nothing there.  FF 3.6.10 on Windows XP SP2
Shopsystem, at 20/10/'10 13:10, said: 
Same on Linux with FF 3.6.10.
Mitya, at 21/10/'10 08:50, said: 
Hmm, strange. And yet there's no JS error in the console, and it works in FF on my local machine. Will have a look!
Mitya, at 21/10/'10 09:10, said: 
Now fixed :)
Mietshop, at 21/10/'10 17:11, said: 
Yeah, nice!
Okoweb, at 26/10/'10 09:04, said: 
Nice. Thank.
dsc, at 1/11/'10 03:46, said: 
great!!
samson, at 2/11/'10 10:27, said: 
Like the name, and the component of course.
xiarra, at 2/11/'10 10:28, said: 
hi mitya,

i have tried using this could and it looks fine on firefox but on IE7 & IE8 it's a bit messed up. can you help me out? i am really having a hard time fixing it.T_T

this is really a nice ticker though. and i really want to use it. please help T_T

thank you so much
Mitya, at 2/11/'10 11:19, said: 
Hi xiarra - I can, but I'll struggle without a URL to look at. It works for me in IE7&8 - possibly it's conflicting with your CSS.
xiarra, at 2/11/'10 11:50, said: 
hmmm... okay..
i'll check again.. :)

thanks for your quick response.. ^_^

nice site by the way.. :)
Mitya, at 2/11/'10 11:52, said: 
Thanks :) Look at this page in IE7/8 - does JAWS work on here?
James, at 1/12/'10 21:49, said: 
Hi Andy,

Can you advise on how to make jaws import data from a rss feed? :) Awesome script!
Mitya, at 1/12/'10 22:41, said: 
Hi James - this is possible. I know because I faced the same problem, i.e. a client having a feed in XML, but JAWS requiring JSON. You'll need to load the RSS feed into your page then convert (and probably remap) it to JSON. You can do that with my latest creation - see here: https://mitya.co.uk/blog/2010/Nov/XML-to-JSON-convertor-and-remapper-145
Ali, at 5/01/'11 04:38, said: 
Nice its very good
raghib.suleman, at 7/01/'11 12:09, said: 
Very good news ticker
Aman, at 16/04/'11 12:18, said: 
How can i add a line break in more "info" in data format??
Heretic, at 24/04/'11 17:38, said: 
great one mate, tnx for sharing
Bernard, at 19/05/'11 14:50, said: 
I would also like to know how to add a line break in the "info" text so you get the same effect as a 
 tag in HTML.

Thank you
L, at 2/09/'11 07:46, said: 
Hi,
IE8 does not display Back and More Info on green.
shwetaec, at 30/11/'11 11:26, said: 
The script seems to be creating some problem when used with jquery-1.3.2.min.js. When the news tickler is clicked, it opens the accordian window but the window does not open properly. The links above the clicked link are not pushed above when the window opens. Please let me know what can be done.
haicheng.jin, at 21/12/'11 17:21, said: 
Thank you,It so cool.
serkan, at 14/03/'12 11:17, said: 
This page is opened about 10 minutes and now the slider moves in light speed.

why?
Debi, at 29/03/'12 19:33, said: 
Can this loop through a list without doing the reverse thing? and highlighting whatever is at the top position?
Debi, at 2/04/'12 15:46, said: 
How do you put 
 tags in the json file? or is this not possible?
Thanks
Michel, at 6/04/'12 05:35, said: 
Great job, very useful plugin ;)
post new comment