Modulor. Custom Software Solutions.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on June 28, 2011
Category: Javascript
Typeface.js is a javascript that allows you to embed custom fonts in web pages. When using it you will identify some up / downsides compared to other libraries such as Cufon.

One of the upsides is that is allows you to do searches and select & copy rendered text.

On the other hand, it is not still prepared to handle rollovers/hovers in CSS.

Don't worry, there is a workaround to this. We found it on the forums of Typeface website (http://typeface.neocracy.org/forum/topic.html?id=152)

It involves generating a couple of spans that will be rendered with typeface and then using CSS we will be able to add hover capabilities to hide / show each of the spans, allowing us to "emulate" a hover / rollover.

h1 a .white { display: none; }
h1 a .blue{ display: block; }
h1 a:hover .white { display: block; }
h1 a:hover .blue{ display: none; }

<h1>< a href="#">
<span class="white">this is a link</span>
<span class="blue">this is a link</span>
</a></h1>

The post also mentions problems that might be encountered on IE which can be solved adding the following:

h1 a { height: 15px; cursor: pointer; }

It might not be very efficient, but accomplishes the objective while a solution is developed.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on January 13, 2011
Category: Javascript
This is a very short tutorial on how to embed Twitter through its old but still very useful and flexible script.

Twitter stopped promoting this script a while ago, but it still works. We liked it because it allows full CSS styling, opposed to the inflexible Twitter feed widget commonly available.

Here are the steps to set it up:

1. Add the following html to your view:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>

2. Insert the javascripts that will load the feed on the view:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=10"></script>

Remember to replace USERNAME.json with your Twitter Username adding the .json extension. You can also manipulate the amount of tweets you wish to retrieve modifying the variable "count=10."

3. CSS Style

Now you can modify customize the styles. Some of the elements you can customize include:

div.navtitle {
}

ul#twitter_update_list {
]

ul#twitter_update_list li {
}

ul#twitter_update_list li a {
}

Now you can have a Twitter feed that can be mixed in with your current design.