Archive for October, 2010

Clear form fields on focus

posted in jQuery on October 15, 2010 - 1 Comment

If you want to make a form without labels for text inputs or textareas, and instead give the fields default values, you will encounter a little annoying  problem, when you focus the field to write something the default value stays there. To make the default value disappear you will need a few lines of javascript.

$('textarea, input:text').bind('focus click', function(){
		if (this.value == this.defaultValue) {
		this.value = '';
		}
	}).bind('blur', function(){
		if (this.value == '') {
		this.value = this.defaultValue;
		}
	});

Note that this script uses jQuery so in order to work you’ll need to have jQuery installed.

To make all clear here is a demo.

,

CSS fixed background

posted in CSS on October 10, 2010 - 0 Comments

Sometimes you will need to make a background image fixed ( not to scroll with the page ), that because you have a very large image that does not repeat, or you want to make something like an watermark, the solution is simple and is around for ages, all you have to do is use the CSS background-attachment property.

Background-attachment supports three values: scroll ( which is default ), fixed and inherit.

In most cases the fixed background is applied to the body element, but can be applied to any HTML element. Without further ado, … the CSS code.

body {
      background-image: url('path/to/background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
}

Below is the shorthand version .


body {
      background: url('path/to/background.jpg') no-repeat fixed center;
}

Here you have a demo.

,

jQuery title tooltip

posted in jQuery on October 8, 2010 - 0 Comments

If you need a simple way to replace the anchor’s ( <a href=”” ></a> ), title=”” attribute with a nice customizable tooltip, below is the code and a demo.

The script adds a html <div> at the end of the <body> tag, and as you hover the specified elements it get’s the title attribute and include it in the <div id=”tooltip”>, the last part of the script is what makes the tooltip move along with mouse cursor.

The nice part is that you can make your tooltip look however you want with CSS.


<ul id="links">
 <li>
   <a href="#" title="This is one">One</a>
 </li>
 <li>
   <a href="#" title="This is two">Two</a>
 </li>
 <li>
   <a href="#" title="This is three">Three</a>
 </li>
 <li>
   <a href="#" title="This is four">Four</a>
 </li>
 <li>
   <a href="#" title="This is five">Five</a>
 </li>
</ul>



#tooltip {
 padding: 10px 15px;
 position: absolute;
 font-size: 14px;
 color: #4E4E4E;
 background: #C4E424;
 z-index: 10;
}



(function($){
	$('body').append('<div id="tooltip"></div>');
	$('#tooltip').hide();
	var $tooltip = $('#tooltip');
    $('ul#links a').each(function(){
        var $this = $(this),
			$title = this.title;
			
        $this.hover(function(){
			this.title = '';
			$tooltip.text($title).show();
        }, function(){
			this.title = $title;
			$tooltip.text('').hide();
        });
		
		$this.mousemove(function(e){
			$tooltip.css({
				top: e.pageY - 10,
				left: e.pageX + 20
			});
		});
    });
})(jQuery);

Here is a demo

, , ,