Simply Net Dev

Author Archive


Posted on November 18, 2008 - by admin

Create An Analogue Clock with CSS3 and jQuery

Its that time again. Today we are going to show you something sweet. A preview into what the new CSS3 standard can do, namely with tag ‘rotate’. I really started whacking my brain about what you could rotate on a web page. Then it occurred to me. A Clock hand rotates! so lets get started.

CSS3 Transform:rotate

Transform:rotate a brand new feature of CSS3 that will allow you to.. you guessed it! Rotate stuff. It will also be able to scale and skew and tween objects around your web page. All these can be animated with the transition property.

It shares the same principle as the current popular frameworks like jQuery to create animation elements on your page. As with jQuery you can animate pretty much any css property worth doing so with transition.

Thinking of the :hover effect and you should get the relative idea. jQuery or mootools are a lot more powerful but you can still do alot of cool stuff with a lot less download time.

Take NOTE :

When CSS3 is eventualy released ( with HTML5 ) you will be able to view this demo in all the current browsers. Right now, this demo will only work with Google Chrome (windows) or the latest version of Apples Safari browser (mac) as they are the only current browsers that support the transform propery of CSS3 via the -webkit- prefix. FF3 is not to far away either.

Oh and no This will never EVER work with Internet Explorer 6 ( god damn it let a dead dog die already ! )

The Graphics

First youll need the interface for the clock. We have several aspect that we will need, namly the face, and three hands. All the animated parts are sliced in photoshop at 600 px high and 30px wide, are positioned vertically in the upmost center as per default the rotate property ‘ rotates’ from the center of the element. You can use ‘transform-origin’ to set a rotate point if you would like.

The clock is a generic clock, but there is nothing holding you back from creating the micoagelo of clock if it tickles your fanny. The animated parts are all PNG images ( I hate you IE6 ) thrus making this effect possible.

Download the Tutorial files

The HTML Part

The mark-for the clock is a very creative un-ordered list. Each item will contain an animated part and is given the relevant id. Here it is.

<ul id="clock"></ul>

The CSS

#clock {
position: relative;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
background: url(clockface.jpg);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 285px;
}
#sec {
background: url(sechand.png);
z-index: 3;
}
#min {
background: url(minhand.png);
z-index: 2;
}
#hour {
background: url(hourhand.png);
z-index: 1;
}

The CSS is really simple too. As the moving parts share the same dimensions and start positions we can declare these together to avoid repeating ourselves making the CSS a bit leaner.

Theis given a position of relative allowing us to absolutely position the clock hands inside it.NOTE: Rotate doesn’t effect layout and the object behaves like an absolutely positioned element outside the normal flow when rotated.

So where is is the CSS3 stuff? Well we’re going to apply that using some simple jQuery.

The jQuery JavaScript

1. Get the timing information for the clock.
2. Calculate and inject the CSS style (rotation angle) for each element.
3. Update the CSS style info at regular intervals.

It should be noted that jQuery has no problem at all using these new CSS3 properties. Also as the styles are allocated dynamically and not from the stylesheet this clock still validates as CSS2.1!
Getting the time

Some of you might (well I did!) equate date and time info with PHP, and when I started this PHP was my first thought, but then I discovered javascript has it’s own built in functionality for getting date and time data too. Note with JavaScript the time is local to the machine not the server.

We’re going to get this info using the Date() syntax and assigning that to a variable. We can get each hands specific data by attaching GetSeconds(), GetMinutes() or GetHours() to the Date() syntax like this example.

var seconds = new Date().getSeconds();

The above code will return a number between 0 and 59 and store it inside the variable ’seconds’.
Getting the angle

Next we have calculate the angle for each hand. In the case of the seconds and minutes which have 60 increments per rotation we just divide 360 by 60 which gives us 6. This means that for each second or minute we have to rotate the hand by 6 degrees. We’re going to to store this equation inside another variable. For the seconds it will look like this.

var sdegree = seconds * 6;

