$('.scrollPage').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});

Bus-Wait Formula, The
By CLIVE THOMPSON

You arrive at the bus stop to catch the ride to work, but the bus isn’t there. Your destination isn’t very far, so you think, Hmm, maybe I should just walk. But then you might find yourself halfway between stops when the bus whips past, which would be deeply annoying. What to do? Should you walk or should you wait?

This question has plagued commuters for years, but this year three undergraduate students at Harvard and Cal Tech decided to resolve it. “We were sick of sitting at a bus stop, not seeing the bus and torturing ourselves over whether we should start walking,” says Scott Kominers, a Harvard student studying math, economics and ethnomusicology. So Kominers and his co-authors, Justin Chen and Robert Sinnott, drew up the problem as a classic game‑theory dilemma, began crunching the numbers and, three pages later, had their answer: You should probably wait — and whatever you do, don’t second-guess yourself.

Buses, after all, are usually punctual and move much faster than you. If you start walking and catch the bus halfway through your journey, you might consider yourself fortunate — but even then you won’t have gotten to your destination any faster. What’s more, Kominers — like a good economist — points out that

waiting allows you to “optimize” your time, because you could get some work done while hanging out at the bus stop. There’s also a practical problem with walking, because people who decide to walk usually pause at each stop to see if a bus is coming, which drags their journey out. “You think you’re not slowing down if you stop, but you’re adding a bunch of time each time,” Kominers adds.

Mind you, their equation breaks down in extreme cases. If your journey is relatively short — less than a mile — and you suspect the next bus is half an hour away, they calculate that you should walk. (Though you should walk decisively, without dallying at each stop along the way.) But since most trips involve more-punctual buses and longer journeys, waiting is, far more frequently, the winning strategy. Or as Kominers concludes with some delight, “Laziness almost always works.”

—

The article is from a special issue in the New York Times: Year in Ideas 2008

Deactivating Firebug did solve the problem.

More details in this post in Google.

With the next code, we will check if it’s german (serving a german template), or spanish (serving a spanish template), or other (serving an english template). This would be inserted in header.php, and would concern only the Homepage, so later the user could choose, via a button, another “Home” custom template focused in one language or the other :

<?php if (is_home()) { ?>
<?php

	if(preg_match('/de-DE/i', $_SERVER['HTTP_ACCEPT_LANGUAGE']))
		include( TEMPLATEPATH . '/german-navbar.php' );

	elseif(preg_match('/de/i', $_SERVER['HTTP_ACCEPT_LANGUAGE']))
		include( TEMPLATEPATH . '/german-navbar.php' );

	elseif(preg_match('/es-ES/i', $_SERVER['HTTP_ACCEPT_LANGUAGE']))
		include( TEMPLATEPATH . '/spanish-navbar.php' );

	elseif(preg_match('/es/i', $_SERVER['HTTP_ACCEPT_LANGUAGE']))
		include( TEMPLATEPATH . '/spanish-navbar.php' );

	else
		include( TEMPLATEPATH . '/english-navbar.php' );
?>
<?php } ?>

The HTTP codes for german is de-DE, or simply de, and for spanish es-ES, or simply es.

DEMO
DOWNLOAD

Files to include in the head :

SprySlidingPanels.css
SprySlidingPanels.js

Necessary customitzation of the boxes in your main CSS file :

.SlidingPanels {
	width:575px;
	height:400px;
	float: left;
	border: 1px dashed #000;
}

.SlidingPanelsContentGroup {
	float: left;
	width: 10000px;
}

.SlidingPanelsContent {
	width:575px;
	height:400px;
	float: left;
	background:#eee;
	border-right:3px dotted #999
}

Basic HTML and javascript :

<div id="navigation">
<ul>
	<li><a href="#" onclick="sp2.showPanel(0); return false;">Some Heading 1</a>
	</li>
	<li><a href="#" onclick="sp2.showPanel(1); return false;">Some Heading 2</a>
	</li>
	<li><a href="#" onclick="sp2.showPanel(2); return false;">Some Heading 3</a>
	</li>
	<li><a href="#" onclick="sp2.showPanel(3); return false;">Some Heading 4</a>
	</li>
</ul>
</div>

<div id="maindiv">
	<div id="example" class="SlidingPanels" tabindex="0">
		<div class="SlidingPanelsContentGroup">
			<div id="ex2_p1" class="SlidingPanelsContent p1">
				<h3>Some Heading 1</h3>
				<p>many text here many text here</p>
			</div>
			<div id="ex2_p2" class="SlidingPanelsContent p2">
				<h3>Some Heading 2</h3>
				<p>many text here many text here</p>
			</div>
			<div id="ex2_p3" class="SlidingPanelsContent p3">
				<h3>Some Heading 3</h3>
				<p>many text here many text here</p>
			</div>
			<div id="ex2_p4" class="SlidingPanelsContent p4">
				<h3>Some Heading 4</h3>
				<p>many text here many text here</p>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var sp2 = new Spry.Widget.SlidingPanels('example');
