Thursday, July 6, 2017

How to Create Text Animation Using CSS

        , , , , , ,     1 comment   

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

 For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

 #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

 Following are the steps to creating HTML and CSS  text animations. 


Step 1 : ( Create HTML )

    <p>I'm a</p>

     <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

         body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

 I hope you like this article very much & Please don't forget to share.

Thank you.
Continue Reading →

Form Processing Steps Design Using HTML & CSS

        , , , , , ,     No comments   


In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I will provide validations too.  To implementing this design please follow the below steps.



Step 1 : ( Create HTML List )
<ul>
    <li class="flag">
      Item Details
    </li>
    <li class="flag">
      Shipping Address
    </li>
    <li class="flag">
      Payment
    </li>
    <li class="flag">
      Conformation
    </li>

</ul>

Step 2 : ( Apply CSS Styles to HTML List )

* {
  box-sizing: border-box;
}
ul{margin-top:100px;}

 li{
  float:left;
}
.flag {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  padding-top: 18px;
  position: relative; 
  background: #f36633;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  list-style:none;
}
.flag:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.flag:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 25px solid white;
  border-left: 25px solid transparent;
  border-bottom: 25px solid white;

}

 I hope you like this article very much & Please don't forget to share.

 Thank you.
Continue Reading →

Tuesday, January 24, 2017

Adding and Display data using AngularJS

        , , , , , ,     No comments   

Hi Folks,

In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.

Below is the code, you can directly copy and paste and run in your application.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 <script>
var mainApp = angular.module("mainApp", []);

 mainApp.controller('studentController', function ($scope) {
    $scope.student = {
        firstName: "",
        lastName: "",
        email: ""
    };

     $scope.reset = function () {
        $scope.student.firstName = "";
        $scope.student.lastName = "";
        $scope.student.email = "";
    };
    $scope.reset();
    $scope.users = [];
    $scope.addUser = function () {
        console.log($scope.student);
        $scope.users.push({
            firstName: $scope.student.firstName,
            lastName: $scope.student.lastName,
            email: $scope.student.email
        });
        $scope.reset();
    };
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>

 <div ng-app="mainApp" ng-controller="studentController">
    <form name="studentForm" novalidate>
        <table border="0" class="table">
       
            <tr>
                <td>Enter first name:</td>
                <td>
                    <input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
      <span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Enter last name:</td>
                <td>
                    <input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
      <span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
      <span ng-show="studentForm.student.email.$error.required">Email is required.</span>
 <span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
                <td>
                <button class="btn btn-primary" ng-click="reset()">Reset</button>
                    <button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
                </td>
            </tr>
        </table>
        <p>Total User: {{ users.length }}</p>
        <table class="table table-striped">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="usr in users track by $index">
                <td>{{ usr.firstName }}</td>
                <td>{{ usr.lastName }}</td>
                <td>{{ usr.email }}</td>
            </tr>
            </tbody>
        </table>

 </body>
</html>

  I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Friday, January 20, 2017

Back to top page scroll using Jquery, CSS, HTML5

        , , , , , , , ,     No comments   

Hi, Today i will explain about how to scroll page to top from bottom.

 This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

 This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

 Below is the working code you can directly copy and paste ,

 <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    $(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
  <style>
 #toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
  </style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 </p>

 </div>
</div>

 </body>
</html>
I hope you like this article very much & Please don't forget to share.

Thankyou.
Continue Reading →

Thursday, January 19, 2017

Animated “x” icon for the Bootstrap navbar-toggle using CSS (Or) Hamburger icon animation using Bootstrap and CSS

        , , , , , ,     No comments   

There are lots of posts online about that trendy (and awesome) transition from the hamburger icon (when the menu is collapsed) to that “x” (when the mobile menu has been expanded). This should be pulled off by CSS3 animations, of course.
Below is the code , you can copy and paste ,run directly..

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

   </style>
</head>
<body>

 <div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

   <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>
</div> <!-- /container -->

 </body>
</html>

I hope you like this article very much & Please don't forget to share.
Thankyou.
Continue Reading →

Javascript shorten string without cutting words (Or) Javascript trim multiline string without cutting words

        , , , , , ,     1 comment   

In this article i will give Javascript code for trim multiline string without cutting words.
Here i am giving an example,

say i had the string text = "this is a long string i cant display" i want to trim it down to 10 characters but if it does't end with a space finish the word i don't want the string variable to look like this "this is a long string i cant dis" i want it to finish the word until a space occurs.

So here is the solution. You can directly copy and paste the code and run your code.

Solution One:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   // SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}\\S*"))||[s])[0];
}
alert( shorten("The quick brown fox jumps over the lazy dog", 5) );
});
</script>
</head>
<body>
</body>
</html>

Solution Two:

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
infotext="this is a longish string of test.\n bla bla bla bla text here";
infotext = infotext.match(/^.*$/m)[0].replace(/^([\s\S]{10}\S*).*/, "$1");
alert(infotext);
</script>
</head>
<body>
</body>
</html>

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.
Thankyou

Continue Reading →
Subscribe to: Posts (Atom)

Popular Posts