Archive for December, 2010

Create a Flip Effect by Using CSS3

Posted: December 20, 2010 in CSS, HTML
Tags: ,

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari and Chrome browser. Here’s a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!

* Safari or Chrome browser required to experience the Webkit effect.

The HTML

  • Step 1: Create a maincontainer to position the cards
  • Step 2: Create a card container to add more properties to the cards, when we hover over the container, the card should flip
  • Step 3: Create a new div for the card itself
  • Step 4: Create the front of the card, (in this case it is an image ‘UMBRELLA.png’)
  • Step 5: Now we’re creating the back of the card, in this example I used a table but you can add whatever you want
  • Step 6: At the end we’re creating a button

(more…)

Advertisements

Customize Your Facebook Fan Page

Posted: December 20, 2010 in Facebook, FBML
Tags: ,

Facebook Fan Pages are gaining popularity due to their high adoption rates among Facebook’s 300+ million users. Currently more than 10 million users become fan of Pages every day. However, the basic fan page layout is quite cookie cutter, so adding some simple modifications can really make a Fan Page stand out and land those valuable fans. Not only will this look great, but it is easy and cost effective, unlike a custom built and branded Facebook Application.
Before you start:

  • Step 1: Navigate to Facebook (make sure you are logged out)
  • Step 2: Click the ‘Create A Page’ button
  • Step 3: Choose the purpose for you page and choose a name
  • Step 4: Click the create button
  • Step 5: Register or Login
  • Step 6: Your page is created

#1 Edit Page

Click “Edit Page” under the Page’s large avatar image.
(more…)

Learn jQuery-4 : Relationships

Posted: December 14, 2010 in jQuery
Tags:

The title of this lesson might sound a little goofy but all your queries will be answered in the next paragraph.

At first the difference between selectors and relationships might not be obvious. There is one very important thing to remeber. If we select an element using selectors all the commands after that selector will be applied to the element we selected. With relatoinships you change the element to where the actions are applied to on the fly. Lets look at a simple example.

<div>
<a>Link</a>
<p>Paragraph</p>
<span>
<form></form>
</span>
</div>

(more…)

Learn jQuery-3 : Filters

Posted: December 14, 2010 in jQuery
Tags:

This lesson will cover what filters are and what they do. For all users who read this well after this lesson was published, head over to http://api.jquery.com to view a full list of all filters that I may not mention in this lesson because this lesson was published when jQuery was at version 1.4.


1. Filter
s
Filters are nearly the same as selectors. But one big difference between them is that selectors come from CSS and filters are custommed made by the jQuery creators. Some filters however do the same as some selectors. Filters are just are sometimes easier to use. For more advanced Javascript developers, if you want to use all the selectors and filters that jQuery offers but don’t want to use the jQuery library try add Sizzle to your website. More information on Sizzle can be found at http://sizzlejs.com/.

Another good thing to know is that filters are more targeted for html forms (<form>). As you will see later on, these filters will probably be usually used when processing html forms.

:animated = This will selects all elements that are currently being animated. Animation (.animate()) will be covered in another lesson

:button = This will select all the buttons. This includes the element <button> but also <input type=”submit” />, <input type=”reset” /> and <input type=”button” />

:checkbox =  This will select checkboxes. <input type=”checkbox” />

:checked = This will select checkboxes and radio buttons that are checked

(more…)

Learn jQuery-2 : Selectors

Posted: December 7, 2010 in jQuery
Tags:

Selectors are very important and handy things to use. You might know them from CSS. But what jQuery does is take those selectors and tale them to a whole new level. Thre are quite a lot of them so this lesson will only cover frequently used selectors. You can find a full list of all the selectors at http://api.jquery.com

Parent, Child, Sibling ……… huh?

Before we actually take a look at the selectors you first need to know a few things. But if you know what a parent element of a child element is, head to the next section about the selectors. But if you have no clue what i’m talking about or you are still uneasy with those terms, i highly advice you to read this section.

Example Code:

<div>
<div>
<p><a></a></p>
</div>
<p>
<a></a>
<code></code>
</p>
</div>

This example doens’t contain any text. It only contains tags because that’s the thing we must focus on right now.
(more…)