Personal tech blog of Sameera Thilakasiri - Just I wanted.. Do you?…

CSS Browser Selector Clever technique to help you on CSS hacks.

Posted on October 22, 2012 by Sameera Thilakasiri

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

DOWNLOAD
http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js

USAGE
1. Copy and paste the line below, inside and tag

<script src="css_browser_selector.js" type="text/javascript"></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:
win – Microsoft Windows (all versions)
vista – Microsoft Windows Vista new
linux – Linux (x11 and linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
ipad – iPad new
webtv – WebTV
j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
blackberry – BlackBerry new
android – Google Android new
mobile – All mobile devices new

Available Browser Codes [browser]:
ie – Internet Explorer (All versions)
ie8 – Internet Explorer 8.x
ie7 – Internet Explorer 7.x
ie6 – Internet Explorer 6.x
ie5 – Internet Explorer 5.x
gecko – Mozilla, Firefox (all versions), Camino
ff2 – Firefox 2
ff3 – Firefox 3
ff3_5 – Firefox 3.5
ff3_6 – Firefox 3.6 new
opera – Opera (All versions)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
chrome – Google Chrome
iron – SRWare Iron

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

jQuery creating custom animations

Posted on September 29, 2011 by Sameera Thilakasiri

<HTML>
	<HEAD>
		<TITLE> jQuery creating custom animations </TITLE>
		<script type="text/javascript" src="https://ajax.googleapis.com/
		ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</HEAD>
	<BODY>
		<div id="clickme" >
			<font color="red"> Click here </font>
		</div>
		<img id="book" src="http://ampersandtr.eweb101.discountasp.net/
		img/tm/co/SK/SIGIRAYA/Places%20To%20Visit%20In%20Sri%20Lanka%201.jpg"
		alt="" width="200" height="223"
		style="position: relative; left: 10px;" />
		<script>
			$('#clickme').click(function() {
				$("#targetDiv").hide();
				$('#book').animate({
					opacity : 0.25,
					left : '+=50',
					height : 'toggle'
				}, 5000, function() {
					// Animation complete.
					$("#targetDiv").html("<h3>" + "Click link to animate" + "</h3>").fadeIn("slow");
				});
			});
		</script>
		<font color="blue">
			<div id="targetDiv" style="display: none;"></div>
		</font>
	</BODY>
</HTML>

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples, jQuery Tutorials
Tags: jQuery | jQuery Animation | jQuery Custom Animations | jQuery Examples

jQuery fading elements in and out

Posted on September 29, 2011 by Sameera Thilakasiri

Fading elements in and out

<html>
	<head>
		<style>
			ul {
				margin-left: 20px;
				color: blue;
			}
			li {
				cursor: default;
			}
			span {
				color: red;
			}
		</style>
		<script src="jquery-1.4.2.js"></script>
	</head>
	<h3><font color="red">Hover on any element to see effect</font></h3>
	<body>
		<ul>
			<li>Cake</li>
			<li>Pastries</li>
			<li class='fade'>Patties</li>
			<li class='fade'>Noodles</li>
		</ul>
		<script>
			$("li").hover(function() {
				$(this).append($("<span><<< </span>"));
			}, function() {
				$(this).find("span:last").remove();
			});
			//li with fade class
			$("li.fade").hover(function() {
				$(this).fadeOut(100);
				$(this).fadeIn(500);
			});

		</script>
	</body>
</html>

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples
Tags: jQuery | jQuery Examples | jQuery Fade in and out

jQuery hiding and showing elements on the page – arguments.callee

Posted on September 29, 2011 by Sameera Thilakasiri

<body>
	<button id="hideBtn">Hide</button>
        <button id="showBtn">Show</button>
  <div>

    <span>jQuery</span> <span>is</span> <span>easy</span>
    <span>to</span> <span>use</span> <span>and</span>
    <span>gives</span> <span>dynamic output..</span>

  </div>
<script>
    $("#hideBtn").click(function () {
         $("span:last-child").hide("fast", function () {
         // use callee so don't have to name the function
         /*It then hides those spans it found. The second argument to hide is a callback after the animation. That callback goes to the "previous" child (the 'something else' text node), hiding it and passing the "called function" (arguments.callee) as the callback. Which makes this a "recursive" function.
         */
         $(this).prev().hide("fast", arguments.callee);
      });
    });
    $("#showBtn").click(function () {
          $("span").show(2000);
    });

</script>
</body>

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: jQuery, jQuery Examples
Tags: arguments.callee | jQuery | jQuery Examples | jQuery Recursive

jQuery event helpers

Posted on September 28, 2011 by Sameera Thilakasiri

.live()
This method attach a handler to the event for all elements which match the current selector, now or in the future.

Example :
Following code binds the click event to all paragraphs. And add a paragraph to another clicked paragraph :

Click me!

.die( )
This method removes the handler which is previously attached using ‘live( )’ from the elements.

Example :
Following code binds and unbinds events to the buttons :
$(“#bindbutton”).click(function () {
$(“#button1”).live(“click”, aClick)
.text(“Can Click!”);
});
$(“#unbindbutton”).click(function () {
$(“#button2”).die(“click”, aClick)
.text(“Does nothing…”);
});

Here ‘aclick’ is a user defined function which display a ‘div’ on button click. Using ‘die’ it detach the click event from ‘aClick’ function.

.one( )
This method attach the element with an event. The main difference between it and ‘.bind()’ is that it will execute only once .After this , it is unbind automatically.

Example :
Following code will display an alert box on clicking element ‘foo’ :
$(‘#foo’).one(‘click’, function() {
alert(‘This will be displayed only once.’);
});

jQuery.proxy( )
This method takes a function and returns a new one that will always have a particular scope.

Example :
It will enforce the function :
var obj = {
name: “John”,
test: function() {
alert( this.name );
$(“#test”).unbind(“click”, obj.test);
}
};

$(“#test”).click( jQuery.proxy( obj, “test” )

.trigger( )
This method executes the event which is attached with the matched elements.

Example :
Following code triggered the click event on ‘foo’ element manually .
$(‘#foo’).bind(‘click’, function() {
alert($(this).text());
});
$(‘#foo’).trigger(‘click’);

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.