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

Javascript/jQuery Menu

Here’s a working Javascript/jQuery Menu. It’s a horizontal menu with sub-menu items dropping vertically.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>menu demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  .ui-menu { 
      overflow: hidden;
  }
  .ui-menu .ui-menu {
      overflow: visible !important;
  }
  .ui-menu > li { 
      float: left;
      display: block;
      width: auto !important;
  }
  .ui-menu ul li {
      display:block;
      float:none;
  }
  .ui-menu ul li ul {
      left:120px !important;
      width:100%;
  }
  .ui-menu ul li ul li {
      width:auto;
  }
  .ui-menu ul li ul li a {
      float:left;
  }
  .ui-menu > li {
      margin: 5px 5px !important;
      padding: 0 0 !important;
  }
  .ui-menu > li > a { 
      float: left;
      display: block;
      clear: both;
      overflow: hidden;
  }
  .ui-menu .ui-menu-icon { 
      margin-top: 0.3em !important;
  }
  .ui-menu .ui-menu .ui-menu li { 
      float: left;
      display: block;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<ul id="menu">
  <li>
    <div>Home</div>
  </li>
  <li>
    <div>Inventory Management</div>
    <ul id="sub_menu">
      <li>
        <div>Add items</div>
      </li>
      <li>
        <div>Delete items</div>
      </li>
      <li>
        <div>Modify items</div>
      </li>
      <li>
        <div>View items</div>
      </li>
    </ul>
  </li>
  </ul>
 
<script>
$( "#menu" ).menu({position: {at: "left bottom"}});
$( "#menu li" ).hover(function() {
        $(this).find('ul').show();
    },
    function() {
        $(this).find('ul').hide();
});
</script>
</body>
</html>

Pretty Print JSON

I used to use a website to pretty-print my JSON. But realized that the site saves the data. If there’s data that could be confidential, it may not be a good idea use a 3rd party website. So I created a simple hosted page to pretty print a JSON.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
function onSubmit(){
	var $json_input = $( "#ta_json_input" );
	var json_out = JSON.stringify(JSON.parse($json_input.val()), null, 4);
	$json_input.val(json_out);
}
</script>
</head>
<body>
<form id="frmJson" name="frmJson">
<h2>Pretty JSON</h2>
<div>
<textarea id="ta_json_input" rows="30" style="width:100%; overflow-x: scroll; "></textarea>
</div>
<div>
<input type="button" value="Submit" onclick="onSubmit()" style="height:30px;">
</div>
</form>
</body>
</html>

Here’s how the page looks like:

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, 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.