CSS Tooltips

No need of javascript to make tooltips. I got this simple css trick to make it.

CSS Code

a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.mytooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:200px;
}

a.mytooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

HTML Code

<a href=”#” class=”mytooltip”>Vikas Khera<span>https://vikaskhera.wordpress.com</span></a&gt;

CSS Tips & Tricks

Here is a list of CSS tips & tricks that will make your coding so much easier.

Sequence of the links is very important

a:link { color: #000; text-decoration: none; }
a:visited { color: #666; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
a:active { color: #333; text-decoration: underline; }

Use future proof CSS hacks method
<!–[If IE 5]>
ie 5
<![endif]– >

<!–[If lte 6] >
ie 6 and lower
<![endif]–>

<!–[If gte 7] >
ie 7 or higher
<![endif]– >

Use group selector
h1, h2, h3, h4, h5, h6 {
font-family:verdana;
margin:0;
padding:0;
}

Cross Browser CSS Transparency Setting
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

PNG Fix for IE6
.png_ie_hack {
background-image: url(../images/pngimage.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/pngimage.png’);
}

Remove links or textbox hightlight border
a, input { outline:none; }

Hidden text for search engine
a { text-indent:-999em; outline:none; background: url(image.jpg) no-repeat 0 0; width:100px; height:50px; display:block; }

Click here for more details on CSS Optimization.

JavaScript Based Animation Frameworks and Libraries

These JavaScript based animation frameworks and libraries will enable you to create attractive and appealing user experiences. Also, those give developers the ability to create stunning and eye-catching animation and transition effects in there web pages.

1. $fx (http://fx.inetcat.com)
2. jsAnim (http://jsanim.com)
3. scripty2 (http://scripty2.com)
4. GX (http://gx.riccardodegni.net)
5. Glimmer (http://visitmix.com/lab/glimmer)
6. Animator.js (http://www.berniecode.com/writing/animator.html)
7. Scriptio (http://www.scriptio.us/index.php)
8. Processing.js (http://processingjs.org)
9. Run (http://aka-fotos.de/run)
10. Burst Engine (http://hyper-metrix.com/#Burst)

Facebook Account Hack – What to do?

If you are receiving regular and unnecessary spam on your facebook wall either from nowhere or from one of your friends then there is a high possibility that either you or your friend have been affected by a Facebook phishing attack and your account security has been compromised. Here are some important steps which will help you to get rid of the phishing attack.

  1. Do not click on any link or URL in the received spam message.
  2. Just delete the span message from your Walls and Inbox immediately.
  3. Reset your Facebook password immediately.
  4. If your account has been disabled, contact Facebook User Operations Team (http://www.facebook.com/help.php?page=797).
  5. Scan your computer completely using reliable antivirus software.
  6. If your PC has been infected with malware or a virus, you can visit the Microsoft/ Apple Security websites for proper patches.
  7. Start using OpenDNS as your DNS servers which boasts of a very good anti-phishing engine that works ant it may also prevent you from getting phished on Facebook.

Optimize your stylesheet

If your website uses large stylesheets, optimizing the CSS code can help your code to load and render faster. CSS shortcuts shortern the cascading stylesheets rules into one efficient line of code.

Fonts

.MyClass
{
font-weight: normal;
font-size: 14px;
line-height: 12px;
font-family: arial, verdana;
}

You can simply use:

.MyClass
{
font: normal 14px/12px arial, verdana;
}

Background Images

#MyID
{
background-image:url(images/Vikas.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#r1f1f1;
}

Can be shortened to:

#MyID
{
background: #f1f1f1 url(images/Vikas.gif) repeat-x top;
}

Borders

.MyClass
{
border-width: 1px;
border-color: #e0e0e0;
border-style: solid;
}

Shortcut:
.MyClass
{
border: 1px solid #e0e0e0;
}

Margins/Padding

#MyID
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

Use a single line of code, like this:

padding: top right bottom left;

#MyID
{
padding: 10px 5px 20px 5px;
}

The margin or padding shortcut can be be shortened further.

margin: top right bottom left;
margin: 10px 20px 10px 20px;

Can be shortened to:

margin: top/bottom right/left;
margin:10px 20px;

You can even take this one step further.

margin: top/bottom/right/left;
margin:10px;

If you do not want any margins or padding with a web object, you can set all of the values to zero.

margin: 0;
padding: 0;

Color

color: #000000;

shortcut:
color: #000

color: #FFCC00;

shortcut:
color: #FC0;

Gmail introduces “Undo Send” feature

Gmail labs added a new feature “Undo Send” by which you can recall your send emails within 5 seconds after hitting the send button.

Enable Undo Send in Gmail Labs
Enable Undo Send in Gmail Labs

Remember to enable the “Undo Send” feature from Gmail > Settings > Labs. It is disable by default.

Once you’ve enabled this feature, you have two options to call back a sent message.

Option 1

Hit cancel when you see the Sending … message
Hit cancel when you see the Sending … message

Option 2

Hit Undo when the Sent message appears
Hit Undo when the Sent message appears

Either way, you have to react quickly(with in 5 seconds).
Go ahead check it out.

jQuery Cheat Sheet

Remembering the hundreds of jQuery methods and handlers can melt your brain. Use this cheat sheet as a reference.

jQuery Cheat Sheet
jQuery Cheat Sheet

Source: Colorcharge.com