Emanuele Feronato » Css

Full screen centered background image with CSS and jQuery # 2

Emanuele Feronato — Tue, 16 Nov 2010 21:41:44 +0000

There are a couple of improvements to do to Full screen centered background image with CSS and jQuery to add some functionality such as window resizing management and make it compatible with Opera.

First, you should change the CSS to

Notice the z-index of #triquiback and its overflow: being an image and not a background, I had to set the overflow to hidden to prevent unwanted scrollbars. Also, the left and top positions are set to zero to override body margins and paddings.


Both the div and the image have fixed position to allow to easily place them with left and top.
jQuery
jQuery will allow us to resize the image as we want.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

 


     
     AUTO RESIZE BACKGROUND IMAGE
     <script type="text/javascript">
     $(document).ready(function() {
          $("#triquibackimg").load(function(){
               var doc_width = $(document).width();
               var doc_height = $(document).height();
               alert("Step 1: getting document size\n\nWidth: "+doc_width+"px\nHeight = "+doc_height+"px");
               var image_width = $(this).width();
               var image_height = $(this).height();
               alert("Step 2: getting image size\n\nWidth: "+image_width+"px\nHeight = "+image_height+"px");
               var image_ratio = image_width/image_height;
               alert("Step 3: getting image width/height ratio: "+image_ratio);       
               var new_width = doc_width;
               var new_height = Math.round(new_width/image_ratio);
               alert("Step 4: adapting the image to document width, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
               $(this).width(new_width);
               $(this).height(new_height);
               if(new_height<doc_height){
                    new_height = doc_height;
                    new_width = Math.round(new_height*image_ratio);
                    alert("Step 5: the image isn't high enough\n\nAdapting the image to document height, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight = "+new_height+"px");
                    $(this).width(new_width);
                    $(this).height(new_height);
                    var width_offset = Math.round((new_width-doc_width)/2);
                    alert("Step 6: moving the image left by "+width_offset+"px to have it centered");
                    $(this).css("left","-"+width_offset+"px");
               }
               alert("Yeah!! Done :)");
          })
     });
     script>
     


     
          
     



At line 6 I import jQuery library using Google as CDN.
The code is filled with alerts which will guide you through the demo, obviously you can remove them from your project.
Line 9: Function to be executed once the document is ready
Line 10: Function to be executed once the “background” image is loaded
Lines 11-12: Getting document area with and height
Lines 14-15: Getting “background” image width and height
Line 17: Determining image ratio as width/height
Line 19: Setting image width equal to document width
Line 20: Adjusting image height according to new image width and image ratio
Lines 22-23: Resizing the image
Line 24: Checking if the new image height is shorter than document height. In this case we need to resize the image again
Line 25: Setting image height equal to document height
Line 26: Adjusting image width according to new image height and image ratio
Lines 28-29: Resizing the image. At this time, we need to horizontally center the image
Line 30: Calculating half of the difference between new image width and document width
Line 32: Adding a style to image to move it by such difference to the right
And that’s it. You can check the demo here. In case of positive feedback, I’ll show you how to resize image on the fly when the browser is resized, and add an overlay to image.



Playing with Google Font API and WordPress
Emanuele Feronato — Mon, 24 May 2010 10:27:13 +0000
With new webdesign trends, standard fonts such as Arial, Times and Verdana aren’t enough to give our blog/website the loon&feel we want.
That’s why today we’ll discover the magic of Google Font API.

The Google Font API lets you include in your pages high-quality web fonts provided by the Google Font Directory.
This means you can use custom fonts in your design, and they are hosted and served by Google.
That’s nothing new, since services like Typekit are already on the wild for quite a while, and scripts like cufòn already enhance the beauty of most premium templates.
But unlike cufòn, texts rendered with the Google Font API are selectable, and there isn’t any copyright issue, and unlike Typekit, Google Font API is free.
So let me show you the simplest example…
Let’s take the CSS of this blog post titles:

#content h1 {
	font-family: "Times New Roman";   
	font-size:24px;
	font-weight:normal;
	text-align: left;
	margin: 10px 0px 5px 0px;
	color: #181818;
	text-transform:uppercase;
	border-left:15px solid #242424;
	padding-left:10px;
}

and change the first line to

