I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Font awesome stars</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.star-selected
{
color:pink;
}
</style>
</head>
<body>
<form method="POST" action="someaction.php">
<div class="form-group">
<input type="hidden" name="stars">
<i class="fa fa-star" aria-hidden="true" value="1"></i>
<i class="fa fa-star" aria-hidden="true" value="2"></i>
<i class="fa fa-star" aria-hidden="true" value="3"></i>
<i class="fa fa-star" aria-hidden="true" value="4"></i>
<i class="fa fa-star" aria-hidden="true" value="5"></i>
</div>
<button type="submit">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
(function()
{
var theStars = $('form').find('i');
$('i').on('click', function()
{
theStars.removeClass('star-selected');
var theStarIclicked = $(this);
var highVal = theStarIclicked.attr('value');
theStarIclicked.addClass('star-selected');
$("input[name='stars']").attr('value',highVal);
theStars.each(function(i)
{
if($(this).attr('value') < highVal)
{
$(this).addClass('star-selected');
}
});
console.log('Star selected '+$("input[name='stars']").attr('value'));
});
})();
</script>
</body>
</html>
Monday 25 July 2016
Wednesday 6 April 2016
jQuery plugin to insert external content
This jQuery plugin takes 2 parameters:
- The location of an external website
- The element within that location which contains content you would like to insert in yours
Wednesday 23 March 2016
jQuery plugin which takes and receives form data
This jQuery plugin to take all form data, pass it to a named script and return a message to a named HTML element. Particularly good with Twitter Bootstrap.
See the code here.
See the code here.
Use jQuery to handle GET requests in a Twitter Bootstrap page
Today, I created a jQuery plugin. It takes GET requests via apage URL and passes the content to declared HTML elements.
See the code here.
See the code here.
HTML includes like PHP using jQuery
Here I have created a jQuery plugin to perform HTML includes (sub pages) similar to method possible in PHP.
Find the code here.
Find the code here.
Dynamically make items active in Twitter Bootstrap navigation using jQuery
Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.
Find the code here.
Tuesday 22 March 2016
Search multiple database tables using PDO
I have created a PHP class based on PDO. It searches multiple database tables. It handles boolean and normal string queries. Results are displayed as Twitter Bootstrap tables. Find it here.
Subscribe to:
Posts (Atom)