Customizing Scrollbar with jQuery and CSS

Scrollbars would look really cool if they get customized in the right way. It would for sure enhance the visual appearance of your site. And so in this post we would be seeing on how to customize the scrollbar using jquery and CSS. There is a method to customize it using pure CSS but the big problem with that is that it wont take effect in non webkit browsers like Firefox or Opera. And so we would be using jQuery plugins to make this task easier. This would just include a single line of jquery. So lets get started.

jQuery enscroll Plugin :

This plugin would help us in customizing the scrollbar. You can download the plugin from here.

Writing Down the Markup :

So lets just write in the HTML part now. Wrap the content that you want to be scrollable with a div of class scrollbox. Below is a sample code :

<script src = "jquery.js"></script>
<script src = "enscroll.js"></script>
<div class = "scrollbox">
   //Your Content Here
</div>

And so that is it we are done with the markup ! Simple as that !

The CSS:

And so it is time to customize the scrollbar. This of course we would be doing with CSS. Take a look at the code below :

.vertical-track {   //For the background track of the scroll bar
   //Stylings Here
}
.vertical-handle { //For the scrollbar pointer
   //Stylings Here
}

This styling holds good only for the vertical scrollbar. You can use .horizontal-track and .horizontal-handle for styling the horizontal scrollbar.

jQuery Part :

And so we are done with the markup and CSS. Lets add the jquery line now. Before that make sure that you have included the enscroll.js file and your jquery.js file. The following is the jQuery code that you would need to add.

<script type = "text/javascript">
$(document).ready(function(){
   $('.scrollbox').enscroll();
});
</script>

And so that is it for this post. Happy styling :)

Read More

Create Your First CSS Animation

CSS Animations ! Yeah you can really do some good looking animation stuff in CSS and the basics are pretty simple too. In this post I would be writing on how to do some basic animation using CSS. To get started with CSS animations you need to learn a little bit about CSS transforms. They are kinda simple too.

So CSS animations are made of keyframes. Keyframes are parts of the animations and they define the animation. There are two steps in creating some animation effect using CSS.

• Defining the CSS animation
• Assigning it to an HTML element

And so let us get started with the first step i.e. defining the CSS animation. And by the way in this post we will be creating an animation that moves an image from one end to another.

Defining CSS Animation :

And so to define a css animation we need to use the @-keyframes keyword and you need to use moz and webkit to make sure that it works on all webkit browsers and as well as firefox and in addition to this keyword you need to add a name to the animation. So type in the code below to create the keyframe :

@-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

And so that is it about defining the CSS Animation. You have now created the keyframes. And now you need to make it compatible with all those webkit browsers and firefox. It is really simple to do that. Just add the following lines of code and you could do it.

@-webkit-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);
} 

@-moz-keyframes firstanim {

from{transform: translateX(0px);} 

to{transform: translateX(500px);}
} 

It is better that you add these two pieces of code before the previous one. And now that you have completed with the keyframes stufff. It is now time to add the HTML code and associate this animation with the HTML image.

Assigning Animation To HTML Image :

Lets just add a simple image using HTML and add a class to it.

<img src = "image.jpg" class = "animation">

And now let us add the animation to the HTML element. Add the following code to the CSS file.

.animation {
animation-name: firstanim;
animation-duration: 2s;
animation-timing-function: ease-in;
}

The first two lines are self explanatory. The third line wont be clear if you are new to this. It just defines the type of animation that you would like it to happen. It can take 5 type of values. They are linear,ease,ease-in,ease-out,ease-in-out. You can just experiment these things if you want. And the last thing that you need to do is to just add the following code to the same class so that it supports webkit browsers and firefox.

-webkit-animation-name: firstanim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: firstanim;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in;

And so that is it for this tutorial on basic CSS Animation. You can just download the Source code from the above link and try the demo. Happy Animating :)

Read More

PictureBox - The Most Simple Lightbox Plugin (jQuery)

So you would have seen in many sites that images would be displayed in a separate container and the background would get dull while the image gets displayed, just like lights off ! This is called a jQuery lightbox. And many think that it is a bit difficult to create and implement a jQuery Lightbox. That is kind of true if you are going to create your own Lightbox. The trouble comes in when you need to center the image in the dead center of the page.

Related Post : Horizontal and Vertical Centering in CSS

