HTML, JavaScript and CSS - Quick Tips

Posted on 03-04-2019 by Nadir Latif

Following are some quick tips related to HTML, JavaScript and CSS:

Free Font for Urdu language

A free font for Urdu language is provided by a Pakistani Organization called Center for Language Engineering (CLE). The organization conducts research and development in linguistic and computational aspects of languages, specifically of Pakistan and developing Asia

How to use CCS rules specific to FireFox

The CSS statement:

@-moz-document url-prefix() {
  h1 {color:red}
}

allows the CSS rule: h1 {color:red} to be applied only to Firefox browser

Using ems instead of Pixels for Typography

EM is a unit for font sizes. It is based on the font size of the container element.

For example if an element has a font-size set to 2em and the font-size of the container element is set to 20px, then the font-size of the target element will be 40px

Replacing a string using Javascript replace function

The replace function can be used to replace a substring with another string using regular expressions.

For example: str.replace(/substring/g, 'New Substring'); will replace all occurrences of 'substring' with 'New Substring'

Base64 Encoding of utf-8 encoded string using Javascript

The btoa function encodes an ASCII encoded string using Base64 encoding scheme. If the string is utf-8 encoded then the btoa function will not work correctly. The solution is to first url encode the string using encodeURIComponent and then call window.btoa function.

Passing parameters to Jquery event handler function

To pass a parameter to Jquery event handler, the parameter should be given as first argument to event function. The argument will be passed on as a property of event.data. For example:


jQuery(".selector").change({parameter: value}, function(event){
    user_function(event.data.parameter);
});
Fetching Html elements using JavaScript

Fetching parent node element of a HTML node. We can fetch the parent node of a html element using following code:


var x = document.getElementById("myLI").parentNode.nodeName;

Fetching html elements using CSS class names. We can fetch html elements from CSS classes using following JavaScript code:


var x = document.getElementsByClassName("example");

Fetching html elements using CSS selectors with Javascript. The following Javascript code fetches html elements using CSS selectors:


var x = document.querySelectorAll(".example");
Get current unix timestamp using Javascript

The Javascript function getTime returns the number of milliseconds since Jan 1st, 1970, which is called the unix timestamp

Adding tilt effect to images using tilt.js

Tilt.js is a library that allows adding tilt effect to HTML elements. For example div and image tags. To add a tilt affect to an image, the following code may be used:

Click to view code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tilt.js - DEMO</title>
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/tilt.jquery.min.js"></script>
    <script>
      $(document).ready(function () {
          var tilt = $('.js-tilt').tilt();
          var tiltOutput = $('.js-tilt-output').tilt();
          tiltOutput.on('change', function (e, transforms) {
              var output = $(this).closest('.js-parent').find('.js-output');
              $('<li><strong>X: </strong>' + transforms.percentageX + ' | <strong>Y: </strong>' + transforms.percentageY + '</li>').prependTo(output);
          });
      
          $('.js-destroy').on('click', function () {
              var element = $(this).closest('.js-parent').find('.js-tilt');
              element.tilt.destroy.call(element);
          });
      
          $('.js-enable').on('click', function () {
              var element = $(this).closest('.js-parent').find('.js-tilt');
              element.tilt();
          });
      });
    </script>
  </head>
  <body>
    <main>
      <a target="_blank" href="[some-url]">
	<img src="[image-url]" class="js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.2" data-tilt-perspective="250" width="961px"></a>
    </main>
  </body>
</html>
Scrolling to specific position in page

To scroll the page to a particular position, the following code may be used:


var temp_arr = location.href.split('#');
var div_id   = temp_arr[1];
var position = $('#' + div_id).position();
window.scrollTo(0, (position.top -100));

The above code causes the current page to scroll to a certain div. The id of this div is given by the url hash fragment.

The code uses the JQuery position function to get the left and top co-ordinates of the div tag. The window.scrollTo function is used to scroll 100px above this div tag, so it can be viewed properly.


Leave a Comment: