Creating a Slide Up and Slide Down Effect using CSS

CSS animations do rock according to me when compared to other kinds of web animation. I love those just for the fact that they are pure CSS. But still a few of those CSS animations are not completely pure CSS. They need JavaScript to handle some stuff. In this post we will be seeing on how to create a simple CSS slide up and slide down animation. So lets get started.

YOU MIGHT ALSO LIKE : CREATE YOUR FIRST CSS ANIMATION

The HTML Part :

The first thing of course is that you need to create the stuff that you need to animate. In this case we would be creating a simple HTML div that has a background color of black or whichever you prefer. Just add the following code to create the element and about the background color we would be dealing that with CSS.

<div class="slide" id = "slide">Random Stuff in here.</div> 

CSS :

And so now lets get started with the fun part. Add the following CSS stylings to your page. This basically adds a CSS transformation that lets you to animate the div that we created in HTML.

.slide {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
width: 200px;
height: 200px;
background-color: red;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
.slide.closed {
max-height: 0;
}

The basic concept behind this is that we are just adding an additional class the div when we click on a button that we are about to create. This can be done using JavaScript. And so just add the following code and you would get the complete finished product.

<button onclick="document.getElementById('slide').classList.toggle('closed');">Click Me !</button>

And so that is it ! Happy Animating :)

Read More

Introduction To PHP Data Objects (PDO)

MySQL is almost dead and people are moving towards PDO and MySQLi a lot these days. The most important reason that people switch from MySQL is the fact that it is prone to injection. This could be prevented but still it is a major security flaw. So it is now time for you to migrate to PDO.

PHP Data Objects :

PDO is not as difficult as you think. It is pretty simple, in fact much simpler than MySQL. It is a more standardised way for dealing with Databases. It has common  syntaxes for different types of databases including MySQL, PostgreSQL, MS SQL Server etc. So watch the video below to get to know the basics of PDO.

Read More

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