</script>

As you might know, the simple reason behind this limitation, is that our browsers are not still ready to deliver a font unless it is installed in the user’s computer.

That way, a font like Helvetica, which could eventually get out of the common spectrum of fonts a user has, would not apply in our design, giving room to the unmediated alternative we just set up in our stylesheet :

body{
font-family: Helvetica, Arial, Verdana, sans-serif;
}

Is this just a technical problem ? Not only : if in the new standart version of CSS, the CSS3, we can link to a file from the stylesheet and deliver a specific font regardless of the user computer set up, the Foundries are, as it is reasonable, restricting the free spread to their work.

Things being that, when the main browsers support the CSS3 standarts, so the @font-face property (Safari does, Firefox and Opera I think they’re working in it…), we will have to hope that our font of choice is freely usable as a linked file (many nice, popular fonts will be).

sIFR to the rescue

To get around this, and start TODAY to deliver nice fonts, there’s a well tested, popular solution. Some argue it’s a pain to install, slow to load, with some accessibility issues (it relies on Flash), but I’ve been always (as well as my clients), very satisfied with it.

In this tutorial, we’ll show how to install sIFR into a WordPress driven web-site, to enjoy the typography we want, inside the legal context that the font designers ask to be warranted.

As you might know, sIFR replace some HTML tags, like headings (h1, h2, h3…), with little Flash movies, a technology able to renderize any font we want, and that, legally, because we are delivering a video of only lecture produced by a font we purchased, and not and exploitable file – so, we are safe to do that, like we are safe to do the same using images instead of text when we want a special logo with custom typography.

As a sidenote, is good to know that a little percentage of users will have no Flash in their browser (which can be disabled, or don’t have it at all). In that case, sIFR will not process itself, and the text will show with the default CSS style we gave to our basic text (so appearing in Georgia, Arial, whatever).

The magic code we must use was written by Pat Dryburgh, a cool webdesigner from Canada who published the idea in his Blog.

To install sIFR, we first must download it from their repository, here. We’ll download the first file in the list, so the last version.

Once in our Desktop, we are going to decompress it, and delete the demo and the changelog, that we’ll not use at all.

We’ll enter then into the “flash” folder, and we’ll open sifr.fla.

(If we don’t have the software, we can always go to sIFR Generator, upload a font of our own, and receive their version as .swf, which is all we need.)

We’ll click then in the white square, we’ll select the text, and, we’ll format it with the font of our choice, from a drop down menu.

If we’d like to add some special caracter (special signs in asian, european, etc languages) now it’s the moment : a function down in the right side will allow it for us.

We’ll nox export that file as it is. File -> Export -> Export Movie.

We’ll use the default parameters that Flash ask us to specify, and we’ll save the file in our Desktop, with the font’s name, for example rockwell.

We go now there to retake the file, and move it onto the sifr “flash” folder.

Then we open the “js” folder, select sifr-config.js, and we’ll edit it with our Text Editor of choice.

We will select all of this content and … we’ll delete it.

Pasting our particular sifr-config.js

Now we’ll have to use the font name we decided for our .swf file, in our example rockwell.swf, so we will paste that :

sIFR.activate(rockwell);