font-family: "Yanone Kaffeesatz", "Times New Roman";

and then just add somewhere between  and  (normally in the header.php file located in your theme directory)



and… see the difference:

Nice, elegant and without any important downside, if you can bare with a small number of fonts (but don’t forget we are talking about Google, so expect the number to grow fast) and the lack of iPhone/iPad compatibility (hey… shouldn’t CSS heroes design a i/whatever specific layout anyway?)



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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


     
          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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

 
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.



Create a Lightbox effect only with CSS – no javascript needed
Emanuele Feronato — Wed, 22 Aug 2007 16:23:11 +0000
You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.
When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.
I mean this effect

In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on “login” the site fades to white and shows the login form.
There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.
In some cases, there are “lightweight” versions with “only” 40KB of Javascript.
This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.
Features of this Lightbox:
100% CSS as said

You can insert any content in it (some scripts out there only allow images) and easily upload your codes to your web hosting provider.
That’s all. Did you need something more? Think wisely…
Let’s start with the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}

The black_overlay class is the layer that will make the web page seem to fade. It’s a black 80% opaque background as long and wide as the browser that will overlay the web page (look at the z-index) and at the moment is not shown (look at the display).
The white content class is the layer with the photo/login screen/whatever you want to appear in the Lightbox overlay. It’s a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). The overflow allows you to have a scrollable content.
In the html file, put this line just before the  tag

1
Hi, I am an happy lightbox


Now, trig the action you want to open the Lightbox and insert this code:

1
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

For example, in a link would be:

1
Click me

Remember to include in the lightbox the code to close it, for example

1
Hide me

A complete example page could be

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


	
		LIGHTBOX EXAMPLE
		
	
	
		This is the main content. To display a lightbox click here
		This is the lightbox content. Close
		
	


That you can find up and running in this page.
In this example everything is static and preloaded, but you can easily add some php/ajax code to make it more dynamic while keeping the effect 100% CSS based.
Hope you will find it useful, should you use it in one of your works send me a comment and I’ll feature your site as example.



Managing crossbrowser opacity with CSS
Emanuele Feronato — Sat, 05 Aug 2006 16:45:00 +0000
Sometimes you may want to change the opacity of some images with CSS.

There are different ways to do it, according to the browser you are using. In this example, we’ll see both Explorer and Firefox.
Firefox
In Firefox, the style is -moz opacity: xx where xx is a number from 0 to 1, where lesser equates to more transparency (basically, it’s the alpha).

1



The above image should look solid in Explorer and 50% transparent in Firefox.
Explorer
In Explorer, the style is filter: alpha(opacity=xx) where xx is a number between 0 and 100 (again, it’s the alpha)

1



The above image should look solid in Firefox and 50% transparent in Explorer.
Firefox and Explorer
To create an image with transparency both in Firefox and Explorer, you need to use both styles

1



This image should look 50% transparent in Explorer and in Firefox.



Enhanced country selection with Css and Javascript
Emanuele Feronato — Sun, 23 Jul 2006 14:14:03 +0000
How many times you had to choose your country in a form, with a old, simple popup?
Time to change the way you choose your country (or anything else) with a bit of Css and Javascript.
I am showing the example in a iframe not to mess with WordPress styles.

As you can see, when you move the mouse over the text input, a list with (almost) every world country and flag appears, and when you click on a country, its ISO code is displayed into the text input.

When you move the mouse out of the country list, it closes.
How can it be made?
Let’ see the content of the main page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38






	
		Select country: 
	
	other content here other content here other content here



The trick is in the  and  css use, with a display attribute changing on hover status.

It’s easiest to see than to explain.
Let’s look at line 34, when I call the iframe I simply load an ordered list with a javascript to communicate with the “parent” page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19







 afghanistan
 åland islands
 albania
...
...

Look how I set the menu starting with an unordered list with Css (lines 5-10) and how I pass ISO values to the parent page (line 15 for example).
You can download the whole work here, check 2 html files and give me feedback or suggestion about the use of this feature.



Submit button “inspired” to Macromedia Buttons
Emanuele Feronato — Tue, 13 Jun 2006 20:41:44 +0000
I like very much Macromedia buttons, and I wanted to have it one like these in my forms.
That’s all… here it is

the style is

1


Bye.