CODEWITHSUNDEEP
javascripthtmlfonts
user7965277
user7965277

Reputation:

Open font dialog on HTML page

How can I open font dialog (something like this ↓) on HTML page using JS?enter image description here

Thanks for help.

Upvotes: 0

Views: 1649

Answers (2)

Djordje Vujicic
Djordje Vujicic

Reputation: 412

There is no such a command in JavaScript, but you could make your own little font picker. Here is the example: 

function updateh1family() {
  var selector = document.getElementById('selecth1FontFamily');
  var family = selector.options[selector.selectedIndex].value;
  var h1 = document.getElementById('text')
  h1.style.fontFamily = family;
}

function updateSize() {
  document.getElementById('text').style.fontSize = document.getElementById('size').value + "px";
}

function updateColor() {
  document.getElementById('text').style.color = document.getElementById('color').value;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <font id="text" style="font-size:30px;">Some text</font><br>
  <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
    <option> Serif </option>
    <option> Arial </option>
    <option> Sans-Serif </option>                                  
    <option> Tahoma </option>
    <option> Verdana </option>
    <option> Lucida Sans Unicode </option>                               
  </select>
  <input type="number" id="size" min="0" max="70" value="30" onchange="updateSize()" />
  <input type="color" onchange="updateColor()" id="color" />
</body>

</html>

You could even make it look like a dialog with jQuery: https://jqueryui.com/dialog/

function updateh1family() {
  var selector = document.getElementById('selecth1FontFamily');
  var family = selector.options[selector.selectedIndex].value;
  var h1 = document.getElementById('text')
  h1.style.fontFamily = family;
}

function updateSize() {
  document.getElementById('text').style.fontSize = document.getElementById('size').value + "px";
}

function updateColor() {
  document.getElementById('text').style.color = document.getElementById('color').value;
}

function showDialog() {
  $("#dialog").dialog();
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <button onclick="showDialog()">open dialog</button>
  <div id="dialog" style="display:none;">
    <font id="text" style="font-size:30px;">Some text</font><br>
    <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
    <option> Serif </option>
    <option> Arial </option>
    <option> Sans-Serif </option>                                  
    <option> Tahoma </option>
    <option> Verdana </option>
    <option> Lucida Sans Unicode </option>                               
  </select>
    <input type="number" id="size" min="0" max="70" value="30" onchange="updateSize()" />
    <input type="color" onchange="updateColor()" id="color" />
  </div>
</body>

</html>

Upvotes: 2

Rajiv S Mehta
Rajiv S Mehta

Reputation: 50

What platform are you using? Have you tried HTA? With pre HTML , this is not possible, look around for HTA and activeX

Upvotes: 0

Related Questions