sIFR.replace(rockwell, {
      selector: 'h1',
     css: [
        '.sIFR-root { color:#000000; font-size: 3em; }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h2',
     css: [
        '.sIFR-root { color:#000000; font-size: 2em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h3',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.5em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h4',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.2em;  background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h5',
     css: [
        '.sIFR-root { color:#000000; font-size: 1em; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #333333;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h6',
     css: [
        '.sIFR-root { color:#000000; font-size: 18px; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

Save and close. Remember here you must include your font’s name, Rockwell is just an example.

We’ll go now to rename the whole sIFR folder, to, obviously, “sifr”, because normally it will come with the version number, etc. We will place it so in our theme’s folder, next to the images folder.

Now, we have 3 sub-folders inside “sifr” :

1. in “flash”, we have added a .swf file with our chosen font in it.
2. in “js”, we have modified one of the files with a fresh-pasted code.
3. in “css”… we are going to open it, and edit sifr-screen.css

We’ll go directly at the end of the file, then we’ll add the following :

.sIFR-active h1 {
  visibility:hidden;
  }

.sIFR-active h2 {
  visibility:hidden;
  }

.sIFR-active h3 {
  visibility:hidden;
	}

.sIFR-active h4 {
  visibility:hidden;
	}

.sIFR-active h5 {
  visibility:hidden;
	}

.sIFR-active h6 {
  visibility:hidden;
	}

That code will be nice to hide the replaced text while sIFR is processing the replacement, and that otherwise would show up for a second.

Last Step

We are going to create a file, and name it functions.php, and fill it with this code :

//sIFR

function sifr_scripts() {
global $siteurl;
if (empty($siteurl)) $siteurl = get_settings('siteurl');
$sifrurl = $siteurl.'/'.'wp-content/themes/THEMESFOLDERNAME/sifr/';

echo '<!-- start sifr scripts -->

<link rel="stylesheet" href="'.$sifrurl.'css/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="'.$sifrurl.'css/sIFR-print.css" type="text/css" media="print">

<script src="'.$sifrurl.'js/sifr.js" type="text/javascript"></script>
<script type="text/javascript">
var FONTNAME = { src: "'.$sifrurl.'flash/FONTNAME.swf" };
</script>
<script src="'.$sifrurl.'js/sifr-config.js" type="text/javascript"></script>

<!-- sifr scripts -->

' ;

}

add_action('wp_head', 'sifr_scripts');

?>

Once pasted, we’ll replace three elements :

• THEMESFOLDERNAME
• FONTNAME
• FONTNAME (a second time)

Save and close !

The most part of WordPress themes have, in header.php, a hook to insert code from our plugins. Is the following :

<?php wp_head(); ?>

We’ll make sure we have it as well, just before the closing head tag.

Now, we should go to see our Blog, and hope all worked nicely !

To change the colors, we’ll have to modify with hexadecimal values the sifr-config.js colors (I used some grey and black colors here).

Remember as well, if you want to replace paragraphs (‘p’ tags), you must hide them :


.sIFR-active h6 {
visibility:hidden;
}


And, for sure, keep in mind that replacing large amounts of text is very energy consuming and very slow. sIFR works at its best replacing only headings.

We have some very nice plugins in WordPress to automatize this process, but if you were curious abou what every file does, here you have it.

Hope you enjoy a nice typo.

Those paragraphs, that in most CMS are called ‘modules’, have usually a static text, that rarely changes.

But, as the business / website grows, sooner or later you’ll be changing little snippets of information, and the best is to prevent that, and offer to the client an easy way to edit that ‘almost decoratif’ snippets of text (rather that hardcode it, then editing it).

In WordPress, we can have that via the WordPress pages : they are easily accessible from the Administration (while a post get lost in the deep), and they are quite versatile to use as Modules (a concept that, again, most CMS have, and WordPress does not – still).

Here’s a quick trick to pull a WordPress Page by its slug name (foundable and editable in the Admin screen), then print it somewhere in your template – say, Index.php.

Drop this into functions.php, create the file if you don’t have it :

<?php

function wt_get_ID_by_page_name($page_name)
{
	global $wpdb;
	$page_name_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = '".$page_name."'");
	return $page_name_id;
}

?>

Then, paste this in the place you want to show up that ‘Module’ :

<?php
$posts = get_posts('include='.wt_get_ID_by_page_name('your-page-name').'&post_type=page');
foreach($posts as $post):
setup_postdata($post);
?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php endforeach; ?>

Is a classical get_posts loop, a custom way to call a specific content from the database.
You have to replace your-page-name by the slug that the concerned page will have (usually, is the same as it’s normal title, but “dashed”, like about-my-business, or about-me.

I took this nice code from Web Templates.nu.

Thanks for reading !

That way, if I ever want to talk about the WordPress function the_content, so it get printed like these … :

<?php the_content ?>

… I must write it that way :

<?php the_content ?>

(between, in order to display the last, I have to do it again not directly because it would show the first thing, but with a second “meta-language” – which unique use is put such an example ! ).

Those are the most common caracters entities to preserve a code to be executed, so it just shows away :

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
" = &#34;
' = &#39;

As we should that way be aware of a bunch of HTML caracter entities, the easier is go here and convert our code to showable code.

This page runs a little script that will convert any code you put in in inoffensive code to show in your posts.

If you work with WordPress, you’ll find excellent plugins that will do the job for you. I realized however that the quickest way for me was bookmarking Spacefem.com !

Edit : another online-tool is http://centricle.com/tools/html-entities/

note : if some of you knows some website which explains in detail why all this happen, I shall thank you to share it, as I found difficult to find a complete explanation of all this !

First, we’ll imagine a simple menu

<ul>
	<li class="<?php if ( is_home() ) { echo " current"; } ?>">Home
	</li>
	<li class="<?php if (is_page('About')) { echo " current"; } ?>">About
	</li>
	<li class="<?php if (is_page('About')) { echo " current"; } ?>">Contact
	</li>
</ul>

And then :

.current{
	background-color: #EEE;
	text-decoration:underline;
}