Create tooltip image that changes on hover

Created a grey image that isn’t in your face but when you hover over it, it turns into a color image. And then you can set tooltip property on hover.

CSS

/* Tooltips */
.infotip {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: bottom;
    background: url('info-grey.png');
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.infotip:hover {
    background-image: url('info.png');
}

HTML

<span class="infotip"></span>

jQuery DatePicker with default date

Here’s how you could use jQuery’s Datepicker component within your HTML. There are 2 variations of Datepicker. One is normal date picker where user would select a date from the calendar. The other one is a readonly date field that would default the current date and is readonly.

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="static/css/menu.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  assignDates();
});
var assignDates = function(){
  $( "#expiration_date" ).datepicker({
    changeMonth: true,
    changeYear: true
  });
  $( "#creation_date" ).datepicker({
    changeMonth: true,
    changeYear: true
  });
  $( "#creation_date" ).datepicker('setDate', new Date());
};
</script>

<div class="pure-control-group">
    <label for="expiration_date">Expiration Date</label>
    <input id="expiration_date" type="text" placeholder="Expiration Date" required>
    <span class="pure-form-message-inline">*</span>
</div>

<div class="pure-control-group">
    <label for="creation_date">Creation Date</label>
    <input id="creation_date" type="text" onmousedown="return false;" readonly>
</div>

Working samples available on GitHub

JQuery autocomplete – limit search results

By default, JQuery autocomplete would pull and display all matching results. In order to restrict the number of results so that the menu doesn’t go crazy long, I found a solution to resolve this issue:

Default autocomplete source method:

$("#auto").autocomplete({
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        response( $.ui.autocomplete.filter(email_contacts, extractLast( request.term ) ) );
    }
});

Slice the results to return top 10.

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);
        response(results.slice(0, 10));
    }
});

Django – Implement textbox with autocomplete feature to enter multiple emails separated by comma

The JavaScript portion to implement an autocomplete was pretty straightforward. JQuery site for more the sample. The challenge was to get this implementation into Django and specially because the source data was dynamically being passed from the view. But once I figured out how to convert the python list to a javascript array, things were pretty straightforward.

View

def sendFulfillmentEmail(request, tenant_id):
    # Eliminating code before
    email_contacts = [str(u.email) for u in User.objects.all().filter(is_active=True)]
    email_contacts = simplejson.dumps(email_contacts)
    # Eliminating code after
    template = 'app/fulfillment_email_form.html'
    return render_to_response(template, locals(), context_instance=RequestContext(request))

Template
Now, the email_contacts need to be converted to a JavaScript array and used as a source.

{% extends "../../opportunities/templates/opportunities/base.html" %}
{% block extrahead %}
< link rel="stylesheet" href="/site-media/js/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css">
< script src="/site-media/js/jquery-ui-1.11.4/jquery-ui.js"></script>
<!-- Also requires the jquery.js file but that's already imported in base.html so not importing again -->


$(function() {
	//alert('{{email_contacts|safe}}');
	var email_contacts = {{email_contacts|safe}};   //-- The safe filter converts the JSON content to JavaScript array
	function split( val ) {
	  return val.split( /,\s*/ );
	}
	function extractLast( term ) {
	  return split( term ).pop();
	}
 
        $( "#id_email_cc" )
		// don't navigate away from the field on tab when selecting an item
		.bind( "keydown", function( event ) {
			if ( event.keyCode === $.ui.keyCode.TAB &&
			  $( this ).autocomplete( "instance" ).menu.active ) {
				event.preventDefault();
			}
		})
		.autocomplete({
			minLength: 0,
			autoFocus: true,     //- This will automatically select the first item from the menu. On hitting tab, selected item will be populated.
			source: function( request, response ) {
			        // delegate back to autocomplete, but extract the last term
			        response( $.ui.autocomplete.filter(
				    email_contacts, extractLast( request.term ) ) );
        	        },
			focus: function() {
				// prevent value inserted on focus
				return false;
			},
			select: function( event, ui ) {
				var terms = split( this.value );
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push( ui.item.value );
				// add placeholder to get the comma-and-space at the end
				terms.push( "" );
				this.value = terms.join( ", " );
				return false;
			}
		});
});

<meta name="robots" content="NONE,NOARCHIVE" />
{% endblock %}
</pre>
{% block content %}

<!-- Eliminating other parts of form -->

			{{fulfillment_email_form.email_cc}}
			
		        <!-- View the source of HTML file and the id of the field is set to id_email_cc and that's what is used in the JQuery function -->
<!-- Eliminating other parts of form -->
{% endblock %}

Django, HTML, JavaScript, CSS – ModalWindow with Scroll on Button Click

