Custom HTML Tags using JavScript

-
Custom Tags in HTML using JavaScript.

Browsers allow us to use a predefined set of HTML tags. There are times when we want to use our own tags in our html documents.

Custom tags in server side scripting

Server side scripting languages have the feature of adding our own tags to the server side scripts such as jsp. For example we use jsp tag libraries to achieve this in java. There is no big magic in this. The tag library actually prints a creates a HTMl code snippet for the given tags and replace the original html with these constructed HTML. The custm tag is converted to html before it is seen by the browser. But at the end the browsers see only predefined html tags.

Custom tag in JavaScript

Is it possible to make the browser react to a custom tag when it encounters such one in the DOM?

This is possible using JavaScript, when the browser encounters your custom tag, it can handl it like any other valid predefined tag.

Consider we have custom tag  <mytag id="mtag" txt="google"  url="http://www.google.com"> To go to google click </mytag>
we will let the browser process these tags as below

To go to google click google


A complete example is below.
<html>
<head>
  <script>
// function to trigger onload
  function p(){
   //document.createElement("mytag");
   var a =   document.getElementsByTagName("mytag");
   var obj = null;
   for(i=0;i<a.length;i++){
     obj = new mytag(a[i]);
    }
 }
//process custom tag mytag
  function mytag(c){
   var txt = null;
   var url = null;
   if(typeof c.attributes.type != null){
    for(k = 0; k < c.attributes.length; k++){
      var attrib = c.attributes[k];
          if(attrib.name == 'txt'){
         txt = attrib.value;
      }else if(attrib.name == 'url'){
         url = attrib.value;
      }//if
    } //for              
   }//if
   this.f = document.createElement('span');
   this.f.innerHTML = "<a href='"+url+"'>"+txt+"</a>";
   c.appendChild(this.f);
  }
</script>
</head>
<body onload="p()">
 <mytag id="mytag1" txt="google"  url="http://www.google.com"> To go to google click </mytag> <br/>
 <mytag id="mytag2" txt="yahoo" url="http://www.yahoo.com">To go to yahoo click </mytag>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Log4j multiple WAR files in single EAR configuration

-
Log4j multiple WAR files in single EAR configuration Problem: When you have multiple WAR files under the same EAR with multiple log4j config files in each of the war files, the logging API will pickup the first available config file and ignores the list. i.e, only a single log4j config file applies to entire EAR. Consider the below app app.ear |__admin.war    |__WEB-INF/classes/log4.xml |__web.war    |__WEB-INF/classes/log4j.xml When you deploy this app to the server all logs of two war files admin.war and web.war will go to admin.war' log. The log4j.xml in web.war has no effect here. There are some complex solutions for this like adding a logback, specifying package level log files in log4j configuration etc. Solution The easiest way is configuring the context param in web.xml In your web.xml add the following context param will send the log4j config locations specific to the contexts and fixes this issue. web.war/WEB-INF/classes/log4j...
More posts »

Java NIO2 - Watching a directory for changes. FileWatcherService.

-
Image
File Watch Service The NIO2 WatchService API provides the ability for java code to watch for file modifications in a directory in the filesystem. A WatchService object watches the folder it is registered with and signals the changes detected through event notifications.  Steps to create a WatchService Create a WatchService object (FileSystem.newWatchService()) Register the directories to be watched with the WatchService (WatchService.register()) Watch for file change events (poll()/take() methods) Retrieve the event keys and process them Rest the key and got to step 3 to watch again. Example code Below is a simple working code. import java.io.IOException; import java.nio.file.Path; import java.nio.file.Paths; import java.nio.file.StandardWatchEventKinds; import java.nio.file.WatchEvent; import java.nio.file.WatchKey; import java.nio.file.WatchService; import java.util.List; import java.util.concurrent.TimeUnit; public class FileWatcherTest { private sta...
More posts »

Ubuntu Add programs to launcher (Desktop)

-
Ubuntu Add programs to launcher (Desktop) Manual Create .Dekstop file  Move the file to ~/.local/share/applications (for local user) or /usr/share/applications folder (for global) S ample desktop file for dbeaver [Desktop Entry] Version=1.0 Type=Application Terminal=false Name=DBeaver Community GenericName=UniversaL Database Manager Comment=Universal Database Manager and SQL Client. Path=/usr/share/dbeaver-ce/current/ Exec=/usr/share/dbeaver-ce/current/dbeaver Icon=/usr/share/dbeaver-ce/current/dbeaver.png Categories=IDE;Development WM_CLASS=DBeaver StartupWMClass=DBeaver StartupNotify=true Keywords=Database;SQL;IDE;JDBC;ODBC;MySQL;PostgreSQL MimeType=application/sql   Alacarte Alacarte is a menu editing tool. sudo apt install alacarte will install alacarte. Open alacarte Create new menu entry Enter the command to start the item
More posts »