Emanuele Feronato » Html

JQuery powered lights off effect

Emanuele Feronato — Mon, 12 Oct 2009 14:58:07 +0000

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script:

Emanuele Feronato's lights off effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque libero euismod nulla porttitor egestas. Nulla fermentum facilisis sagittis. Vestibulum commodo pretium diam, vitae scelerisque lectus bibendum nec. Curabitur a metus est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc dolor, pretium eget venenatis ut, condimentum at sem. Vivamus rhoncus ullamcorper turpis. Aliquam sit amet risus diam, vel mattis est. Quisque sodales eros id nulla rhoncus posuere. Nullam accumsan lorem quis dolor tempor congue. Vivamus ligula augue, commodo malesuada tempor non, tristique id enim. Sed dapibus sagittis porttitor. Suspendisse faucibus scelerisque eros, ac hendrerit orci scelerisque sit amet.

Everything inside this div will remain highlighted

Lights off

Soft lights

Lights on

Vestibulum interdum, odio ut congue imperdiet, justo ligula bibendum nisl, ac placerat orci eros nec tortor. Maecenas rhoncus felis vitae elit consectetur vitae mattis metus tincidunt. Donec nec ipsum quis tellus posuere ultricies. Ut tempus tortor nec sem blandit ut facilisis nisl scelerisque. Nulla venenatis ante sit amet nisi dictum varius. Etiam congue dui eu diam fermentum et tincidunt magna egestas. Sed tincidunt magna et metus molestie malesuada. Nam tempus dignissim porta. Vivamus iaculis, orci hendrerit condimentum viverra, eros nisl euismod arcu, nec pulvinar tellus elit eu nulla. Vestibulum mattis, ligula sit amet euismod commodo, augue lorem fermentum magna, et rhoncus nisl urna nec purus. Suspendisse potenti. Fusce fermentum orci at orci posuere ornare a imperdiet justo. In hac habitasse platea dictumst. Duis adipiscing leo nec risus varius auctor. Cras sed erat massa, quis egestas leo. Vivamus dignissim lacinia leo, ac interdum nisi facilisis eget.

The div is the one called standout at line 48 and it has nothing special but a background color (it can’t be transparent) and a z-index along with a relative position (lines 40-42).

Obviously the z-index should be higher than the rest of the elements.

The other interesting div is the_lights (line 50), a black div covering all the page, initially invisible (lines 30-36). Playing with its transparency will simulate the lights effect

Now it’s all a matter of JQuery:

Line 7: Listening for the document to be ready

Line 8: Once it’s ready, the first thing is setting the_lights alpha to zero. I don’t set it from CSS but use fadeTo because I need to initialize the fading process. The entire lights out effect is just playing with the_lights and some tweening.

Line 9: Here I am listening for the turnoff div to be clicked

Line 10: Showing the_lights div… this is the same thing as
document.getElementById('the_lights').style.display='block'

Line 11: Fading the black div to full opacity.

This will give the “lights out effect”

Try the example at this page will show you the effect… click on “lights on”, “lights off” or “soft lights” and see what happens.

MagOrMin – an old php based game

Emanuele Feronato — Thu, 19 Mar 2009 12:17:40 +0000

This is an ooooooold (let’s call it) game I explained for a web programming class in 2003 or 2004.

It was made to explain some basics about Php, sessions, MySql and styles. All in one.

That’s how students learn… all in one and with a real world example.

It’s just a “guess if next number will be higher or slower than the current one” concept, the same that I applied to GuessNext last year.

It’s called MagOrMin and the name comes from the italian translation of “higher” (maggiore) and “lower” (minore).

Simply click to say if next number will be higher or lower, gain extra lives and compete for the high scores.

I plan to port the game in Ajax, adding a so-called “Web 2.0″ style and convert it into a Facebook application with all features… you know… I must monetize everything…

Meanwhile here it is the source code:


 
session_register("game_status");
session_register("actual_number");
session_register("score");
session_register("lives");
session_register("next_extra");
 
$connection = mysql_connect(localhost, "****", "****");
$db= mysql_select_db(*****,$connection);
 
$old_number = $actual_number;
$actual_number = rand(0,9);
 
 
$page_name = $PHP_SELF;
 
if($guess == "new"){
	if($_POST[name]){
		$_POST[name] = substr(strip_tags($_POST[name]),0,20);
		$sql = "insert into ****(***,***) values(\"".stripslashes($_POST[name])."\",$score)";
		$result = mysql_query($sql,$connection) or die($sql);
	}
	$game_status = "NOT_PLAYING";
}
 
if(!isset($game_status)){
	$game_status = "NOT_PLAYING";
}
 
if($game_status == "NOT_PLAYING"){
	$lives = 3;
	$score = 0;
	$next_extra = 3;
	$class_to_show = "number";
	if(($guess=="bigger")or($guess=="smaller")){
		$game_status = "PLAYING";
		$sql = "update *** set *** = ***+ 1";
		$result = mysql_query($sql,$connection) or die($sql);
	//	echo $sql;
	}
	else{
		if(isset($old_number)){
			$actual_number = $old_number;
		}
	}
}
 
if($game_status == "PLAYING"){
	if ((($guess == "bigger") and ($actual_number >= $old_number)) or (($guess == "smaller") and ($actual_number <= $old_number))){
		$score ++;
		$class_to_show = "number";
		$game_status = "PLAYING";
		if ($score == $next_extra){
			$lives +=1;
			$next_extra = floor($next_extra*1.5);
		}
	}
	else{
		$lives -=1;
		$class_to_show = "number_wrong";
		if ($lives==0){
			$game_status = "GAME_OVER";
			$perso_ora = true;
		}
	}
}
 
if ($game_status == "GAME_OVER"){
	$class_to_show = "number_wrong";
	if(!$perso_ora){
		$actual_number = $old_number;
	}
}
 
//echo $game_status;
 
?>
 






WELCOME TO PHP-MAGORMIN v1.0
 echo "\"score\">Score: $score
\"score\">Lives: $lives
\"score\">Extra life at $next_extra
"; ?>


CURRENT NUMBER
 echo $class_to_show; ?>"> echo $actual_number; ?>

if($game_status == "PLAYING"){
?>
I guess next number will be
 echo $page_name; ?>?guess=smaller">SMALLER
 echo $page_name; ?>?guess=bigger">BIGGER
 } ?>

if($game_status == "GAME_OVER"){
?>
GAME OVER

Enter your name:  
 } ?>

if($game_status == "NOT_PLAYING"){
?>
I guess next number will be
 echo $page_name; ?>?guess=smaller">SMALLER
 echo $page_name; ?>?guess=bigger">BIGGER
 
 } ?>

I’ll explain the entire process to convert it into a Facebook app.

Embedding a wmv file in your web page

Emanuele Feronato — Thu, 03 Aug 2006 11:16:55 +0000

Just in case you have to embed a wmv file in your webpage, and there is no need to do it since it’s possibile to play better videos with flash but… just in case you really have to do it… like I have to do it today… here it is the html code

Adjust height, width, ect to match your video settings.