In the previous post, I displayed how a modal window can be used to show some basic information. But this time around, I had more challenges to deal with:
1. Open the Modal Window on click of button rather than a link. So the button had to be used like a link by using location.href
2. The data in the modal window was huge. So I had to use a scrolling modal window.
3. The CSS for the X(close) button had to be adjusted
4. The scroll borders had to be hidden on the modal window as they looked ugly
5. The modal window had a list of items to select from. After selecting the item, it should be loaded on the main page and the modal window had to be closed so the user doesn’t have to do that extra step.

Here’s the solution:
HTML code
The onclick=”location.href”#kw_fulfillment_templates’ opens up the modal window on click of the button and simulates a link behavior on a button.

<div class="table-row">
	<div class="table-cell">
		Select fullfillment email template:
	</div> 
	<div class="table-cell">
		<input type="button" name="btn_fulfillment_template" value="Email templates" onclick="location.href='#kw_fulfillment_templates'">
	</div>
	<div class="table-cell">
		<span id="selected_template_name" style="color: RGB(0,0,100)"></span>
	</div>
</div>
<div id="kw_fulfillment_templates" class="modalDialog">
	<div>
	<a href="#close" title="Close" class="modalclose">X</a>
	<h2>Fulfillment email templates for kiteworks orders</h2>
	<table>
		{% for row in fulfillment_email_templates %}
			<tr class="{% cycle "row1" "row2" %}">
				<td><input type="button" id="tmp_sel_{{forloop.counter}}" onclick="setTemplateData({{forloop.counter}})" value="Select"></td>
				<td id="tmp_name_{{forloop.counter}}">{{row.name}}</td>
				<td id="tmp_desc_{{forloop.counter}}">{{row.description}}</td>
				<td id="tmp_subj_{{forloop.counter}}" style="display: none">{{row.email_subject}}</td>
				<td id="tmp_body_{{forloop.counter}}" style="display: none">{{row.email_body}}</td>
			</tr>
		{% endfor %}
	</table>
	</div>		
</div>

CSS Code
The overflow:hidden would enable scrollbars but hide the physical scroll bars.


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 100ms ease-in;
	-moz-transition: opacity 100ms ease-in;
	transition: opacity 100ms ease-in;
	pointer-events: none;
	overflow: scroll;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 800px;
	position: relative;
	margin: 2% auto;
	padding: 15px 15px 15px 15px;
	border-radius: 5px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	overflow: hidden;
}

.modalclose {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 12px;
	text-align: center;
	top: 10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.modalclose:hover { background: #00d9ff; }

JavaScript code
The location.href=”#close” takes care of closing the modal window after the JavaScript implementation is complete.

function setTemplateData(index) {
	$td_name = $( "#tmp_name_"+index );
	$td_subj = $( "#tmp_subj_"+index );
	$td_body = $( "#tmp_body_"+index );

	$span_name = $( "#selected_template_name" );
	$input_subject = $( "#id_email_subject ");
	$txtarea_body = $( "#id_email_body ");

	$span_name.text($td_name.text());
	$input_subject.val($td_subj.text());
	$txtarea_body.val($td_body.text());

	location.href="#close";
}

Modal window with scroll

Modal window in Django with dynamic Id’s

I had multiple objects on a page and each one of them have independent information that needs to be displayed on the modal window. Here’s what I did for the same:

HTML Code


<p style="padding: 0px 20px 5px 20px"><a href="#openModal_{{installation.id}}">Show additional usage data</a></p>
<div id="openModal_{{installation.id}}" class="modalDialog">
	<div>
	<a href="#close" title="Close" class="close">X</a>
	<h2>Additional usage data metrics</h2>
	<p style="padding: 0px 20px 5px 20px">Software Version: {{installation.getKwSoftwareVersion}}</p>
		<p style="padding: 0px 20px 5px 20px">Active Licensed Users: {{installation.getActiveLicensedUsers}}</p>
		<p style="padding: 0px 20px 5px 20px">FIPS: Enabled</p>
		<p style="padding: 0px 20px 5px 20px">Files sent: 1,234</p>
		<p style="padding: 0px 20px 5px 20px">Emails sent: 5,678</p>
	</div>
</div>

CSS Code

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

More description on the Modal window behavior is available in this tutorial.

Django template CSS – Display rows with alternate colors

Here’s a snippet to print rows in Django template with alternate colors. Assume you have 2 CSS styles for rows:

.row1 {
    background: #EDF3FE;
}
.row2 {
    background: white;
}

Template code:

{% for row in dataset %}
	<tr class="{% cycle "row1" "row2" %}">
		<td>{{row.customer}}</td>
		<td>{{row.sfid}}</td>
		<td>{{row.package}}</td>
		<td>{{row.support_expires}}</td>
	</tr>
{% endfor %}