So to help you out of those troubles many developers started to create lightbox plugins. And I too did so keeping in mind that simplicity should be delivered. 

I created a jQuery Lightbox plugin called as PictureBox and the advantage of this plugin from others lies in its simplicity to implement and you will find out that in the later part of this post.

PictureBox ! - A Simple Yet Awesome jQuery Lightbox plugin

Features :

• Completely Responsive
• Very Easy To Implement
• Very small footprint of 4.7 KB
• Responds to your KeyStrokes
• Includes Image Slider

How To Implement :

As I have been saying the implementation is so simple that even newbies could handle it. Here is the sample implementation code :

<link rel = "stylesheet" href = "includes/picturebox.css">

<script src = "includes/jquery.js"></script> 

<script src = "includes/picturebox.js"></script> 

<div class = "lightbox"> 

                   //Your Images 

</div> 

To put it much simpler just wrap the images that you want to appear in the image slider with a div of class lightbox. Simple as that ! So it is worth trying and you would love it.

Read More

Facebook PHP SDK V4 - Logging In and Get Name of User

Facebook recently updated the PHP SDK. And so the current version is version 4.0. And things have changed a lot from the previous version. It is now completely object oriented and is kinda easier when compared to the earlier version which was 3.2.3. I already made a video on how to Login To Facebook and Get the name of the user using PHP SDK V 3.2.3 and so in this post we will be seeing on how to do the same using this version. Lets get started.

Downloading the Facebook PHP SDK :

And so it is similar to download the PHP SDK and its just like the last version. So get headed to the link below to download the PHP SDK.

DOWNLOAD FACEBOOK PHP SDK V4

Writing Down The Code :

And so the next part is to code the stuff. The first thing that you need to do is that you need to extract the downloaded file and you need to copy the folder named Facebook inside the src folder. Copy that folder to the root of your project. And then write the following piece of code inside your index.php file.

<?php

session_start();

include 'Facebook/FacebookSession.php';

include 'Facebook/FacebookRedirectLoginHelper.php';

require_once( 'Facebook/FacebookRequest.php' );

require_once( 'Facebook/FacebookResponse.php' );

require_once( 'Facebook/FacebookSDKException.php' );

require_once( 'Facebook/FacebookRequestException.php' );

require_once( 'Facebook/FacebookAuthorizationException.php' );

require_once( 'Facebook/GraphObject.php' );

require_once( 'Facebook/GraphUser.php' );

Use Facebook\FacebookSession;

Use Facebook\FacebookRedirectLoginHelper;

use Facebook\FacebookRequest;

use Facebook\FacebookResponse;

use Facebook\FacebookSDKException;

use Facebook\FacebookRequestException;

use Facebook\FacebookAuthorizationException;

use Facebook\GraphObject;

use Facebook\GraphUser;

FacebookSession::setDefaultApplication('APP_ID', 'APP_SECRET');

$helper = new FacebookRedirectLoginHelper('http://cyberfreax.com/test/index.php');

$session = $helper->getSessionFromRedirect();

if($session != NULL){

echo "Logged In !<br>";

}

else{

echo '<a href="' . $helper->getLoginUrl() . '">Login</a>';

}

?>

And so in this code what we basically do is that we just include the Facebook PHP SDK files in our index page. Unlike the earlier version of the Facebook PHP SDK in this version Facebook has separated the different functions into different files so that you don't need to includes unnecessary functions in all files. And moreover it uses namespaces.

We are getting the Facebook session using the default function. If the session is not available then we prompt the user to login by displaying the Login link. And if the session is set it would mean that the user is logged in. And so we are at first just displaying the name of the user. But we would want to display the name of the user too. And so add the following piece of code right below the echo "Logged In !<br>"; line.

$request = new FacebookRequest($session, 'GET', '/me');

$response = $request->execute();

$graph = $response->getGraphObject(GraphUser::className());

echo $graph->getName();

Instead of the above piece of code you can also combine them into a couple of lines. You can add something like the following :

$request = (new FacebookRequest(

      $session, 'GET', '/me'

    ))->execute()->getGraphObject(GraphUser::className());

    echo $user_profile->getName();

But the problem with the above code is that it works for only PHP version 5.3 and above. So make sure that you have a suitable version of PHP before running the above code.






And so that is it. You can now easily add a Login with Facebook link to your website using the latest version of Facebook PHP SDK. Happy Coding :)

