Veerasundaravel's Ruby on Rails Weblog

September 14, 2010

zRSSFeed – RSS Feeds Reader for jQuery

Filed under: jQuery — Tags: , , , , , , , , , — Veerasundaravel @ 12:55 pm

A jQuery plugin will read RSS feeds from any website url using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use.

Reference Url: http://www.zazar.net/developers/zrssfeed/

How to do:

1. Download the latest plugin  from the above mentioned URL and add it to your application directory.

2. Include the jQuery and zRSSFeed libraries.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8221; type=”text/javascript”></script>
<script src=”jquery.zrssfeed.min.js” type=”text/javascript”></script>

3. Add a DIV tag where you wish the feed to display and give it an ID. There is no need to specify a class, this will be added.

<div id=”test”><div>

4. Now add the script to call the zRSSFeed plugin with the RSS url and any options. Our example gets 5 feeds from the Reuters site.

<script type=”text/javascript”>
$(document).ready(function () {
$(‘#test’).rssfeed(‘http://feeds.reuters.com/reuters/oddlyEnoughNews&#8217;, {
limit: 5
});
});
</script>
5. Finally now you can see the RSS feeds from the specified url.

September 7, 2010

jQuery rounded corner Plugin

Are you still using background images for designing a DIV with rounded corner. If it is, just stop and go to this jquery plugin. Much easier and lot of border options are available with this plugin.

http://jquery.malsup.com/corner

Div height issue when adding more text in it

Filed under: HTML — Tags: , , , , , , , , , — Veerasundaravel @ 3:08 pm

I created one DIV with some dynamic content where some its inner divs will float in right or left. Some this like below:

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
</div>

We can’t add fixed height for UserInfoContainer, because user information is a dynamic content. Duo to this, UserInfoContainer’s background color is not fully added to the whole DIV.

Solution:

If you cleared the floated elements, then you can fit those DIV elements into the parent container. Just you need to do some thing below.

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
<div style=”clear:both”></div>
</div>

Reference:
http://stackoverflow.com/questions/1287190/css-problem-my-div-tag-is-not-resizing-when-i-put-text-in-it

« Newer Posts

%d bloggers like this: