Simply Net Dev

Archive for October, 2008


Posted on October 29, 2008 - by admin

The Best sIFR Alternative - Typeface

sIFR has been great… Say good bye to it thou, because there is a new alternative in town! Typeface does everything sIFR does but better. I have been fooling around with it and now its your turn to use this superior JavaScript over text repalcement.

How to use it

1. Download it

Download it from here and include it on your page. Include it after any external stylesheets.

2. Find a font you want to use

David offers three you can download and use. Otherwise, go out and find a TrueType font that you like (that you can use without breaking any copyright laws!). For my example, I snagged a free on off DaFont: Qlassik. (* problematic, see above)

3. Include it on your page

Then run it through the convertor (at the bottom of the page). This will result in a new js file, include that on your page after the typeface.js file. Remember again these should come after your stylesheets

<script type="text/javascript" src="js/typeface-0.10.js"></script>
<script type="text/javascript" src="js/qlassik_medium_regular.typeface.js"></script>

4. Starting using it in the markup

Now you are ready to start using it! Any text you want to use the new font, you’ll need to give a class name of “typeface-js” and then an inline styling statement referencing the new font name.

<h1 class="typeface-js" style="font-family: 'Qlassik Medium'">
	Testing a Headline
</h1>

You’ll need to reference the font by its proper name. I find the easiest way to find out its proper name is to install it and then find it in the font menu of any open application.

Thoughts

I’ve been playing with this for maybe one hour, so I’d not going to make any snap judgements or recommendations, but it seems pretty cool so far. Something feels neat about the fact that it’s just JavaScript, not both JavaScript AND Flash like sIFR. or JavaScript AND PHP like FLIR.

I also kind of dig how copy and paste still works on browsers that support <canvas>.

It is also pretty easy to get started! Let me know what you all think.


Posted on October 29, 2008 - by admin

How to Create A Sliding Panel with Jquery

We are going to show you a series of how to articles to create some jQuery effects with JavaScript in your web designs.  In case you don’t know what jQeury is, it’s a JavaScript Library. It has heaps of Ajax and JavaScript components that will let you enhance your web design and the users experience on your site.

First you need to grab a copy of jQuery Grab the latest released mini(compressed) version.

How to get the elements you need.

Creating jQuery Functions is relatively easy thank to the great documentation. The main thing you have to know is how to get the exact element that you want to apply the effects to.

Example :

* $(”#header”) = get the element with id=”header”
* $(”h3″) = get all <h3> element
* $(”div#content .photo”) = get all element with class=”photo” nested in the <div id=”content”>
* $(”ul li”) = get all <li> element nested in all <ul>
* $(”ul li:first”) = get only the first <li> element of the <ul>

So with that in mind we are going to create our first jQuery effect. The commonly seen sliding panel, where you click a button and a panel slides up or down. Create a html document and call in the JavaScript file between the <head> tags along with you css file for styling. Then create two divs, one big one called <div id=”panel”></div> for the pannel and <div class=”btn-slide”></div> for the button. Style as you wish.

Then call is javascript into your page either inline, or by an external .js file.

<script type=”text/javascript”>
$(document).ready(function(){

$(”.btn-slide”).click(function(){
$(”#panel”).slideToggle(”slow”);
$(this).toggleClass(”active”);
});

});
</script>

When any element with in your html file is clicked, it will toggle the slide up and down of the <div id=”panel”> element and then toggle a CSS class=”active” to the <a class=”btn-slide”> element. The .active class will toggle the background position of the arrow image (by CSS).

Try it out !