Read More

How To Respond To Key Strokes using Javascript

Responding to key strokes using Javascript is pretty simple and not as difficult as you think it is. This can be done using a simple javascript event called as onKeyDown and onKeyUp. And so this is a simple video tutorial teaching you guys on how to respond to key strokes using simple javascript.

Read More

How To Create A Drop Cap in CSS

Drop Caps ! So they are one of the cool ways to design your site. The first thing you need to know is what is a drop cap ? Drop Cap is the one that you see in most of the books that the first letter of a chapter would have different stylings. It would have a bigger font size when compared to other parts of the paragraph. That is called as a drop cap. You can see that in this post too. So lets see on how to add that using CSS.

Using a Span :

One of the easy way to do that is to cover the first character of a paragraph to be within a span. You can do that using the CSS code like in the below.

<style>
.dropcap {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p><span class = 'dropcap'>D</span>rop Caps are really awesome !</p>

Targeting first character using CSS :

In most cases it is possible that the text that you would like to enter in would be dynamic and so the above method would not be of use in such a case. So lets see on how to handle it. It can be done using CSS selectors.

<style>
p:first-child:first-letter {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p>Drop Caps are really awesome !</p>

The output of this method would be the same as that of the previous method.But there is a catch here. This method wouldn't work for IE < 9. But that would not be a big problem. Only a very small percent of IE users would be using IE < 9. So don't worry about that. The output of the above methods would be something like the follows :

Drop Caps

And so that is it about this short post. Happy Designing :)

Read More

Create A Fully Functional LightBox in jQuery [VIDEO]

Ever wondered how to create a lightbox ? So here is a video tutorial on how to create a fully functional LightBox in jQuery. This includes a Image Slider too. Watch the Video Below to do it in minutes :)

Read More

Horizontal and Vertical Centering in CSS

Horizontal and vertical centering in CSS has been a boss for the css newbies who din't know the right way on centering elements in CSS and here is a guide on how to horizontally and vertically center elements in css. There are a few scenarios in this case. And lets deal with all of them.

Images :

1. Know Dimensions Horizontal and Vertical Center :

And so let us you are in such a situation where you are having an image with known dimensions and you want to center the image both horizontally and vertically so that it is in the dead center of the page. Then you can do something like the follows :

<style>

img {
position: absolute;
top: 0;
left: 0;
top: 50%;
margin-top: -250px; //half the height of the image - vertical alignment
left: 50%;
margin-left: -250px; //half the width of the image - horizontal alignment
}
</style>
<img src = "images/1.jpg" width = "500" height = "500">

OUTPUT 

This is the best way to align an image of a known width and height. What if you don't know the width and the height of the image that you are displaying for example if you are displaying images dynamically then you would not be knowing the width and height. So to align them take a look at the next scenario.

2. Unknown Dimensions - Dead Center Align :

To align an image in such a case you first need to create a div and let that div be the parent. The image would be a child in this case and so now you can easily align the image in the dead center of the div.

If you want to align the image in the dead center of the page then just expand the div to the entire page by using a width and a height of 100%.

<style>

#parent{
position: relative;
background-color: #d1d1d1;
width: 80%;  //this is your choice. But make sure you use % instead of pixels
height: 80%;  //this is your choice. But make sure you use % instead of pixels
}

#parent img {
position: absolute;
top: 5%;                           //vertical alignment
bottom: 5%;                  //vertical alignment
margin: auto;               //horizontal alignment
left: 0;
right: 0;
max-width: 70%;    //this is your choice. But make sure you use % instead of pixels
max-height: 70%;   //this is your choice. But make sure you use % instead of pixels
}

</style>

<div id = "parent">
<img src = "images/1.jpg">
</div>

And so the the image now has been dead center aligned ! So now lets see on how to align a text element.

Text

1. Dead Center of the Body :

Add the following code to your text editor. Make sure that the javascript comes after your element's markup.

<style>
p{
text-align: center; //horizontal align
}
</style> 

<p id = "new">Hello World</p>

<script>
var height = window.innerHeight;
alert(height);
document.getElementById("new").setAttribute("style","line-height: " + height +"px;");   //vertical align
</script>

2. Dead Center of a DIV :

It is easier to align text in the dead center of a div than the dead center of the body. This does not include javascript if you know the height of the div. Use the code below for the purpose :

