Category Archive for "Tutorials"
Create a Tabbed Content Box with jQuery Tools
jQuery is without a doubt one of the best frameworks out there. It has a pretty low learning curve, its small for what it does, and its extensibility is endless. jQuery itself boasts its own UI library, but recently FlowPlayer has designed a lightweight, very easy to use UI Library called jQuery Tools
jQuery Tools website says
jQuery Tools is a collection of the most important user-interface components for today’s websites.
Honestly, I love this plugin/addon for jQuery. It makes so many things that would usually take maybe 30 mins, doable in 5 or less. Below I have a very simple tabbed content box perfect for displaying latest posts , comments or tweets in your sidebar. You can view the demo here .
The Setup
For this tutorial you will need to create three files
- index.html
- style.css
- script.js
Dont worry about download jQuery or jQuery Tools just yet, as we will include them from external sources.
The HTML
Open up your index.html and type the following code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jQuery Tabbed Content Box
Tab 1
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Tab 2
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Vestibulum auctor dapibus neque.
Tab 3
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
As you can see from the above code I have included our script.js and style.css, along with Google-hosted jQuery and the jQuery tools plugin.
Also please look at how simple and clean the above code is. Very easy code as jQuery Tools does all the messy stuff for us. I got the filler content from HTML-Ipsum.
The CSS
The CSS in this is pretty straight forward. I make a quick CSS Reset and the rest is basically just standard practices. Notice, however that I include an “a.current” rule.This is what jQuery tools adds to each of active tabs so that you can show the user which of the tabs is active. I’ve also added a few CSS3 rules, mostly -moz-border-radius, which makes turns a block element into a rounded rectangle.
/* Makeshift CSS Reset */
*{margin: 0; padding: 0; list-style: none; outline: none; border: none;}
html {
font-size: 16px;}
body {
background: #2a2a2a;
font-family:"Helvetica Neue", "Myriad Pro", Helvetica, Arial, serif;
font-size: 62.5%;
}
#contentbox {
margin: 70px auto;
width: 400px;
padding: 20px;
}
#contentbox h1 {
margin-bottom: 40px;
color: #fff;
font-size: 3em;
text-shadow: 1px 1px 1px #232323;
}
#contentbox h1 span {
color:#55addc;
text-shadow: 1px 1px 1px #1e2e3c;
}
ul.tabnav {
width: 400px;
overflow: hidden;
}
ul.tabnav li a{
margin-right: 5px;
float: left;
padding: 5px;
font-size: 1.1em;
text-decoration: none;
color: #55addc;
text-transform: uppercase;
display: block;
font-weight: bold;
}
ul.tabnav li a.current{
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
background: #fff;
color: #1a1a1a;
}
div.tabpanel div {
background: #fff;
padding: 10px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topright:3px;
}
div.tabpanel div h2 {
font-size: 2em;
color: #2a2a2a;
border-bottom: 1px solid #2a2a2a;
margin:0 5px 10px;
padding-bottom: 3px;
display: block;}
div.tabpanel div ul li {
padding:0 0 3px 5px;
font-size: 1.3em;
}
The jQuery
Here is where the fun bit begins 
$(document).ready(function(){
$("ul.tabnav").tabs("div.tabpanel > div");
});
Yes, three lines of code is all that it takes. Basically you call the function when the document is ready. When its ready it will link the contents of “ul.tabnav” with the direct descendants of “div.tabpanel”, which are divs.
Conclusion
Simple no? I love using this method, however there are a few drawbacks.
- Not Enough Power – Its a very weak piece of code. It may not be useful if you need to do more advanced things. However, I’ve only touched the fringe of jQuery Tools. I’m not saying that jQuery Tools cannot be used. It has an extensive range of possibilites, you just have to know how to use them
- Totally Javascript Based – This is less of a problem these days, because so many sites require Javascript for their applications to work, but you should consider it nonetheless
- Animations – The jQuery Tools tabs has no included animations, which is kind of a let down, seeing as it does everything it’s supposed to really well
Overall this method hits the mark. Its easy, its fast and its free Enjoy.
Thanks 
Create a Tweet This Button with Shortened URLs
Because micro-blogging services like Twitter have a character limit of 140 characters, it is paramount that you shorten your links as much as possible. Wordpress does not do this natively but that does not mean that it is difficult. We can include our code in the functions page for an easy, repetivitve action. You can see an example of how it looks below this post. Is.gd probably outputs the shortest links, but you can use most other url shortners for this tutorial. Open your templates functions.php and include the following code.
function getTinyUrl($url) {
$tinyurl = file_get_contents("http://is.gd/api.php?longurl=".$url);
return $tinyurl;
}
What this code means is that we create new function called “createTinyLink” and allow a parameter of “$url” to be grabbed so it can be convereted into a tinyURL. Then we create a new variable called “$tinylink” and let that equal to the contents of the function on the is.gd website. I got that link from here. But you could also use Bit.ly or Tinyurl just as simply. The code then returns the contents into where we want it displayed.
After this we go into the single.php (or any page) and enter in:
Tweet this
This creates a link that says Tweet this and the url will be a link to Twitter.com that can update your status with Currently Reading : [The title of the post] and the shortened link to the article.
There you have it extremely easy and very cool addition to your blog, without slowing it down with a million plugins.
Page Curl Tutorial
Creating a page curl in photoshop is fairly novice but is useful all the same. Hope you learn something from this and yes there will be more tutorials coming. My assistant today is the lovely Mila Kunis
Modern Wallpaper Tutorial
Today i will be showing you all how to make something like this wallpaper in Photoshop
