RSS Pushed Dynamic jQuery Information Slider Plugin: Dynamic Information
Dynamic News is a jQuery information slider plugin that makes data integration to your website online very straightforward. Dynamic Information plugin helps two methods so as to add information knowledge. You possibly can both enter your information by way of HTML markups manually or let Dynamic Information plugin load the information from RSS feed and construct the necessary HTML markups mechanically. One refreshing characteristic of Dynamic Information slider plugin is the information preview or information abstract pane, hovering over data headline will present information abstract in a device tip like pop up, which additionally gives a hyperlink to information element web page. All of the options of Dynamic Information slider plugin are configurable. It is as much as you whether or not you need to show information preview pane, show management bar, auto disguise command bar or hold it at all times seen.
Contents
Dynamic Information Plugin Options
- Dynamic/RSS Pushed
- You possibly can set the no of reports entries to be fetched from RSS
- Helps guide entry of headlines and information element by way of HTML markups
- Improves data preview
Dynamic Information Slider Plugin Parameters
- feed URL: URL of the RSS feed, default is ”. If ‘feedurl’ is empty, then the plugin will search for headlines inside HTML markup.
- Goal: Determines whether or not to open information element in similar window or a brand new one, attainable values ‘_blank’, ‘_self’, ‘_parent’ and ‘_top’
- Entries: Complete no or information entries for use by Dynamic Information Plugins
- switchinterval: No of milliseconds single headline stays, default is 5000 ms or 5 secs.
- Controls: Boolean worth if accurate the information plugin will show the controls bar, default is true.
- Showdetail: Boolean value if true, hovering over headline will pop up information abstract, default is true.
- More text: The textual content that will probably be displayed on information element hyperlink inside obscure information pop-up, default is ‘extra element’.
- Controlsalwaysvisible: Boolean worth if true the management bar will stay seen, auto disguise in any other case, default is fake.
- headlineLength: Max characters for headline textual content, default 80 chars.
Utilizing Dynamic Information Slider Plugin
In your HTML file add the next within the head part.
- Your FREE Google API key signup for Free GoogleAPI key.
- Add a reference to newest jQuery script
- Add a reference to dnews.js file
- Add a reference to dnews.css
Since Dynamic Information Plugin makes use of Google feed API to learn RSS, you will need to have a FREE Google API key signup for Free GoogleAPI key
Add the next script within the head part and substitute the important thing worth with your personal key, in any other case it the plugin is not going to work.
Add the next HTML markup throughout the physique of your HTML doc.
The above HTML markup is for rss pushed information. If you wish to enter the information manually or from your personal supply e.g. databse, then it is advisable to comply with the HTML markup format given under.
Add the next script within the head part of your HTML doc for rss pushed information.
<script sort="textual content/javascript">
google.load("feeds", "1");
$(doc).prepared(operate() );
</script>And for non RSS information add the next script within the head part of your HTML doc.
<script sort="textual content/javascript">
$(doc).prepared(operate() );
</script>Right here is the whole code for non RSS pushed information headlines.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero 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 Information Slider Plugin</title>
<script sort="textual content/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAzU5E6W-kYkDWncD-gLlvEhRUEaat57mcPuL2sxLOgiGfdu1dyxRm8B-okEsXk6nmXsYNVPSFoKIYxA"></script>
<script src="jquery-1.four.four.min.js" sort="textual content/javascript"></script>
<script src="dnews.js" sort="textual content/javascript"></script>
<hyperlink href="dnews.css" rel="stylesheet" sort="textual content/css" />
<script sort="textual content/javascript">
$(doc).prepared(operate() );
</script>
</head>
<physique>
<div class="news-wrapper" id="snews">
<div class="information">
<div class="headline">
<a href="#" title="TOKYO: Employees at Japan’s stricken nuclear plant on Thursday pumped nitrogen right into a crippled reactor in a bid to forestall a attainable explosion and comprise the world’s worst atomic accident for 25 years. With the disaster on the ">
Japan utilizing gasoline to keep away from explosion at nuclear plant.</a>
</div>
<div class="headline">
<a href="#" title="'ASK a Silly Query Day' is a vacation and celebrated in the USA faculties. The day falls on Sept 28, however virtually it's noticed on the final faculty day every year. Courting means again to 1980s, at the present time is an everyday characteristic in ">
Of silly questions and the importance of census.</a>
</div>
<div class="headline">
<a href="#" title="Archaeologists are unearthing a 2,000-year-old tunnel at Teotihuacan, the biggest pyramid constructions constructed within the pre-Columbian period, within the Basin of Mexico, trying to find clues to the area’s most influential former historic">
Digging deep into Teotihuacan’s thriller.</a>
</div>
</div>
</div>
<div id="dnews" class="news-wrapper">
<div class="information">
</div>
</div>
</physique>
</html>Replace Historical past
- Apr 07, 2011 Revealed.
- Might 20, 2011 Minor difficulty mounted relating controls visibility.
Dynamic News Plugin Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Thank you so much, it is very helpful.
Hi there. This would have been great, but I see it no longer works… I’ve implemented… but nothing working at all. And I can l=no longer get a Google API key as the loader no longer needs one… That’s probably the hassle…
Do you perhaps have an updated version of this script as it looks amazing in the screens and exactly what I’m after 🙂
Thanks in Advance,
Gavin
Muy buena la informacion, la pondre en practica y a ver que resultados da, un saludo a todos
I was reading some of your articles on this website and I think this internet site is real informative ! Continue posting .
hi, tnx for the great plugin its working just fine. I just have a question regarding internationalization. is there any for for the new to initially appear on the right and then slide to the left?
Im investigating the code but I havent been able to figure it out yet.
cheers
Tq so much. u save my world for this slider. =)
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
You need to make sure that showDetail is set to true within intializer function.
tks a lot man, it helped me, ive donne it with title and description, and a infinite scroller :D, ty again
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.:)
can you show me your code? It would be easy to figure out what’s causing the problem.
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.
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
You can read the license here https://www.egrappler.com/license/
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.
What are the licensing terms for this plugin?
You can read license information here
Awesome work !!!!
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!
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!
Grab the latest script, a new parameter ‘target’ has been added to plugin initializer function.
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?
Can you tell us please, how to use this great script with RSS 2.0 or atom 1.0 xmls? thanks a lot!
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
It would be better if you could send me your code.
Its due to the long news item. Please reduce the no of words and see result.
Thanks how do i reduce the length of news items
awasome script. i will use to my website
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!
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
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!
Your Article about RSS driven jQuery dynamic news slider plugin | EGrappler Really superb visual appeal on this site, I’d value it 10 10.
use target=”_blank”
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
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.
I’ve added another parameter ‘target’ in the initializer function, set the value of target to ‘_blank’ to open news in new window.
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.
awesome script thanks 🙂
hi,
how i can make headline link open in new window?
Thanks!
Thats great!!! Thank you for sharing!
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.
I think this blog is great! Keep up the good work.
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?
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?
i want to show 2 feeds at same time. How can i do
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?
you can load feeds from multiple source within google.setOnLoadCallback function
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!
everything is great except whenever i set controls to false everything stops working, tried on the original downloaded source as well and nothing
The issue has been fixed, use the latest script here
perfect thanks so much i will post when our site goes live so you can see it
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.
you can modify the plugin whatever way you like 🙂 i’ll also look into it if i get some time
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?
you need to reinitialize the news slider, can you show me how you are doing?
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!
I’ll look into it and let you know how to fix it
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
Hi jason, get the latest script i’ve fixed the issue
twitter no longer supports rss feeds from what i see if you figured out a way to make that work please let me know
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!
very nice plugin, thanks a lot egrappler..
We need to use it feeding with RSS 2.0 or atom 1.0 xml, how to do it? thanks a lot!
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
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
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 🙂
What a good plugin !!!
Awasome!
Would you like to tell me for this JQuery’s license? Can I use for commercial web?
Thanks.
Yes, its free use it wherever you want 🙂
I believe this web site has got some very fantastic information for everyone : D.
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!
Thanks a lot 🙂
google code isn’t working. That’s why I can’t see the preview.
google code will not work for locally deployed web site. you need to deploy you web site over the internet
thanks 🙂
thanx…..
its awesome & very usefull & easy to implement…..
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.
Thats great!!! Thank you for sharing!
Nice! But I would appreciate if you make a RSS Slider with pictures. 🙂
I’ll definitely look into your suggestion
clean, nice, easy & useful!
Thanks 🙂
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!