home.


Tagged: html


Use html to order a border with a title around things

You can group items with a border in HTML using fieldset and you can also give that border a title using legend.

The title breaks the border briefly at the top.

Here’s an example which you can use to impress your friends, family, dogs, cats and potential parliamentary representatives.

<fieldset style="border: 1px dashed black">
  <legend>Ladies and gentlemen we are floating in space</legend>
  Sup
</fieldset>
css html

HTML, CSS: Make a div float in the middle of page

First make the position of the div fixed. We’ll place it at the bottom of our screen by setting the bottom to 5px.

We make it so the div starts from the middle of the screen by setting the left property to 50%.

But this won’t make it exactly in the middle of the screen, of course, since this mean it starts from the middle of the screen, not that its centre point is in the middle of the screen.

To properly centre the div use the transform property to move the div half its width to the left.

  <div
    style="position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%);">
    I am centered. Rejoice.
  </div>
css html

Use data binding in the HTML Template element standalone without Polymer

If you’re using the new template tag to define inert content in your HTML, you may want to use data binding also.

This comes as default with Polymer, but they created a library–now only used in a previous version of Polymer–that allows you to data bind standalone/independently of Polymer.

Let’s first user bower to get that bower install -s Polymer/TemplateBinding. This puts a couple of repositories in your bower_components library.

Now you can use the examples here as below:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bower_components/TemplateBinding/load.js"></script>
    <title>Template binding</title>
    <style>
    </style>
  </head>
  <body>
    <ul>
    <template id="text" repeat="{{ text }}">
      <li>Text is bound here: {{ value }}</li>
    </template>
  </body>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var t = document.getElementById('text');
      t.model = {
        text: [
          { value: 'Fee' },
          { value: 'Fi' },
          { value: 'Fo' },
          { value: 'Fum' }
        ]
      };
  </script>
</html>
html-template html-data-binding polymer

Formatting/Beautify HTML and Javascript from the command line

First, install the js-beautify package from npm.

sudo npm -g install js-beautify

Now make some dodgily formatted HTML with javascript

echo '<html></body></body><script> var i = 0; var j = 1; </script></html>' > dodgy.html

js-beautify takes -f - to find things from the command line, and --type html to say the javascript is embedded in some HTML. Finally we pipe to less for viewing.

cat dodgy.html | js-beautify -f - --type html

The output is:

<html>
</body>
</body>
<script>
    var i = 0;
    var j = 1;
</script>
</html>

You can add -o dodgy.html to replace the original text in dodgy.html.

unix javascript html beautify npm

Page 1 of 1