The Fivestar voting plugin adds a clean, attractive voting widget to views in Elgg. Fivestar is built using the jQuery Star Rating widget.
Features:
Planned features:
Screenshots -
Blog:
Tidypic photo:
Polls:
Adding to views:
Adding or removing the widget from your views is done via the Fivestar settings. The text box under 'Add fivestar to a view:' is used to add 1 view per line. The configuration can be complicated and requires an understanding of Elgg views and html. Firebug can be a big help.
The widget is inserted by intercepting the html that is about to be displayed to the user. The html is then parsed using a dom library and the widget is inserted into the specified div, span etc. A handful of view configurations are included by default. To remove the widget from a view just delete the appropriate line in the config.
A sample line in the config looks like:
view=object/blog, tag=div, attribute=class, attribute_value=contentWrapper singleview, before_html=<br />
This a comma delimited list of key/values and breaks down as follows.
Update 1.0.2:
Update 1.0.1b:
View Billy Gunn's plugins
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by Raül Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
hi i have used this plugin in Elgg 1.5 it is not working.
Note : i have installed the lateset jquery files.then also it is not working.
anybody know the reason?
Could you elaborate a little more on the not working part? What do you see, what don't you see etc.
For Example, I have enable this in my pages section.
have set this like
view=pages/pageprofile, tag=div, attribute=class, attribute_value=contentWrapper, before_html=<br />
i am able to view fivestar() js function in my page
but not able to view the rating star section.
I got the following lines in elgg1.6 but not in elgg 1.5 .
<div class="fivestar-ratings-50">
<form id="fivestar-form-50" style="width: 200px" action="" method="post">
<input type="radio" name="rate_avg" value="20" />
<input type="radio" name="rate_avg" value="40" />
<input type="radio" name="rate_avg" checked="checked" value="60" />
<input type="radio" name="rate_avg" value="80" />
<input type="radio" name="rate_avg" value="100" />
<input type="submit" value="Rate it!" />
</form>
<br />
<span>
<span id="fivestar-rating-50">3</span>/5 stars (<span id="fivestar-votes-50">1</span> votes)
</span>
</div>
<script type="text/javascript">
jQuery(
fivestar(50, '532fca7eb4a47e693b25e59000758b05', '1254550286')
);
</script>
Please guide me.
ie) i have got js codes but not able to view the rating star section
On your elgg 1.5 site do a view source on a page that should have fivestar like blogs and copy the header section (everything between <head> </head>) to a reply here.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="ElggRelease" content="1.5" />
<meta name="ElggVersion" content="2009031301" />
<title>Skouta: Pages home</title>
<script type="text/javascript" src="elgg/staging/javascript/commonfunctions.js"></script>
<script type="text/javascript" src="elgg/staging/javascript/formvalidation.js"></script>
<!-- <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js"></script>-->
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery.form.js"></script>
<script type="text/javascript" src="elgg/staging/_css/js.php/1254485153?js=initialise_elgg&viewtype=default"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA78nZXhgoDHWeDCjCGjCZiBR6yGbX3xNqH3KqEv32bmBbQqzhshSSIeTZhnp6-1Nu2fjFD8ao6qe5_A" type="text/javascript"></script>
<script type="text/javascript" src="elgg/staging/javascript/pdmarker.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = onPageLoad;
var map;
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
function onPageLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.28124, -123.12035), 17-5);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
marker = new PdMarker(new GLatLng(49.28124,-123.12035));
marker.setTooltip("Pallavakkam");
var html = "Visit <a href=''>Pallavakkam, chennai<\/a>";
marker.setDetailWinHTML(html);
marker.setHoverImage("http://www.google.com/mapfiles/dd-start.png");
map.addOverlay(marker);
if (true) {
marker2 = new PdMarker(new GLatLng(20.25, -123.10), { title: "title", icon: icon });
marker2.setTooltip("Another Tooltip");
var html = "Visit <a href='http://www.pixeldevelopment.com'>Pixel Development<\/a>";
marker2.setDetailWinHTML(html);
map.addOverlay(marker2);
}
document.getElementById("actual").innerHTML = "(actual: " + getGoogleMapsVersion() + ")";
}
}
function getValue(objId) {
obj = document.getElementById(objId);
if (obj)
return obj.value;
else
return "";
}
function setValue(objId, value) {
obj = document.getElementById(objId);
if (obj)
obj.value = value;
}
function clear() {
setValue("value_input","");
}
//]]>
</script>
<!-- include the default css file -->
<link rel="stylesheet" href="elgg/staging/_css/css.css?lastcache=1254485153&viewtype=default" type="text/css" />
<link href="elgg/staging/skoutaCss/skoutaCommon.css" rel="stylesheet" type="text/css" />
<link href="elgg/staging/skoutaCss/skoutaHome.css" rel="stylesheet" type="text/css" />
<link href="elgg/staging/skoutaCss/registration.css" rel="stylesheet" type="text/css" />
<link href="elgg/staging/skoutaCss/ie.css" rel="stylesheet" type="text/css" />
<link href="elgg/staging/skoutaCss/general.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="elgg/staging/pg/pages/owned/admin?view=rss" />
<link rel="alternate" type="application/odd+xml" title="OpenDD" href="elgg/staging/pg/pages/owned/admin?view=opendd" />
<link rel="meta" type="application/rdf+xml" title="FOAF" href="elgg/staging/pg/pages/owned/admin?view=foaf" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
</script>
<script type="text/javascript" src="elgg/staging/mod/embed/jquery.form.js"></script>
<script type="text/javascript" src="elgg/staging/mod/fivestar/js/ui.stars.js" ></script>
<script type="text/javascript">
function fivestar(id, token, ts) {
$("#fivestar-form-"+id).children().not("select").hide();
// Create stars for: Rate this
$("#fivestar-form-"+id).stars({
cancelShow: 1,
cancelValue: 0,
captionEl: $("#caption"),
callback: function(ui, type, value)
{
// Disable Stars while AJAX connection is active
ui.disable();
// Display message to the user at the begining of request
$("#fivestar-messages-"+id).text("Saving ...").stop().css("opacity", 1).fadeIn(30);
$.post("elgg/staging/action/fivestar/rate", {id: id, vote: value, __elgg_token: token, __elgg_ts: ts}, function(db)
{
// Select stars from "Average rating" control to match the returned average rating value
$("#fivestar-form-"+id).stars("select", Math.round(db.rating));
// Update other text controls...
$("#fivestar-votes-"+id).text(db.votes);
$("#fivestar-rating-"+id).text(db.rating);
// Display confirmation message to the user
if (db.msg) {
$("#fivestar-messages-"+id).text(db.msg).stop().css("opacity", 1).fadeIn(30);
} else {
$("#fivestar-messages-"+id).text("Rating Saved").stop().css("opacity", 1).fadeIn(30);
}
// Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
setTimeout(function(){
$("#fivestar-messages-"+id).fadeOut(1000, function(){ui.enable()})
}, 2000);
}, "json");
}
});
// Create element to use for confirmation messages
$('<div class="fivestar-messages" id="fivestar-messages-'+id+'"/>').appendTo("#fivestar-form-"+id);
};
</script>
<script type="text/javascript" src="elgg/staging/mod/custom_index/views/default/canvas/layouts/tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div id="elgg_topbar">
<div id="elgg_topbar_container_left">
<div class="toolbarimages">
<a href="http://www.elgg.org" target="_blank"><img src="elgg/staging/mod/elggbook/graphics/elgg_toolbar_logo.png" /></a>
<a href="elgg/staging/pg/profile/admin"><img class="user_mini_avatar" src="elgg/staging/mod/elggbook/graphics/user_icons/defaulttopbar.gif"></a>
</div>
<div class="toolbarlinks">
<a href="elgg/staging/pg/dashboard/" class="pagelinks">Dashboard</a>
</div>
<ul class="topbardropdownmenu">
<li class="drop"><a href="#" class="menuitemtools">Tools</a>
<ul>
<li><a href="elgg/staging/mod/riverdashboard/">Activity</a></li><li><a href="elgg/staging/mod/form/form.php?id=99">Advert Form</a></li><li><a href="elgg/staging/mod/form/form.php?id=3">Blog Form</a></li><li><a href="elgg/staging/pg/blog/admin">Blogs</a></li><li><a href="elgg/staging/pg/bookmarks/admin/items">Bookmarks</a></li><li><a href="elgg/staging/pg/file/admin">Files</a></li><li><a href="elgg/staging/pg/friends/admin">Friends</a></li><li><a href="elgg/staging/pg/groups/world/">Groups</a></li><li><a href="elgg/staging/mod/form/form.php?id=149">It's 5o'clock somewhere</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=149">List of 5'oclock video's</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=99">List of Adverts</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=3">List of Blogs</a></li><li><a href="elgg/staging/mod/members/index.php">Members</a></li><li><a href="elgg/staging/pg/pages/owned/admin">Pages</a></li><li><a href="elgg/staging/mod/thewire/everyone.php">The wire</a></li><li><a href="elgg/staging/pg/form/admin">User content</a></li><li><a href="elgg/staging/mod/form/form.php?id=48">Video Form</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=48">Video List</a></li> </ul>
</li>
</ul>
<script type="text/javascript">
$(function() {
$('ul.topbardropdownmenu').elgg_topbardropdownmenu();
});
</script>
<div class="toolbarlinks2">
<a href="elgg/staging/pg/messages/admin" class="privatemessages" > </a>
<a href="elgg/staging/pg/settings/" class="usersettings">Settings</a>
<a href="elgg/staging/pg/admin/" class="usersettings">Administration</a>
</div>
</div>
<div id="elgg_topbar_container_right">
<a href="elgg/staging/action/logout"><small>Log out</small></a>
</div>
<div id="elgg_topbar_container_search">
<form id="searchform" action="elgg/staging/search/" method="get">
<input type="text" size="21" name="tag" value="Search" onclick="if (this.value=='Search') { this.value='' }" class="search_input" />
<input type="submit" value="Go" class="search_submit_button" />
</form>
</div>
</div><!-- /#elgg_topbar -->
<div class="clearfloat"></div>
<div class="Outer">
<div class="outerCenter">
<div class="Main">
<!--<div id="page_container">
<div id="page_wrapper">
<div id="layout_header">
<div id="wrapper_header"> -->
<!-- display the page title
<h1><a href=""></a></h1>
-->
<div class="Header">
<div class="Logo"><img src="elgg/staging/skoutaImages/Logo.jpg" alt="SKOUTA" title="SKOUTA" /></div>
<div class="hRow">
<div class="hColProPrf">
<ul>
<li><a href="elgg/staging/action/logout">LOGOUT</a></li>
</ul>
<p>Logged in as <a href="elgg/staging/pg/profile/admin"><strong>admin</strong></a> </p>
</div>
<div class="hCol4">
<ul>
<li><a href="elgg/staging/mod/form/my_forms.php?form_view=mine&id=3">My Blogs </a></li>
<li><a href="elgg/staging/mod/form/my_forms.php?form_view=mine&id=48">My Videos</a></li>
<li><a href="elgg/staging/pg/profile/admin">My Profile </a></li>
</ul>
</div>
<div class="hColProR">
<ul>
<li><span class="lpfInbox"><strong>Inbox :</strong></span></li>
<li><a href="elgg/staging/mod/messages/send.php"><img src="elgg/staging/skoutaImages/userIcon.gif" alt=" " width="21" height="27" border="0" /></a></li>
<li><span class="lpfInboxNos"><a href="#">2</a></span></li>
<li><a href="elgg/staging/pg/messages/admin"><img src="elgg/staging/skoutaImages/emailIcon.gif" alt=" " width="23" height="27" border="0" /></a></li>
<li><span class="lpfInboxNos"><a href="elgg/staging/pg/messages/admin">0</a></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="searchOuter">
<div class="smainContent">
<div class="mainContent">
<div class="smcLeft">
<div class="searchDetails">
<label>Search:</label> <!-- Search Related Block-->
<form id="searchform" name="searchform" action="elgg/staging/search/" method="get">
<div class="sdKeywords">
<input type="text" name="tag" value="Enter Keywords" onclick="if (this.value=='Enter Keywords') { this.value='' }" />
</div>
<input name="id" id="id" value="" type="hidden" />
<!--<input name="btnLogin" value="Search" type="button" class="sdbtnSearch" />
<input name="btnLogin" value="+ Click here for more search filters" type="button" class="sdbtnMSearch" />-->
<input name="btnLogin" value="Search" type="button" onclick="javascript:searchvalidate();" class="sdbtnSearch" />
<input name="btnLogin" value="+ Click here for more search filters" type="button" class="sdbtnMSearch" />
</form><!-- End of Search Related Block-->
</div>
<!--</div> -->
<!-- /#wrapper_header -->
<!--</div> --> <!-- /#layout_header -->
<!-- main contents -->
<!-- display any system messages -->
<!-- canvas -->
<!--<div id="layout_canvas"> -->
<!-- left sidebar -->
<!-- main content -->
<div id=""> <!--<div id="two_column_left_sidebar_maincontent">-->
<div id="content_area_user_title"><h2>Pages home</h2></div>
<div class="contentWrapper pageswelcome"><p>Welcome to this Elgg pages plugin. This feature allows you to create pages on any topic and select who can view them and edit them.</p></div>
<div> <!-- removed <div class="search_listing"> fro skouta -->
<div class="search_listing_icon">
<div class="icon">
<img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0" />
</div> </div>
<div class="search_listing_info">
<p><b><a href="elgg/staging/pg/pages/view/223/">Contact us</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p> </div>
</div>
<div> <!-- removed <div class="search_listing"> fro skouta -->
<div class="search_listing_icon">
<div class="icon">
<img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0" />
</div> </div>
<div class="search_listing_info">
<p><b><a href="elgg/staging/pg/pages/view/222/">Advertising</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p> </div>
</div>
<div> <!-- removed <div class="search_listing"> fro skouta -->
<div class="search_listing_icon">
<div class="icon">
<img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0" />
</div> </div>
<div class="search_listing_info">
<p><b><a href="elgg/staging/pg/pages/view/221/">Privacy Policy</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p> </div>
</div>
<div> <!-- removed <div class="search_listing"> fro skouta -->
<div class="search_listing_icon">
<div class="icon">
<img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0" />
</div> </div>
<div class="search_listing_info">
<p><b><a href="elgg/staging/pg/pages/view/220/">Terms of Use</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p> </div>
</div>
<div> <!-- removed <div class="search_listing"> fro skouta -->
<div class="search_listing_icon">
<div class="icon">
<img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0" />
</div> </div>
<div class="search_listing_info">
<p><b><a href="elgg/staging/pg/pages/view/217/">It's 5'0clock somewhere</a></b></p><p class="owner_timestamp">Last updated 5 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p> </div>
</div>
</div><!-- /two_column_left_sidebar_maincontent -->
<!--</div> /#layout_canvas -->
<!-- spotlight -->
<!-- footer -->
<!--<div id="layout_footer"><table width="977" height="80" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="591" rowspan="2" valign="middle"><div style="color:#FFFFFF;" align="center">Ad place for 468*80 Banner</div></td>
<td width="386" height="55" align="right">
<p align="right" class="footer_toolbar_links">
</p> </td>
</tr>
<tr>
<td align="right"><div align="right"><span class="footer_legal_links style1"><small>Free Template Designed by : <a href="http://www.edesignerz.net" target="_blank">EDESIGNERZ.NET</a></small></span></div></td>
</tr>
</table>
</div> --><!-- /#layout_footer -->
<!--<div class="clearfloat"></div>
</div>--><!-- /#page_wrapper -->
<!--</div>--><!-- /#page_container -->
<!-- insert an analytics view to be extended -->
</div> <!-- Search outer-->
</div> <!-- Search Main -->
<div class="footerMain">
<div class="outerCenter">
<div class="footer">
<div class="footerCol1">
<h4>Copyright Skouta 2009. All Rights Reserved.</h4>
<ul class="flMenu">
<li class="licol-1"><a href="elgg/staging/pg/pages/view/220/">Terms of Use</a></li>
<li class="licol-1"><a href="elgg/staging/pg/pages/view/221/">Privacy Policy</a></li>
<li class="licol-1"><a href="elgg/staging/pg/profile/admin">Company Profile</a></li>
<li class="licol-1"><a href="elgg/staging/pg/pages/view/222/">Advertising</a></li>
<li class="licol-1"><a href="elgg/staging/pg/pages/view/223/">Contact us</a></li>
<li class="licol-2 licol-first"><a href="elgg/staging//account/register.php?rt=1">Sign Up</a></li>
<li class="licol-2"><a href="elgg/staging/pg/profile/admin">My Account </a></li>
<li class="licol-2"><a href="elgg/staging/account/forgotten_password.php">Retrieve Password</a></li>
</ul>
</div>
<div class="footerCol2">
<h4>Share. Create. Explore</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor dapibus nibh. Suspendisse lorem quam lorem ipsum dolor sit amet, sectetur dipiscing elit. Praesent tempor dapibus nibh.</p>
</div>
<div class="footerCol3">
<h4>Search</h4>
<form id="searchformfoot" name="searchformfoot" action="elgg/staging/search/" method="get">
<div class="rCornerFooter">
<input name="tag" type="text" class="footerCol3input" value="Enter Keywords" onclick="if (this.value=='Enter Keywords') { this.value='' }" />
</div>
<input name="id" id="id" value="" type="hidden" />
<p>
<!--<input name="btnLogin" value="Search" type="button" onclick="javascript:searchvalidate();" class="sdbtnSearch" />-->
<input name="btnSearch" type="button" value="Search" class="btnSearch" onclick="javascript:searchvalidatefoot();" />
</p>
</form>
</div>
<div class="footerCol4"><a href="#"><img src="elgg/staging/skoutaImages/siteby.jpg" alt="Site by" width="65" height="22" border="0" /></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thats a big post. I just wanted the stuff in the <head> section :) Anyway, if you look at your jquery includes in your head section the problem should jump out at you:
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.2.6.pack.js">
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js">
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.3.2.min.js">
<script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-1.7.2.custom.min.js">
You are loading the old version (jquery-1.2.6 & jquery-ui-personalized-1.5.3) and the new version (jquery-1.3.2 & jquery-ui-1.7.2) at the same time. You cant do that.
Cheers,
@divagater - I'm wondering if this approach of specifying the exact attributes of an html element for this plugin to parse and then use the DOM model to add it wouldn't be a bottleneck in performance later on when sites gets heavier.
By all means you should take all the credit for the creative idea of configuring a plugin like that as I haven't seen that before used in plugins here but it isn't really that friendly and it is not as elegant as "simply" editing the view code of some plugin and just displaying it. (like for the photo rating plugin).
Regards,
@liri
I appreciate the comments. My philosophy is that the plugin should be self contained and not require editing the code of other plugins. If I followed the approach of the other rating plugins then after upgrading elgg I would have to re-edit all the various views. I don't like that approach. Honestly I think the approach I came up with is more elegant :) Regardless, users have a choice and that is a very good thing.
As far as being a bottlekneck that seems unlikely to me because the widget is only being added to the objects currently displayed. I could see some slow down possible if there were hundreds of entities being displayed on a single page.
Folks that aren't sure how to come up with a view config on their own usually just ask in the forums and I post it when I have the time and there are a handful of views for most common things already available.
Cheers,
@Divagater
note taken, thanks.
is it possible then to take the views approach with your plugin? (i.e to call the rating view from another plugin by explicitly calling it from the other plugin's view)
Regards,
Liran.
hi thanks for your reply. eventhough i have tried like removed old jquery and only inserted newly one.
still that rating star not shown.Why?
@liri
Check out the latest release. It will allow you to manually insert the widget.
~Billy