Rolling links - CSS3 + JS example

"Rolling link" is a great example of CSS and JS combination. I found it the other day at this great site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/ full of flat-ui design inspirations.

This tutorial shows you how to create catchy "rolling links".

 

What we need

1. Notepad++ (or any other html editor of your choice)
2. jQuery  (you can download jQuery file from  http://jquery.com/download/ or you can add this markup into head section of your html file <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>

 

Create Html file

We'll start with the simple html file. Let's save it as index.html

<!DOCTYPE html>
<html>
   <head>
       <title>Fancy Rolling Link</title>
   </head>
   <body>
   </body>
</html>

Add div box into body section. We will apply CSS3 and JavaScript to everything inside the <a> tags, in our case it'll be "Flat design".

<div>
    <article>
       We love <a href="#" >Flat design </a>.
    </article>
</div>

Styling rolling links

You can create a CSS file or else you can include CSS into head section of he HTML file. We'll add this CSS markup to our html file in this tutorial.  

 <style>
  a {
   color: #9b59b6;
   font-weight: bold;
   text-decoration: none;
   }
  .roll-link {
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
   -webkit-perspective: 600px;
      -moz-perspective: 600px;
       -ms-perspective: 600px;
           perspective: 600px;
   -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
           perspective-origin: 50% 50%;
   }
   .roll-link:hover span {
    background: #9b59b6;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
   .roll-link span {
    display: block;
    padding: 0 2px;
    position: relative;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
     -ms-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    }
    .roll-link span:after {
     background: #9b59b6;
     color: #fff;
     content: attr(data-title);
     display: block; 
     left: 0;
     padding: 0 2px;
     position: absolute;
     top: 0; 
     -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
         -ms-transform-origin: 50% 0%;
             transform-origin: 50% 0%;
     -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
         -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
             transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
     }  </style>

JavaScript

This simple JS function is executed immediately after the DOM has been fully loaded. It finds all <a> tags, adds class="roll-link" to it and encloses text inside <a> tag with <span> tags. 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script>
  jQuery(document).ready(function(){
   initFancyRollingLinks();
  });

  function initFancyRollingLinks(){
   jQuery('a').each(function(i,e){
    var link = jQuery(e);
    link.addClass('roll-link');
    link.html('<span data-title="'+ link.text() +'">' + link.html() + '</span>');
   });
  };
 </script>

Demo

Demo to this tutorial is not available at the moment. But you can see working version on this site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/

Login & Logout using Facebook C# SDK and asp.net mvc3

If you're having problems with Open Graph follow Vaibhav's tutorial. It really worth it.

Here's the link: http://shahvaibhav.com/login-logout-using-facebook-account-using-facebook-c-sdk-and-asp-net-mvc3/

How to connect to JavaDB and create database -- Tutorial

1. Open your Netbeans, go to Window and select Services. Alternatively press CTRL+5.

2. Right Click on JavaDB and select Start Server

3. Right Click again and this time select Create Databese

1. name it -- login
2. username -- nut
3. password -- nut
4. confirm password
5. click OK

4. Right click on jdbc:derby://localhost:1527/login[nut on APP] and select Connect

5. Open jdbc:derby://localhost:1527/login[nut on APP] tree and select APP

6. Right click on Tables, select Create Table

7. Name your table -- users

8. Create columns, one by one

1. firstName
2. lastName
3. userName
4. password
5. address1
6. address2
7. address3
8. address4
9. telephone
10. mobile
11. email
12. ageGroup
13. employmentStatus

9. Alternatively you can create and populate your table using mysql query. Right click on Tables and select Execute Command and insert following mySql query.

CREATE TABLE users (firstName VARCHAR(20), lastName VARCHAR(20), userName VARCHAR(15), password VARCHAR(15), address1 VARCHAR(30), address2 VARCHAR(30), address3 VARCHAR(20), address4 VARCHAR(20), telephone VARCHAR(15), mobile VARCHAR(15), email VARCHAR(35), ageGroup VARCHAR(5), employmentStatus VARCHAR(17));

and  Run SQL.

10. Add some users...
INSERT INTO users 
VALUES      ('Jake', 'Roberts', 'snake@ifpwafcad.com', 'password' , '123 Castle Lawns' , 'Tallagh' , 'Dublin 24' , 'Ireland' , '412 565-5656', '555 565-5656','snake@ifpwafcad.com', '18-24' , 'Student' ),
('Andre','','snake@ifpwafcad.com', 'password' , '123 Castle Lawns' , 'Tallagh' , 'Dublin 24' , 'Ireland' , '412 565-5656', '555 565-5656','snake@ifpwafcad.com', '18-24' , 'Student' );
and  Run SQL.