<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" ><channel><title>Let&#039;s start again... &#187; jquery</title> <atom:link href="http://manchumahara.com/jquery/feed/" rel="self" type="application/rss+xml" /><link>http://manchumahara.com</link> <description>&#34;Manchumahara&#34; ...... The virtual, crazy, vagabond and  an emotional stupid!</description> <lastBuildDate>Thu, 02 Feb 2012 13:47:24 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.1</generator> <item><title>RSS news ticker using jquery and Slick RSS module in joomla</title><link>http://manchumahara.com/2009/10/26/rss-news-ticker-using-jquery-and-slick-rss-module-in-joomla/</link> <comments>http://manchumahara.com/2009/10/26/rss-news-ticker-using-jquery-and-slick-rss-module-in-joomla/#comments</comments> <pubDate>Sun, 25 Oct 2009 17:41:43 +0000</pubDate> <dc:creator>Manchumahara(Sabuj Kundu)</dc:creator> <category><![CDATA[Java script]]></category> <category><![CDATA[Joomla]]></category> <category><![CDATA[Joomla Extention]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[Rss]]></category> <category><![CDATA[Tips and Tricks]]></category><guid isPermaLink="false">http://manchumahara.com/?p=388</guid> <description><![CDATA[Let me clear first about what is Slick RSS Slick RSS is a joomla module that Parse and Display RSS Feed News with DHTML Teaser Tooltip. For details pls visit this link. ok , let me tell what I am &#8230; <a href="http://manchumahara.com/2009/10/26/rss-news-ticker-using-jquery-and-slick-rss-module-in-joomla/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description> <content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-389" title="newsticker" src="http://manchumahara.com/wp-content/uploads/2009/10/newsticker-300x125.jpg" alt="newsticker" width="300" height="125" />Let me clear first about what is Slick RSS</p><p>Slick RSS is a joomla module that Parse and Display RSS Feed News with DHTML Teaser Tooltip. For details pls visit <a href="http://extensions.joomla.org/extensions/external-contents/rss-readers/1649">this link</a>.</p><p>ok , let me tell what I am going to do next. That module is great to show rss feed from another site and I want to use it as a news ticker and it can be named as rss news ticker. ok then let&#8217;s make it done.</p><p>I am going to use js library <a href="http://www.jquery.com/">jQuery</a> and it&#8217;s plugin <a href="http://plugins.jquery.com/project/BBCnewsTicker">BBCNewsTicker</a>. Please download latest version of jquery and that plugin this the given link.</p><p>Now, install the module Slick RSS in your joomla site and publish in any module position. Now I am going to make little change in the module code so that it can be  configured for newsticker.</p><p>open the file default.php from modules\mod_slick_rss\tmpl and check link near 39</p><p><span id="more-388"></span></p><pre class="brush: php; title: ; notranslate">
&lt;ul class=&quot;slick-rss-list&lt;?php echo $params-&gt;get('moduleclass_sfx'); ?&gt;&quot; id=&quot;slick-rss-list&lt; ?php echo $params-&gt;get('moduleclass_sfx'); ?&gt;&quot; style=&quot;margin-left:0px;padding-left:0px;&quot;&gt;
</pre><p>here I am adding id to ul tag so that the jquery plugin can catch that and do newsticking <img src='http://manchumahara.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /></p><p>oh btw,$params-&gt;get(&#8216;moduleclass_sfx&#8217;)  that is the class sufix that u add to that module, it urgent to give module suffix here and don&#8217;t give same class sufix for another copy of same module in same page. In that the first module be working as newsticker as both more than one module&#8217;s ul tag is getting same id.</p><p>Next task is to add jquery and it&#8217;s plugin and do that newsticking&#8230; <img src='http://manchumahara.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /><br /> I am putting them in index.php of the current active template. make folder named js in your current template folder if there is none and put the jquery file and it&#8217;s plugin in that folder . now put the these lines in your index.php template file</p><pre class="brush: jscript; title: ; notranslate">
&lt;script src=&quot;&lt;?php echo $this-&gt;baseurl; ?&gt;/templates/js/jquery-1.2.6.pack.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;&lt;?php echo $this-&gt;baseurl; ?&gt;/templates/js/newsticker.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;// &lt; ![CDATA[
jQuery.noConflict();
jQuery(document).ready( function(){
var options = {newsList: &quot;#slick-rss-list_rssnews&quot;, tickerRate: 80, loopDelay: 3000,	startDelay: 10, 		placeHolder1: &quot;_&quot;}

jQuery().newsTicker(options);
});
// ]]&gt;&lt;/script&gt;
</pre><p>Look the above code I used the jquery file name jquery-1.2.6.pack.js  and it&#8217;s plugin newsticker.js .So if u are using latest version of jquery or it&#8217;s news ticker plugin then put the file names carefull in the code&#8230;</p><p>another line check here</p><pre class="brush: php; title: ; notranslate">
var options = {newsList: &quot;#slick-rss-list_rssnews&quot;, tickerRate: 80, loopDelay: 3000,	startDelay: 10, 		placeHolder1: &quot;_&quot;}
</pre><p>here #slick-rss-list_rssnews   # is jquery syntax to catch slick-rss-list_rssnews as id   and _rssnews  is the class suffix for the Slick RSS module that I put from admin panel in the module configuration. If you put any thing then the id will be like #slick-rss-list{class suffix here without 2nd bracket} in this format. I think you are clear.</p><p>Oh u may ask why I wrote that line jQuery.noConflict();  and jQuery in place of $ sign.. heh to avoid conflict with other js library. You can search jquery seach about this noConflict mode.</p><p>Another thing is put the above code in footer of yout index.php file so that the loading time of jquery and it&#8217;s plugin doesn&#8217;t make any problem for site loading. For first time before the site loaded completely(before the dom is ready) the rss feed will be shown as listed like</p><p>list1<br /> list2<br /> list2</p><p>so if u make the ul tag height as the the line height of list item from css then it will seems that before the dom ready first news is displayed. When the dom is ready jquery plugin will start to work <img src='http://manchumahara.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>waiting for your feedback <img src='http://manchumahara.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /></p><p>wana see demo of my work ? ok check <a href="http://www.gdpglobal.com/">here</a> .If this link doesn&#8217;t work in future then check <a href="http://www.gdpglobal.com">main domain</a> of that link as this is a demo site now <img src='http://manchumahara.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>Comment is open. You can participate in the discussion by visiting <a href='http://manchumahara.com/2009/10/26/rss-news-ticker-using-jquery-and-slick-rss-module-in-joomla/'>here</a> ]]></content:encoded> <wfw:commentRss>http://manchumahara.com/2009/10/26/rss-news-ticker-using-jquery-and-slick-rss-module-in-joomla/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching 5/22 queries in 0.009 seconds using disk: basic
Object Caching 367/380 objects using disk: basic

Served from: manchumahara.com @ 2012-02-05 17:22:04 -->
