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.

Tag hinting or label hinting javascript library

Tag hinting or label hinting is a very useful thing for forums and blogs, where it is used to tag post or as generally termed as auto suggestion.
tag-hinting.js is a Javascript library for embedding tah hinting to a webpage, it is very useful on blogs and forums where you tag post. I have created it in such a way that it is easy to use and understand. All you have to do is include the tag-hinting.js file in your webpage and write the following lines:
<script type="text/javascript">
arr = ['your','tag','values'];
</script>

and a div to show the hints.

<div id="hintwords" style="display: none;"></div>

The function which is to be called is:

hint(this, event)

Note:

  • Other style values can be added to above div.
  • id of the div has to be hintwords.
  • arr has to be declared and should be after file inclusion.
  • hint take only the specified arguments.
  • hint can work on keypress, keyup and keydown events.

There is a example file on this in repository on git. Pretty soon i’ll be sharing a library which interacts with database and can be helpful in searches.

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.

jQuery plugin – cycle: Slideshow of your own in a sec

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

 

Requires: Javascript, jquery

Using:

<div class="classObject">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>

<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="jquery.cycle.js">
</script>
<script type="text/javascript">
  $(document).ready(function(){
       $('#classObject').cycle({
               fx:'shuffle',
               shuffle:{
                         top:-230,
                         left:230
                       },
               easing:'easeInOutBack',
               delay:-2000
       });
  });
</script>
Explanation:
          Line 12: it means check if document is ready to apply javascript over it.
          Line 13: $(‘#classObject’) selects the object having class name classObject. # is called selector. We apply a method cycle over this class.
          Line 14: fx(function/effect) is required parameter which can be defined in many ways here it is shuffle.
          Line 15: shuffle is optional, if its not defined there is default value top:15px and left: width of container. Here both are defined in line 16 and 17.
         Line 19: easing can only be used with easing plugin of jquery.
         Line 20: delay is also required parameter, which takes time for effect for single transition in milliseconds.

 

Note:

  • Take care of the brackets people usually get it wrong. 
  • “id” can also be used instead of class (instead of #(hash) .(dot) is used as selector). 
  • jquery.js is required.
  • jquery easing plugin will make it great.
  • Give 3-4 div same class name, by this way there will equal number of div having slideshow of there own. Like if you need multiple slides at a time slideshow.
  • There are many other cool fx. You can also create custom.
  • There are also some other parameter apart from fx, delay etc. Take a look into the coding of jquery.cycle for other parameters.

There some great demos on the site of jQuery cycle. You can also find easing plugin on this site.

MySQL: Alternate to INNER JOIN

I came across a good way to write queries in mysql. Instead of using INNER JOIN there is a easy way to do it, sort of renaming the tables while writing query. Below is the example:Requires: MySQL

Using:

table1(
     id int,
     name varchar(30),
     age int)
table2(
     id int,
     address varchar(300))
SELECT a.name, a.age, b.address FROM table1 a, table2 b WHERE a.id = b.id;

Explanation:

‘id’ in both the table is primary key.

Look at the query renaming of table is done before retrieving the information we want. WHERE clause is very important in the query because there should be something which is common in both the tables in order to fetch the data. here we have taken id, it should not be necessarily primary key but just have common type.

Note:

  • You can also write queries instead of table name in FROM clause i.e., sub-queries.
  •  If you are not getting results as you expect, there is something wrong with the way query has been written. Try writing it some other way. And this will happen a lot with complex queries. 😛
  • So, this method will make your queries really powerful and easy. Time to replace INNER JOIN.