The hour hand throws up a different scenario. Because there are 12 increments per rotation the angle for each hour is 30 degrees. That’s 360/12=30. Now that would be simple if a clocks hour hand moved in hour increments but it doesn’t. It moves in smaller amounts based on the minute value. Say at 4:30 the hour hand will be half way between 3 and 4. So how do we do this.

Here’s the code.

var hdegree = hours * 30 + (mins / 2);

Basically we’re going to add the current number of minutes divided by two which should give us a number between 0.5 and 29.5 (’rotate’ can handle all floating point numbers) this puts the hand somewhere between any given 30 degree (hour) increment.

Example:
2.40 would be:

2 * 30 = 60 degrees
+ 40 / 2 = 20 degrees
——— — ———-
hdegree = 80 degrees

I did think that the clock might explode when it got past 12 as it would be a number higher then 360 but it worked fine.

So now we’ve figured the math lets inject the new CSS.
Set the style

Here is the CSS3 rotate as if it were in a style sheet.

#sec {
-webkit-transform: rotate(45deg);
}

Here it is injected by jQuery.

$("#sec").css("-webkit-transform", “rotate(45deg)” );

The problem we have here is getting the variable ’sdegree’ (which holds our angle) into this syntax to replace the (45deg). At first I just tried putting the variable between the brackets but it wouldn’t have it. To make this work we need to build a ’string’ inside another variable called ’srotate’ and completely replace the second argument.

Here’s how we make it.

var srotate = "rotate(" + sdegree + "deg)";

The jQuery will now be written as this.

$("#sec").css("-webkit-transform", srotate );

Putting it all together (in time!)

The whole jQuery code looks like this.

$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css("-webkit-transform", srotate );
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css("-webkit-transform", hrotate );
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css("-webkit-transform", mrotate );
}, 1000 );
});

Notice how we’ve used a JavaScript setInterval so the function is run every second. The variables that get the time data have to be inside the function so they update too. If not they would only gather that data on page load once, making a pretty rubbish clock.

Our clock should now work (in Safari).

Alternatives

Flash is the one that comes to mind, although unless you have Actionscript fingers id give it a seat at the back.

In the end

So there it is people, probably the only practical use for the new CSS3 property transform:rotate.

What are you waiting for ! give some of the new CSS3 features a try!


Posted on November 8, 2008 - by admin

CSS for jQuery Selectors - It really is just CSS

Last week we took a look at the jQuery selector syntax in our tutorial, which allows us to select elements by their ID, class name or tag name.

While it is pretty cool that you can select by class name, that really doesn’t buy us a whole lot.  But, you can do a whole lot more by using CSS style syntax.

For example, maybe you want to style all of the li elements that are under a particular ID to look a specific way.  You could use the selector statement:

$("#MyId li")

and if you wanted to make sure it only selected the top level items, you could use:

$("#MyId > li")

If you know your CSS, you know this means only apply this to li items that are direct children of the element with the ID of MyId.

So, you can see how easy this is to apply with a simple knowledge of CSS.  But, jQuery gives us a few operators that we can use as well.

For example, you can use :not to say, “if it is already styled with a specific class, just ignore it:”

$("#MyId > li:not(.myClass)")

There are some other operators that we can apply as well, including: eq, nth-child, odd, even and contains, which we will look at in a future installment.

I know we haven’t looked at how to actually apply the class to the selected elements.  Trust me we’ll get to it and it is VERY easy.

But, imagine how much easier it will be to apply complex styling to your ASP.NET site when you can apply the CSS after the page has been rendered, via jQuery, instead of as the page is being rendered on the server.



Related Blogs





		
									


		
									
								
Posted on November 8, 2008 - by admin

		
								
10 Key Features for a Perfect Website

            					
            													
		
								
Building a website is not so hard nowadays. But still there are certain little secrets and tiny ways you should follow in order to achieve the best results.

Of course there are a lot of different factors that can influence your success and it is hard to keep all them in mind. But in fact you should know only few most important secrets for your website to be a success.

