Get me outta here!

Saturday, January 26, 2019

date picker using js

Posted by Unknown on January 26, 2019 with No comments
















<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
     
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
 
   <body>
      <!-- HTML -->
      <div id = "datepicker-2"></div>
   </body>
</html>

Tuesday, January 8, 2019

css box-shadow effect

Posted by Unknown on January 08, 2019 with No comments
<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>





////////////////
body {background:#ccc}

.box h3{
  text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
        box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Sunday, December 30, 2018

add and remove item using vue js source code

Posted by Unknown on December 30, 2018 with No comments
<!DOCTYPE html>
<html lang="en">
<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">
 
</head>
<style>
  .active{
    background-color: red;

  }
 
  #root{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

  }
 
</style>
<body>


<div id="root">

  <ul>
    <li v-for="(skill, i) in skills">
      <p>
        {{skill}} <button @click="removeSkill(i)">x</button>
      </p>
  </li>
  <input type="text" name="" v-model="addskill">
  <button type="" @click="addNewskill()">add</button>
  </ul>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
  <script>
  var app = new Vue({
    el: "#root",

    data: {
       
          addskill: '',
          skills: ['php', 'html', 'css']
    },

    methods:{
        addNewskill: function(){
          this.skills.push(this.addskill);
          this.addskill='';
        },
         removeSkill: function(i){
          this.skills.splice(i, 1);
        }
    }

  });

</script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Wednesday, November 7, 2018

select All checkbox using jQuery source code

Posted by Unknown on November 07, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
<title>Onclick select All tutorials</title>

<script src="jquery.js" type="text/javascript"></script>


<style type="text/css">
    body{
font-family:Verdana;
font-size:13px;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
</style>
</head>

<body>
<div id="content_pane">
<form action="" method="post">
<input id="checkAll" type="checkbox" name="selectAll"/>Select All
<p><input class="purchase" type="checkbox" name="product1"/>HTML</p>
<p><input class="purchase" type="checkbox" name="product2"/>CSS</p>
<p><input class="purchase" type="checkbox" name="product3"/>PHP</p>
<p><input class="purchase" type="checkbox" name="product4"/>jQuery</p>
<input class="purchase" type="submit" name="submit"/>
</form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
$('#checkAll').click(function(){
var c = this.checked;
$('input[type="checkbox"]').each(function(){
$(this).prop('checked',c);
});
}
);
});
</script>
</body>
</html>

Dropdown menu using jQuery source code

Posted by Unknown on November 07, 2018 with No comments
<!doctype html>

<head>

<title>Dropdown menu using jQuery!</title>
<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">
    body {
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
}


#content{
width:800px;
margin:0 auto;
background: green;
padding: 15px;
min-height:200px;
}
#menu li{
float:left;
list-style:none;
position:relative;
margin-right:4px;
}
.rem_radius a,.rem_radius a:hover{
border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
}
#menu li ul{
display:none;
float:left;
position:absolute;
top:36px;
padding:0;
}
#menu li ul li{
width:150px;
border-radius:0;
}
#menu li ul li a{
width:130px;
border-radius:0;
}
#menu li ul li:first-child a,#menu li ul li:first-child a:hover{
border-top-right-radius:6px!important;
}
#menu li ul li:last-child a,#menu li ul li:last-child a:hover{
border-bottom-left-radius:6px!important;    border-bottom-right-radius:6px!important;
}
#menu li a{
display:block;
float:left;
color:#fff;
background:#000;
font-weight:bold;
text-decoration:none;
padding:10px;
border-radius:6px;
}
#menu li a:hover{
background:#333;
border-radius:6px;
}
#menu li ul li a:hover{
background:#333;
border-radius:0;
}
</style>
</head>
<body>
<div id="content">
<ul id="menu">
<li><a href="#">Reference</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySql</a></li>
<li><a href="#">CakePHP</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML tutorials</a></li>
<li><a href="#">JQuery drop down menu</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
</div>

