Pages

Friday 22 March 2013

Simple JQuery Tooltips


How To Create A  Simple Tooltips With JQuery


  1. Identify the “target” that need to show the tooltips message.
  2. Create a tooltips message and CSS style for it.
  3. Three functions, – showTooltipshideTooltipschangeTooltipsPosition.
  4. While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position withchangeTooltipsPosition.
  5. While mousemove around the “target“, keep change the tooltips message position with changeTooltipsPosition.
  6. While mouseleave the “target”, use hideTooltips to hide the tooltips message.
  7. Use jQuery to do it 

Step 1: Target

The “hint” and “username label” are the target to show the tooltips message.
<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>

Step 2: Tooltips CSS

Create a CSS style for tooltips message.
.tooltip{
 margin:8px;
 padding:8px;
 border:1px solid blue;
 background-color:yellow;
 position: absolute;
 z-index: 2;
}

Step 3: Show Tooltips

Append the tooltips message to the “body” tag, and initial the tooltips message position.
var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
     .appendTo('body');
   changeTooltipPosition(event);
};

Step 4: Change Tooltips

Change the tooltips message position.
var changeTooltipPosition = function(event) {
 var tooltipX = event.pageX - 8;
 var tooltipY = event.pageY + 8;
 $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

Step 5: Hide Tooltips

Hide the tooltips message.
var hideTooltip = function() {
 $('div.tooltip').remove();
};

Step 6: Bind It

Bind the mouse events to the target.
$("span#hint,label#username'").bind({
 mousemove : changeTooltipPosition,
 mouseenter : showTooltip,
 mouseleave: hideTooltip
});

Try it yourself

In this example, mouseover the hint or label to show the tooltips effect.
<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
 #hint{
  cursor:pointer;
 }
 .tooltip{
  margin:8px;
  padding:8px;
  border:1px solid blue;
  background-color:yellow;
  position: absolute;
  z-index: 2;
 }
</style>
 
</head>
 
<body>
 
<h1>jQuery tooltips example</h1>
 
<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
 var changeTooltipPosition = function(event) {
   var tooltipX = event.pageX - 8;
   var tooltipY = event.pageY + 8;
   $('div.tooltip').css({top: tooltipY, left: tooltipX});
 };
 
 var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
            .appendTo('body');
   changeTooltipPosition(event);
 };
 
 var hideTooltip = function() {
    $('div.tooltip').remove();
 };
 
 $("span#hint,label#username'").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
 });
});
 
</script>
 
</body>
</html>


Wednesday 13 February 2013

Color theory for Designers

Color theory

In the visual arts, color theory is a body of practical guidance to color mixing and the visual effects of specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490), a tradition of "colory theory" began in the 18th century, initially within a partisan controversy around Isaac Newton's theory of color (Opticks, 1704) and the nature of so-called primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.


Color theory was originally formulated in terms of three "primary" or "primitive" colors—red, yellow and blue (RYB)—because these colors were believed capable of mixing all other colors.



Thursday 12 April 2012

HTML5 Tags


Wednesday 4 April 2012

How jQuery works?


How jQuery works?

First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:




How to get the element?

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.
  • $("#header") = get the element with id="header"
  • $("h3") = get all <h3> element
  • $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
  • $("ul li") = get all <li> element nested in all <ul>
  • $("ul li:first") = get only the first <li> element of the <ul>

Wednesday 21 September 2011

How create good looking form without table

This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects:

Step 1: Create basic HTML structure


<form> <div class="box"> <h1>Contact Form :</h1>   <label>    <span>Full name</span>     <input type="text" class="input_text" name="name" id="name"/>  </label>    <label>     <span>Email</span>  <input type="text" class="input_text" name="email" id="email"/> </label>   <label>   <span>Subject</span> <input type="text" class="input_text" name="subject" id="subject"/>     </label> <label>   <span>Message</span>  <textarea class="message" name="feedback" id="feedback"></textarea>     <input type="button" class="button" value="Submit Form" />             </label>                                  </div>     </form>

Step:2 Create CSS Code

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif;
background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 { 
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}

 We have created a good looking form without table


Tuesday 30 August 2011

Difference between margin and padding





CSS provides two properties named margin and padding for keeping space between HTML Box type elements. But why do we have two properties for the same reason? Are they similar?
No. They have a main difference.
Padding - defines space between border and element content
Margin - defines space between border and other outer elements
(Look at the above diagram)