Creating custom HTML tags

Why not have something like facebook login button, which we see on many sites now. This is basically custom tag which facebook has made. In this post we will see how it can be made.

Requires: HTML, Javascript, CSS

Using:

CSS for the custom tag

<style type="text/css">
@media all 
{
IW\:button {
 font-size: 24pt;
 background-color:#999;
 border-top:1px solid #CCC;
 border-left:1px solid #CCC;
 border-right:2px solid black;
 border-bottom:2px solid black;
 border-radius:5px;
 font-family:"Times New Roman", Times, serif;
 cursor:pointer; 
 color:black;
 padding:1px;
 padding-left:2px;
 padding-right:2px;
}
} 
span{
 color:white;
 padding-left:2px;
 padding-right:4px;
 border-right: 2px solid #020;
}
</style>

Javascript for the custom tag

<script type="text/javascript">// <![CDATA[
function ActasMytag(myTag)
{
myTag.style.borderLeft = '1px solid #CCC';
myTag.style.borderTop = '1px solid #CCC';
myTag.style.borderRight = '2px solid black';
myTag.style.borderBottom = '2px solid black';
}

function ActasButton(myTag)
{
myTag.style.borderLeft = '1px solid black';
myTag.style.borderTop = '1px solid black';
myTag.style.borderRight = '2px solid #CCC';
myTag.style.borderBottom = '2px solid #CCC';
}
</script>

HTML to be written for the custom tag

Add ‘IW’ in xmlns of HTML.

<IW:button onmousedown="ActasButton(this)" onmouseup="ActasMytag(this)">IW&nbsp;Custom Button</IW:button>

Explanation:

Lets start with the HTML first.

Adding IW is an not that important. But should be done as browser can ignore the custom tag as it is not known to it.

Look at the html tag we have created. ‘IW’ is tag name we want to create. Notice the specified ‘button’ after ‘:’, it is written because only one custom tag can be inserted in a page but can have any number of attributes. So, to solve that problem we distinguish different tags on the basis of value written after ‘:’. Next we are calling Javascript function to give this tag functionality of a button.

Javascript

Line 2: This function changes the property back to default property we have set for our custom tag. It is called on mouseup.

Line 10: This function simulates the pressing of button. It is called on mousedown.

CSS

Line 2: @media all, what it does is the xmlns IW will work across the page and will apply CSS specified inside it.

Line 4: IW\:button selects the IW tag with attribute button and apply the defined CSS to it.

Note:

  • @media all is important part otherwise CSS may not work.
  • Modern browsers may run without xmlns and @media all.
  • <IW:button> should be there otherwise if IW is only specified, only one custom tag can be used.
  • JS function ActasButton is important because it makes button looks like its pressed on mouse button down.
  • Functionality like redirecting can be given onclick or performing any other action.

You can download the working repository from github.

Advertisements

Javascript Library for dynamic element creation

d-element.js is a javascript library I have created. With the help of it you can easily create dynamic elements, in just one line. Try it!

Required: d-element.js

Using:

$('div').addelement('p',{'background-color':'blue'},'hi');

Explanation:

     This has identical syntax as of jQuery. ‘div’ here is selector which selects all the div tags.
     addelement method takes three arguments of which first is required and null can be given in other two.

Note:

  •     Only element(ex: div), id(ex: .id), class(ex: #class) can be used as selector for now, element under which element has to be created.
  •     First argument of addelement is required which is the element to be created.
  •     Second argument if given should be associative array, it is for the attributes of the element to be created.
  •     Third argument is data, if any string to be inserted. It can be a string having other html elements.
  •     Check console for error logs.

Creating HTML elements dynamically

There are times when we want to create HTML elements on the page, result of a certain action. Below is explained how to do that using Javascript.

I have written a javascript which you can downloadPlease read “README” before using it.

Required: Javascript, HTML.

Using:

The javascript code for this is:
<script type="text/javascript">
var i = 0;
function creatediv()
{
 i++;
 var newelement = document.createElement('div');
 newelement.setAttribute('id', i);
 newelement.innerHTML = 'This is newly created div.';
 var parentelement = document.getElementById('presentdiv')
 parentelement.appendChild(newelement);
 var firstchild = parentelement.firstChild;
 parentelement.insertBefore(newelement, firstchild);
}
</script>

HTML code for this is:

<html>
<body>
<div id="presentdiv"&gt;This div is present here from the moment the page is opened.&lt;input type="button" value="Click to create new div" onclick="javascript:creatediv();"></div>
</body>
</html>
Explanation:

First, we see the div ‘presentdiv’. It has two nodes, first is the text node and another is input ‘button’. New div is created on clicking button. How?

Look at the javascript function creatediv().

          6: A new div is created using createElement(). It takes the HTML tagname of element to be created as argument.

          7: setAttribtue() sets the attribute of the element using it. Like we have set ‘id’ as i, which is incrementing on every click.

          8: innerHTML is used if you want to add text to the element. Mostly used with div.

          9: We saved parentelement i.e., ‘presentdiv’ for further use instead of calling again and again.

          10: appendChild() is called to append  the element we just created, div(i). It appends at the end of the ‘parentelement’.

          11: This line is used if we want to add new element at the beginning of parent element. ‘firstChild’ returns the first child of the ‘parentelement’.

          12:  insertBefore() is used if new element is to be inserted before the some element we know. Here we insert ‘newelement’ before ‘firstchild’.

Note:

    Also see lastChild and returning values of firstChild and lastChild.

Cool front page

There is a site on internet  We Are Empire. This site has pretty cool front page. Page is pretty descriptive too plus it don’t irritate the user by reloading for new content. Some other site like this which I personally liked is Nike‘s nike better world site. It takes a little while to load but every information is on just one single page and designed in awesome way using HTML5, z-index and many more things. We will come to it some other time.

But we will talk about the former one here. After running a console over the site, I understood what they had done. Well its nothing but Javascript and applaud to the maker, it is used very well for designing. It do not have flash.

  1. What they had done is when you click on the front logo which is image it shows you next div which is hidden behind it and hide the top div.
  2. Now you see 4 bubbles. Thats interesting now margin of the image in background of the bubble changes when you hover it while hiding the overflow. This is a good thing, must have taken long time to do that.
  3. Open at the bottom is the coolest thing. Click on it and another page comes with no page loading. Again is the game of margin. Margin-top is changed using Javascript to animate.
  4. There are smaller effects also like close appearing and hiding, get in touch etc.

So, this is how this front page is working. Try making yours with such innovation.

Here is a example of that a very short one.

<script type="text/javascript">
function anim(mydiv)
{
   var i = 0;
   while(i < 10)
  {
     mydiv.style.marginTop = 10*i + 'px';
     i++;
  }
}
</script>
<div id="mydiv" onclick="javascript:anim(this)">
    test
</div>

There is no need to explain the code above. Its self explanatory and use basics of Javascript and HTML.