Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy. Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML markups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML markups automatically. One cool feature of Dynamic News slider plugin is the news preview or news summary pane, hovering over news headline will show news summary in a tool tip like pop up, which also provides link to news detail page. All the features of Dynamic News slider plugin are configurable. Its up to you whether you want to display news preview pane, display control bar, auto hide control bar or keep it always visible.
Dynamic News Plugin Features
- Dynamic/RSS Driven
- You can set the no of news entries to be fetched from RSS
- Supports manual entry of headlines and news detail via HTML markups
- Supports news preview
Dynamic News Slider Plugin Parameters
- feedurl: URL of rss feed, default is ”. If ‘feedurl’ is empty then plugin will look for headlines within HTML markup.
- target: Determines whether to open news detail in same window or in a new one, possible values ‘_blank’, ‘_self’, ‘_parent’ and ‘_top’
- entries: Total no or news entries to be used by Dynamic News Plugins
- switchinterval: No of milliseconds single headline stays, default is 5000 ms or 5 secs.
- controls: Boolean value if true the news plugin will display the controls bar, default is true.
- showdetail: Boolean value if true, hovering over headline will pop up news summary, default is true.
- moretext: The text that will be displayed on news detail link within news summary pop up, default is ‘more detail’.
- controlsalwaysvisible: Boolean value if true the control bar will remain visible, auto hide otherwise, default is false.
- headlineLength: Max characters for headline text, default 80 chars.
Using Dynamic News Slider Plugin
In your HTML file add the following in the head section.
- Your FREE Google API key signup for Free GoogleAPI key.
- Add a reference to latest jQuery script
- Add a reference to dnews.js file
- Add a reference to dnews.css
Since Dynamic News Plugin uses google feed API to read RSS, you must have a FREE Google API key signup for Free GoogleAPI key
Add the following script in the head section and replace the key value with your own key, otherwise it the plugin will not work.
Add the following HTML markup within the body of your HTML document.
The above HTML markup is for rss driven news. If you want to enter the news manually or from your own source e.g. databse, then you need to follow the HTML markup format given below.
Add the following script in the head section of your HTML document for rss driven news.
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
$('#dnews').dnews({ feedurl:'http://www.dawn.com/rss', showdetail: true, controlsalwaysvisible: false });
});
</script>
And for non rss news add the following script in the head section of your HTML document.
<script type="text/javascript">
$(document).ready(function() {
$('#snews').dnews({ showdetail: true, controlsalwaysvisible: false });
});
</script>
Here is the complete code for non rss driven news headlines.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RSS Drivn Dynamic jQuery News Slider Plugin</title>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAzU5E6W-kYkDWncD-gLlvEhRUEaat57mcPuL2sxLOgiGfdu1dyxRm8B-okEsXk6nmXsYNVPSFoKIYxA"></script>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="dnews.js" type="text/javascript"></script>
<link href="dnews.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#snews').dnews({ showdetail: true, controlsalwaysvisible: false });
});
</script>
</head>
<body>
<div class="news-wrapper" id="snews">
<div class="news">
<div class="headline">
<a href="#" title="TOKYO: Workers at Japan’s stricken nuclear plant on Thursday pumped nitrogen into a crippled reactor in a bid to prevent a possible explosion and contain the world’s worst atomic accident for 25 years. With the crisis at the ">
Japan using gas to avoid explosion at nuclear plant.</a>
</div>
<div class="headline">
<a href="#" title="'ASK a Stupid Question Day' is a holiday and celebrated in the United States schools. The day falls on Sept 28, but practically it is observed on the last school day each year. Dating way back to 1980s, this day is a regular feature in ">
Of stupid questions and the significance of census.</a>
</div>
<div class="headline">
<a href="#" title="Archaeologists are unearthing a 2,000-year-old tunnel at Teotihuacan, the largest pyramid structures built in the pre-Columbian era, in the Basin of Mexico, searching for clues to the region’s most influential former ancient">
Digging deep into Teotihuacan’s mystery.</a>
</div>
</div>
</div>
<div id="dnews" class="news-wrapper">
<div class="news">
</div>
</div>
</body>
</html>
Update History
- Apr 07, 2011 Published.
- May 20, 2011 Minor issue fixed relating controls visibility.
Pingback: RSS driven jQuery dynamic news slider plugin | EGrappler | Nedir Bunlar
05/06/2012 @ 5:21 am
Tq so much. u save my world for this slider. =)
Pingback: 9 Best jQuery Feed Plugins - Design Freebies
Pingback: CSS – JQUERY – SLIDE SHOW – IMAGE EFFECT » “Awesome RSS Driven Dynamic News Slider Plugin with jQuery”
16/04/2012 @ 11:53 pm
Hi
The RSS Driven Dynamic script is very nice. But I have a problem: the pop up does not display when bring the pointer over the any news headline. Am I missing something?
thanks
Alessandro
17/04/2012 @ 8:19 am
You need to make sure that showDetail is set to true within intializer function.
Pingback: Really Useful jQuery Sliders, Plugins and Resources for Web Developers | | DumasLabDumasLab
Pingback: 20 plugins jQuery que marcaram 2011 « Lucas Pinheiro
13/02/2012 @ 4:34 pm
tks a lot man, it helped me, ive donne it with title and description, and a infinite scroller
, ty again
Pingback: 28 Most Useful jQuery Plugins from 2011 | 1step web design: Best for developer and designer
Pingback: XML-driven Vertical News Scroller Script using HTML and jQuery | EGrappler
23/11/2011 @ 10:00 pm
i am entering the news manually….everything works fine …except the pop-up does not load and the play pause buttons..i cannot get it to work
kindly help….thanks for sharing this awesome plugin.:)
24/11/2011 @ 7:41 am
can you show me your code? It would be easy to figure out what’s causing the problem.
20/02/2012 @ 9:15 am
Were you able to get it working? Sorry for replying late, I was way too busy doing some projects.
Let me know if you need my help regarding news slider.
17/11/2011 @ 9:46 am
Could you please add the license to the code? A double license of MIT and gplV2 seems to be the most used.
Also, does this work in IE6?
Looks great,
Wesley
24/11/2012 @ 4:15 pm
You can read the license here http://www.egrappler.com/license/
02/11/2011 @ 5:58 pm
Where exactly shall I use ‘target=”_blank”
I want if someone clicks on the link, it should be open in new window.
Help would be appreciated.
15/09/2011 @ 6:35 am
What are the licensing terms for this plugin?
24/11/2012 @ 4:16 pm
You can read license information here
08/09/2011 @ 12:52 pm
Awesome work !!!!
02/09/2011 @ 1:15 pm
Thanks for this excellent script.
How can i replace the font used in headline class with cufon font replacement so that font other than web safe can be used.
Cufon Javascript:
Cufon.replace(‘.classname’, { fontFamily: ‘Bell Gothic Std’, hover:true});
Which classname should be used in the above font replacement statement.
Thanks!
30/08/2011 @ 4:55 pm
It’s nice… How can I do for open the news in new window, i put traget=”_blank” in settings.showdetail but only work for the tooltip, how can i do for the principal link?
Thanks!
20/02/2012 @ 10:29 am
Grab the latest script, a new parameter ‘target’ has been added to plugin initializer function.
29/08/2011 @ 4:08 pm
I would also like to know how to do a continuous crawl across the screen rather than news snippets that slide across every five seconds. I have been trying to combine elements of a continuous scroller with your code, but so far no good. Do you have any examples or hints?
25/08/2011 @ 1:45 pm
Can you tell us please, how to use this great script with RSS 2.0 or atom 1.0 xmls? thanks a lot!
08/08/2011 @ 12:19 pm
Hi Muhammad, thanks for the great work.
I am currently testing this on a local server and everything works except on the odd occasion the news feed fails to move the last headline along, and thus the latest headline scrolls into view and goes on top of the previous headline. Meaning there are two headlines displayed on top of each other at once. Is there a way to stop this from happening, the only modifications i made to the script was via css to make the scroll bar longer and to centre the headlines could this be causing the problem?
Thanks for the great work
09/08/2011 @ 3:20 am
It would be better if you could send me your code.
22/08/2011 @ 9:44 am
Its due to the long news item. Please reduce the no of words and see result.
03/10/2011 @ 10:19 pm
Thanks how do i reduce the length of news items
05/08/2011 @ 6:47 am
awasome script. i will use to my website
Pingback: RSS Dynamic News Slider – jQuery Plugin
01/08/2011 @ 2:18 pm
Where is the inline positioning for the preview element set in the script? Is there a way to set this in a style sheet instead of via inline element/script? When I try to set this up, the preview is positioned off the screen… Thanks!
31/07/2011 @ 12:46 am
Hi great job
I was just wondering is there a way to make the headlines scroll horizontally. In other words i want to have a list of 4 headlines displayed on my page at one time, and i would like it to the scroll down to display next headline similar to the way credits are displayed at end of a movie. Is that possible with this plugin? Thanks once again for a great plugin
29/07/2011 @ 6:35 pm
Where does the script set the inline styles for the preview popup? Is there a way to change those? For me, the positioning that’s set in that inline style from the script puts the preview off the page.
Can it be changed so the preview box is done using the style sheet instead of inline styles?
Thanks!
22/07/2011 @ 9:14 am
Your Article about RSS driven jQuery dynamic news slider plugin | EGrappler Really superb visual appeal on this site, I’d value it 10 10.
18/07/2011 @ 3:33 pm
use target=”_blank”
18/01/2012 @ 4:39 pm
Assalam o alaikum Shahbaz,
I will appreciate if you find out what is wrong with my integration.
If you visit my website http://www.waaiex.com, you will see your RSS driven Jquery Dynamic News Ticker just below the banner. Actually I am using an iFrame to load this component from another page. When I click on a news headline the new web page loads in the same iFrame.
I am sure this was not your thinking when you have developed it that some stupid guy like me will call it in an iFrame but I am trapped now. Is it possible to help me so that I put something like target=”_blank” somewhere in the javascript dnews.js to open every link on a new web page.
Your help will be greatly appreciated.
JAZAK ALLAH KHAIR
19/01/2012 @ 9:48 am
Its working fine, when i click on news item it opens in new page. Help me understand your question, it would be easy for me to help you if I understand your problem.
20/02/2012 @ 10:17 am
I’ve added another parameter ‘target’ in the initializer function, set the value of target to ‘_blank’ to open news in new window.
05/07/2011 @ 8:04 pm
This is not working in IE 8. Slider controls not working and texts appear wrapped when sliding and slide text goes left and right beyond the control.
01/07/2011 @ 7:03 am
awesome script thanks
30/06/2011 @ 6:25 pm
hi,
how i can make headline link open in new window?
Thanks!
16/06/2011 @ 2:07 am
Thats great!!! Thank you for sharing!
14/06/2011 @ 8:36 pm
for some reason my slider does not switch the content?! Can you tell me what might be going wrong? It loads the first one but then does not ever slide at all.
13/06/2011 @ 6:58 am
I think this blog is great! Keep up the good work.
09/06/2011 @ 2:48 am
this is great i must add.
i need to create a robot to authomatically update with information from various news sites. how do i go about this?
09/06/2011 @ 2:45 am
this is off the hook i must tell you.. . and thanks for giving freely to humanity.. it nice.. but pls, is there a way i could dynamically.. write a robot to automatically update the news feeds from other news web sites?
02/06/2011 @ 1:29 am
i want to show 2 feeds at same time. How can i do
18/05/2011 @ 8:08 pm
Thank you very much for this plug in.
Is there any way you could provide some more documentation about how this works and how it can be modified? Is there any way it can draw feeds from more than one site? Is there a way to have more than one feed on the page at once?
20/05/2011 @ 2:15 am
you can load feeds from multiple source within google.setOnLoadCallback function
21/07/2011 @ 9:52 pm
We need to use feeds with RSS 2.0 or atom 1.0 xmls, and also multiple feeds, how to do it? thanks a lot!
18/05/2011 @ 4:50 am
everything is great except whenever i set controls to false everything stops working, tried on the original downloaded source as well and nothing
20/05/2011 @ 1:12 am
The issue has been fixed, use the latest script here
25/05/2011 @ 8:20 pm
perfect thanks so much i will post when our site goes live so you can see it
16/05/2011 @ 11:58 pm
How can I make this script do something similar: have a continuous crawl across the screen rather than news snippets that slide across every five seconds? Is that difficult to do? Otherwise, this script is perfect for what I was looking for.
17/05/2011 @ 6:44 am
you can modify the plugin whatever way you like
i’ll also look into it if i get some time
11/05/2011 @ 3:18 pm
Hi shahbaz – I was trying to set the “switchinterval” param at runtime in an aspx page but it never works for me. The page source shows the correct value of switchinterval (that i set) but the news always slide at 5sec interval. Any fix for this?
11/05/2011 @ 5:56 pm
you need to reinitialize the news slider, can you show me how you are doing?
10/05/2011 @ 2:15 pm
Hi, I love the look of this – exactly what I was looking for.
You can see it in use here: http://achrc.yodelservices.com
However, I want it for a Twitter RSS feed and I can’t seem to get it working.
Using the rss feed format of: http://twitter.com/statuses/user_timeline/enteruserid.rss
Get the User ID of any Twitter user here: http://www.idfromuser.com
You can see that it results in a valid rss feed, but it gets error: ‘object Object’.
I got it to load by making a feedburner feed out of it but then the first sentence including URL stayed all jumbled up and fixed in place.
Any guidance would be most grateful.
Cheers!
11/05/2011 @ 6:41 am
I’ll look into it and let you know how to fix it
11/05/2011 @ 7:08 pm
you need to adjust the css for that increase the width by 400 pixels in .new-wrapper and .news classes, this is just a quick fix doing so will obviously increase the length of the headline bar, i’ll update the plugin over the weekend with more feasible fix so that you dont need to change the width
15/05/2011 @ 7:22 am
Hi jason, get the latest script i’ve fixed the issue
17/05/2011 @ 10:24 am
twitter no longer supports rss feeds from what i see if you figured out a way to make that work please let me know
10/05/2011 @ 2:07 pm
Hi, I love the look of this – exactly what I was looking for.
You can see it in use here: http://achrc.yodelservices.com
However, I want it for a Twitter RSS feed and I can’t seem to get it working.
Using the rss feed format of: http://twitter.com/statuses/user_timeline/enteruserid.rss
Get the User ID of any Twitter user here: http://www.idfromuser.com
You can see that it results in a valid rss feed, but it gets error: ‘object Object’. one time I saw it load but the first sentence including URL stayed all jumbled up and fixed in place.
Any guidance would be most grateful.
Cheers!
Pingback: Dynamic News un jQuery news slider plugin | Web Design
06/05/2011 @ 3:46 pm
very nice plugin, thanks a lot egrappler..
15/07/2011 @ 3:55 pm
We need to use it feeding with RSS 2.0 or atom 1.0 xml, how to do it? thanks a lot!
06/05/2011 @ 12:11 pm
Very nice…Thanks to share
I have one question: after linking to my own XML file (on my domain)
the reader dont update the rss feed…my link is good (it works the first time)
But dont use the same UPDATED FILE… How can i force reader cache update
Thanks…again
06/05/2011 @ 2:35 pm
you can either disable global cache by adding this line “$.ajaxSetup({cache: false}});” before you make call to initializer function with in document.ready
or modify the plugin code to use $.ajax(); instead of $.get function and set cache:false
06/05/2011 @ 9:16 am
Very nice…sharp and clean…thanks for sharing
just one question: after relinking to my own rss xml file (in my domain)
the reader wont update…the link is good…it read my file…BUT dont RE-Load when i change xml
Where i can define time to reload cache
Thanks…Again
05/05/2011 @ 7:11 am
What a good plugin !!!
04/05/2011 @ 5:43 pm
Awasome!
Would you like to tell me for this JQuery’s license? Can I use for commercial web?
Thanks.
05/05/2011 @ 5:57 am
Yes, its free use it wherever you want
04/05/2011 @ 2:49 pm
I believe this web site has got some very fantastic information for everyone : D.
04/05/2011 @ 6:43 am
Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!
04/05/2011 @ 9:43 am
Thanks a lot
03/05/2011 @ 11:05 am
google code isn’t working. That’s why I can’t see the preview.
03/05/2011 @ 2:30 pm
google code will not work for locally deployed web site. you need to deploy you web site over the internet
03/05/2011 @ 7:48 am
thanks
03/05/2011 @ 6:39 am
thanx…..
its awesome & very usefull & easy to implement…..
Pingback: Haftalık tasarım ve uygulamalar 3 « internet magazin
Pingback: jQuery Weekly Roundup #2: 4/18/11 - webdesigncrowd.com
Pingback: Dynamic news, integrare facilmente le news sul tuo sito web con jquery
27/04/2011 @ 5:05 pm
I wanted to follow along and let you know how , a great deal I loved discovering your web site today. I’d personally consider it a real honor to operate at my workplace and be able to make use of the tips contributed on your website and also get involved in visitors’ comments like this. Should a position connected with guest publisher become offered at your end, you should let me know.
24/04/2011 @ 6:01 pm
Thats great!!! Thank you for sharing!
23/04/2011 @ 4:29 pm
Nice! But I would appreciate if you make a RSS Slider with pictures.
23/04/2011 @ 7:09 pm
I’ll definitely look into your suggestion
Pingback: Top 10 best jQuery Plugins
21/04/2011 @ 2:15 pm
clean, nice, easy & useful!
21/04/2011 @ 3:30 pm
Thanks
Pingback: Top 10 Useful jQuery Plugins Of March 2011 You Should Check Out | WebTabLab.com
15/04/2011 @ 7:56 pm
Hi,
This news slider is by far the best I have came across.
I noticed one issue though. Whenever I try to use an RSS feed that has images on it, the images will not load (just the image not found icon). Any ideas of how to get these images to show?
Thanks!