So we are ready to disclose you 10 crucial points for your online presence to be an ideal.


1. An Eye-catching Design 


What is attracting the visitors first is a very design of your website. It shouldn’t be irritating – neither dull nor too flashy.

The main purpose of your website’s attractive design is to keep the visitor and make him stay online for further actions. In this case even color gamut will influence user’s mood and can win his or her favor or quickly lose it.

So the first helpful hint for you is to think over your website’s design thoroughly. If you succeed at this stage you can make use of the following points.


2. Convenient Navigation


It is clear that you visit a lot of websites every day and not all of them please you while surfing. Coming to a website you want the interface to be easy and understandable, right? So let it not be a secret for you anymore – your visitors want the same.

Think about placing all the links on your website in such a way that the user won’t become irritated by not knowing where to click at. It is a significant point not to confuse the visitor of your website and thus not to make him leave and forget about its existence.


3. Proper Content 


What the users like very much is a content they are promised to see on the website. You better not play with it.

Once disappointed the visitor may not come again to see whether something has changed. So make sure your website contains enough useful information to make the user interested and then your further updates will really make sense.

Don’t forget about some helpful information concerning your website operating. All the users appreciate the possibility to find the accurate answers for their questions.


4. Contact Information


It is essential some problems may arise during someone is wandering pages of your website. Perhaps not problems but specific questions for sure. Anyway you should persuade the visitor that he or she may always rely on your support.

It is not that good when a user can’t find the way to contact you. So be attentive to put all necessary contact information (e-mail address, phone number, a link leading to a special contact form etc) in such a way that the visitor can easily find and make use of it.

You should really mind that fact if you want your web presence to be evaluated not only as qualitative but also supportive and responsible one.


5. Search Option 


In case your website is crammed with different information it will be very convenient for the user to find the necessary content with the help of search field. All he/she has to do is type some keywords and then check the results of the search process.

Providing the visitors with search option will let them find what they are eager to quickly and easily, and believe they will be much pleased with such possibility.

You can use either a Google Search or your Content Management System to establish a search function on your website.


6. Sign-Up Form


It is very important for the user not to spend hours in search of “Sign-up” or “Register” button.

Remember that all the necessary fields and links have to be easily found by the visitor. Otherwise you may start losing your clients as only a few will send you an e-mail asking where they should subscribe at.

Imagine what will happen when they can’t find an e-mail either, huh? So mind it.


7. Sitemap 


Another useful option of your website is a sitemap which usually is of two types. One is for search engines and the other is for the very visitors.

A website map itself is a list of links leading to all the pages your website contains. So by clicking the necessary link each of the visitors may quickly get at necessary section of your online presence and enjoy his or her stay.


8. Web Browsers Compatibility 


There is a number of web browsers used by the Internet users. And it is very important for your website to run properly in each of them, whether it is Internet Explorer, Firefox or other browser.

It will be better for you not to prefer only certain web browsers and avoid others. That will somehow show your respect to the potential clients if you try to make your website compatible with as many web browsers as you can.


9. Images 


Building your website you of course paste a lot of images there to make your online presence look nice and eye-catching. So it is very important for all the pictures to be of the proper format – neither too large nor pixelated.

300dpi is considered to be the standard resolution for an image but in case of website creating you should choose lower one. Thus you will make an image file smaller and allow your visitors to download it quickly.

Some image editors has the “Save for webpage” option which helps you to save your picture automatically with a proper size and resolution.


10. Analytics 


The last useful point concerns the very owners of the websites. Statistics and analytics function helps them to see how popular their web presence is and what aspects should be improved first of all.

With the help of statistics you can discover how do people find your website, who links to you, how many hits you have and so on. You will get useful pieces of information from the stats and be a breast of your website’s every aspect!


So make your online presence the most successful source on the web! And if needed, Flashmint will help you with this.


Related Blogs




		
									


		
									
								
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 !