<style>

div {
border: 1px solid #000;
height: 300px;
width: 300px;
}

p{
text-align: center;
line-height: 300px;  //same as height of parent div
}

</style>

<div>
<p>Hello World</p>
</div>

And so that is it for this short tutorial. You can now easily horizontally and vertically align both images and text in your markup.  Stay tuned for more and Happy Coding :)

Read More

Post To Facebook using PHP SDK

Ever wondered how those apps that you use in facebook are able to post content to your profile or your groups ? Well here is the solution. In my last post I've dealt with how to Login to your facebook account using the PHP SDK. And in this post I'll be dealing with how to post to facebook using PHP SDK. Watch the video below to know how to do

Useful Post : Login and Get name of the user using the Facebook PHP SDK

Video Tutorial :

 

Read More

Facebook PHP SDK - Logging in a user [VIDEO TUT INCLUDED]

Hello there. I recently created a facebook web app that lets you to post to multiple groups, pages and your profile with just one click. You can post a message and even a link. Sounds cool right ? You can find the app here. And so I surfaced a lot through the facebook php sdk while creating the app. So now I thought of writing a series of posts dealing with the facebook php sdk.

In this post I'll be dealing with how to login to a facebook account using the facebook php sdk and how to retrieve the user information. And so lets get started.

VIDEO TUTORIAL

Prerequisites :

You need to have the following :

• Fair knowledge on PHP


• Facebook PHP SDK (We will be downloading this)


• Your Text editor

Creating the app :

The first step is to create the actual facebook app. And this will be a kind of a communication link between facebook and your site. Follow the steps below to create your app :

1. Go to Facebook Developers Page.

2. Click on apps on the header and go to Register as a Developer. 

3. And once you have registered as a developer you will get into the documentation. (I swear Facebook has a really bad documentation)

4. Click on the same apps tab and click on Create a new app.

5. Enter a name, choose a category and proceed with creating the app.

6. In your app dashboard go to the settings tab and enter a contact email address.

7. Click on Add Platform and select Website.

8. In the site URL text box type in the domain of your site if you have one else type in localhost if you would be testing the app at your localhost. (Note : Facebook PHP SDK code would work only in the site which you mention here)

9. Save it return to your dashboard.

10. Make a note of your App ID and App Secret.

Bringing in the Facebook Login :

And now that you have completed creating the app and it is time to creating the login functionality. Follow the steps below to do so.

1. Download the Facebook PHP SDK.

2. Unzip it and copy the src folder inside it to the root of your app.

3. Create an index.php file where you placed the src folder.

4. Fire up your index.php file and type in the following code.

<?php

require_once 'src/facebook.php';

$fb = new Facebook(array(

'appId' => 'YOUR APP ID',

'secret' => 'YOUR APP SECRET ID'

));

Remember to replace your app id and your app secret. What this basically does is it creates an instance of the class BaseFacebook present in the facebook.php file.

5. And now to login the user add the following code.

if($fb->getUser() == 0){    //checks if the user is already logged in

$loginUrl = $fb->getLoginUrl();   //carries out if user not logged in

echo "<a href = '$loginUrl'>Login</a>";

}

else{

echo "<a href = 'logout.php'>Logout</a>";  //we will be creating the logout.php file later

}

In this piece of code we are letting the user to login to your site using his facebook account. We are displaying the login link if the user is not logged in else we are displaying the logout url.

6. We have completed logging in the user and now the job is to display the profile picture and name of the user. To do add the following code in the else part.

$api = $fb->api('me');

$name = $api[first_name] . " " . $api[last_name];

$id = $api[id];

echo "<img src = 'http://graph.facebook.com/$id/picture?width=150&height=150'><br>";

echo "Hi $name";

7. And so the only job left is to create the logout.php file. Create a file named logout.php and add the following code in it.

<?php

require_once 'src/facebook.php';

$fb = new Facebook(array(

'appId' => 'YOUR APP ID',

'secret' => 'YOUR APP SECRET ID'

));

$fb->destroySession();

?>

Replace your app id and the app secret in the respective places.

And that's it ! We have successfully created a facebook which lets the user to login and we have displayed the user's profile picture and his name ! We are done for the tutorial. Stay tuned for more tutorials on Facebook PHP SDK. Happy Coding :D

Read More