<script type="text/javascript">
    $(document).ready(function(){
$('#menu li').hover(function(){
$(this).find('ul').stop(true,true).slideDown(200);
},function(){
$(this).find('ul').stop(true,true).slideUp(200);
});
$('#menu li').hover(function(){
if($(this).children('ul').length > 0){
$(this).addClass('rem_radius');
}
}, function(){
$(this).removeClass('rem_radius');
});
});
</script>
</body>
</html>

Tuesday, November 6, 2018

Form validation Using jQuery source code

Posted by Unknown on November 06, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
<title>jQuery form validation</title>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>

<style>
    body{
font-family:Verdana;
font-size:13px;
}
#form_container{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
h2{
text-align:center;
}
.error{
color:#f00;
}
#form_container span{
float:right;
display:block;
clear:both;
}
#form_container label{
display:block;
float:left;
margin:5px 0;
width:150px;
}
#form_container input{
float:right;
margin:5px 0;
}
#form_container input[type="submit"]{
float:left;
margin:8px 0 0 254px;
}
</style>
</head>
<body>
<h2>Fill up form and hit submit</h2>
<div id="form_container">
<form id="reg_form" action="" method="post">
<label>First Name</label>
<input type="text" name="f_name" placeholder="First Name"/>
<span id="fnameInfo"></span>
<label>Last Name</label>
<input type="text" name="l_name" placeholder="Last Name"/>
<span id="lnameInfo"></span>
<label>Email</label>
<input type="text" name="email" placeholder="Email"/>
<span id="mailInfo"></span>
<label>Phone Number</label>
<input type="text" name="phone" placeholder="Phone"/>
<span id="phoneInfo"></span>
<input type="submit" value="Submit"/>
</form>
</div>

<script>
    $(document)
.ready(function () {
$('#reg_form')
.submit(function () {
if (validateTextField('f_name', 'fnameInfo') & validateTextField('l_name', 'lnameInfo') & validateEmail('email', 'mailInfo') & validateNumber('phone', 'phoneInfo')) {
return true;
} else {
return false;
}
});


function validateTextField(fieldName, Id) {
//if it's NOT valid
if ($('input[name=' + fieldName + ']')
.val()
.length < 1) {
$('#' + Id)
.text('Please enter any  text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
} else if (isNaN($('input[name=' + fieldName + ']')
.val()) == false){
$('#' + Id)
.text('Please enter any  text').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
return true;
}
}


function validateEmail(fieldName, Id) {
//testing regular expression
var a = $('input[name=' + fieldName + ']')
.val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if (filter.test(a)) {
//$('#'+fieldName).removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
//if it's NOT valid
else {
$('#' + Id)
.text('Please Type a valid e-mail address');
$('#' + Id)
.addClass('error');
return false;
}
}


function validateNumber(fieldName, Id) {
//if it's NOT valid
if (isNaN($('input[name=' + fieldName + ']')
.val())) {
$('#' + Id)
.text('Only number please,no text allowed');
$('#' + Id)
.addClass('error');
return false;
} else if ($('input[name=' + fieldName + ']')
.val() < 1){
$('#' + Id)
.text('Please fill the field').fadeIn();
$('#' + Id)
.addClass('error');
return false;
}
//if it's valid
else {
$('input[name=' + fieldName + ']')
.removeClass('error');
$('#' + Id)
.fadeOut();
$('#' + Id)
.removeClass('error');
return true;
}
}
});
</script>
</body>
</html>

Monday, November 5, 2018

Javascript customize date format code

Posted by Unknown on November 05, 2018 with No comments
<!DOCTYPE html>
 <html>
<head>

</head>
<body>

<script>



var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];


var date = new Date('11/10/2018 13:30:30');
var getsec = date.getSeconds();
var getmin = date.getMinutes();
var gethour = date.getHours();
var ampm = '';
if(gethour < 12){
   ampm = 'AM';
}
else{
    ampm = 'PM';
}
if(gethour == 0)
{
    gethour = 12;
}
if(gethour > 12){
    gethour = gethour-12;
}
var getmonth = date.getMonth();
var getdate = date.getDate();
var getyear = date.getFullYear();
document.write(getdate+' '+monthNames[getmonth]+' '+getyear+' '+gethour+' '+getmin+' '+getsec+' '+ampm);



</script>

 </body>
 </html>
Subscribe to: Posts (Atom)