Skip to content

Instantly share code, notes, and snippets.

@jmealo

jmealo/gist:37e3234a6a55d266b960

Created January 9, 2015 19:02
Show Gist options
  • Save jmealo/37e3234a6a55d266b960 to your computer and use it in GitHub Desktop.
Save jmealo/37e3234a6a55d266b960 to your computer and use it in GitHub Desktop.
Download ZIP
dialpad code
Raw
gistfile1.html
<html>
<head>
<title>Softphone</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
var $dialpad = $('#dialpad');
$(document).on('click', '#dialpad,[title="Dialpad"]', function(e) {
e.stopPropagation();
if (!$dialpad.is(":visible")) {
$dialpad.css({
position:'absolute',
top: e.pageY,
right: '15px',
display: 'block'
});
}
});
$(document).on('click', function(e) {
if(!$.contains($dialpad, e.target)) {
$dialpad.fadeOut();
e.stopImmediatePropagation();
e.stopPropagation();
}
});
$('#dial-view').on('click', function() {
$('#dial-view-pane').show();
$('#contacts-view-pane').hide();
});
$('#contacts-view').on('click', function() {
$('#dial-view-pane').hide();
$('#contacts-view-pane').show();
});
$('#contacts-list-select,#dial-call-btn').on('click', function() {
$dialpad.fadeOut();
});
});
</script>
</head>
<body>
<div id="dialpad" style="display: none; width: 230px; height: 200px; background-color: white; border: 1px solid black;">
<button id="dial-view">Dialpad</button>
<button id="contacts-view">Contacts</button>
<hr>
<center>
<div id="dial-view-pane">
<button>1</button><button>2</button><button>3</button><br>
<button>4</button><button>5</button><button>6</button><br>
<button>7</button><button>8</button><button>9</button><br>
<button>*</button><button>0</button><button>#</button><br>
<hr>
<button id="dial-call-btn">Call</button>
</div>
<div id="contacts-view-pane" style="display: none">
<input placeholder="Search contacts...." style="width: 175px">
<select id="contacts-list-select" multiple="true" style="height: 120px">
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
<option>Adam - Mr. Frosty - 555-555-5555</option>
</select>
</div>
</center>
</div>
<!--- YOUR CODE HERE ---><!--- YOUR CODE HERE ---><!--- YOUR CODE HERE --->
<!--- YOUR CODE HERE ---><!--- YOUR CODE HERE ---><!--- YOUR CODE HERE --->
<!--- YOUR CODE HERE ---><!--- YOUR CODE HERE ---><!--- YOUR CODE HERE --->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment