article

Wednesday, November 26, 2014

How to limit the number of selected checkboxes

How to limit the number of selected checkboxes

 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>How to limit the number of selected checkboxes</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});
});//]]> 

//option 2
//$(window).load(function(){
//$('input[type=checkbox]').change(function(e){
//  if ($('input[type=checkbox]:checked').length > 3) {
//        $(this).prop('checked', false)
//        alert("allowed only 3");
//   }
//})
//});
 
</script>
</head>
<body>
         <div class="pricing-levels-3">
          <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
        </div>
  
</body>
</html>

Sunday, November 23, 2014

How to Get Element id Using Jquery

How to Get Element id Using Jquery 

 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript"> 
  $(document).ready(function () {
   $('.test').click(function() { 
     alert('' + $(this).attr('id'));
   });
  });  
 </script> 
 </head>
 <body>
  <input type="button" value="Button A" class="test" id="buttonA"> 
  <input type="button" value="Button B" class="test" id="buttonB">
 </body>
</html>

Jquery .first() and .last() Function Examples

Jquery .first() and .last() Function Examples
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() { 
 
 $("#first").click(function(){       
  $("li").first().css("background-color",'#DD4B39');      
 });
 
 $("#last").click(function(){         
  $("li").last().css("background-color",'#DD4B39');
 });
 
   });
  </script>
   <div>
  <ul>
   <li>First Element</li>
   <li>Second Element</li>
   <li>Third Element</li>
   <li>Forth Element</li>
   <li>.....</li>  
   <li>.....</li>
   <li>Last Element</li>
  </ul>
 </div>
 </div>
  <button id="first" class="btn">First</button>  
  <button id="last" class="btn">Last</button>  

Pagination Using Php Codeigniter

Pagination Using Php Codeigniter 

Create Database table
CREATE TABLE `country` (
  `id` smallint(5) UNSIGNED NOT NULL,
  `printable_name` varchar(255) NOT NULL,
  `CountryAbbrev` varchar(10) DEFAULT NULL,
  `CurrencyAbbr` varchar(4) DEFAULT NULL,
  `CurrencyRate` float DEFAULT NULL,
  `CurrencyCode` varchar(3) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
 
Codeigniter Base Url Configuration 
$config['base_url'] = "http://localhost/codeIgniter3_1_10_pagination/";
 

 
Pagination Controller (pagenation.php) application\controllers\pagenation.php

 
 
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Pagenation extends CI_Controller {
 public function __construct() {
        parent:: __construct();
        $this->load->helper("url");
        $this->load->model("Countries");
        $this->load->library("pagination");
    }
 public function pagenum() 
 {
  $config = array();
        $config["base_url"] = base_url() . "pagenation/pagenum";
   $config["total_rows"] = $this->Countries->record_count();
   $config["per_page"] = 20;
  $config["uri_segment"] = 3;
  $choice = $config["total_rows"] / $config["per_page"];
  $config["num_links"] = round($choice);
     $this->pagination->initialize($config);

    $page = ($this->uri->segment(3))? $this->uri->segment(3) : 0;
    $data["results"] = $this->Countries->fetch_countries($config["per_page"], $page);
    $data["links"] = $this->pagination->create_links();
 
    $this->load->view("expagenation", $data);

 }
}
Pagination Model (Countries.php) application\models\Countries.php
<?php
class Countries extends CI_Model
{
    public function __construct() {
        parent::__construct();
    }
  public function record_count() {
        return $this->db->count_all("country");
    }
 
 public function fetch_countries($limit, $start) {
        $this->db->limit($limit, $start);
        $query = $this->db->get("country");
  if ($query->num_rows() > 0) {
            foreach ($query->result() as $row) {
                $data[] = $row;
            }
            return $data;
        }
        return false;
      
   }


}
create expagenation.php file under folder name application/views/expagenation.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Codeigniter 3.1.10 Dev - Pagination</title>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Countries</h1>
  <div id="body">
<?php
foreach($results as $data) {
    echo $data->printable_name . " - " . $data->CountryAbbrev . "<br>";
}
?>
   <p>
   <div class="pagination">
   <?php echo $links; ?>
   </div>
   </p>
  </div>
  <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
 </div>
  <style>
 .pagination a { 
     padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
 }
 .pagination strong{ 
     z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
 padding: 6px 16px;
    margin-left: -1px;
    color: #fff;
    text-decoration: none;
 }
 </style>
</body>
</html>
Run
http://localhost/codeIgniter3_1_10_pagination/pagenation/pagenum

Download http://bit.ly/2Ey5xIu

Friday, November 21, 2014

Jquery AJAX post example with Php CodeIgniter framework

Jquery AJAX post example with Php CodeIgniter framework
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function makeAjaxCall(){
 $.ajax({
  type: "post",
  url: "http://localhost/CodeIgnitorTutorial/index.php/usercontroller/verifyUser",
  cache: false,    
  data: $('#userForm').serialize(),
  success: function(json){      
  try{  
   var obj = jQuery.parseJSON(json);
   alert( obj['STATUS']);
     
   
  }catch(e) {  
   alert('Exception while request..');
  }  
  },
  error: function(){      
   alert('Error while request..');
  }
 });
}
</script>
</HEAD>
<BODY>
<form name="userForm" id="userForm" action="">
<table border="1">
 <tr>
  <td valign="top" align="left">  
  Username:- <input type="text" name="userName" id="userName" value="">
  </td>
 </tr>
 <tr>
  <td valign="top" align="left">  
  Password :- <input type="password" name="userPassword" id="userPassword" value="">
  </td>
 </tr>
 <tr>
  <td>
   <input type="button" onclick="javascript:makeAjaxCall();" value="Submit"/>
  </td>
 </tr>
</table>
</form>
 </BODY>
</HTML>
//UserController.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class UserController extends CI_Controller {
 
 public function verifyUser() {
  $userName =  $_POST['userName'];
  $userPassword =  $_POST['userPassword'];
  $status = array("STATUS"=>"false");
  if($userName=='admin' && $userPassword=='admin'){
   $status = array("STATUS"=>"true"); 
  }
  echo json_encode ($status) ; 
 }
}

Thursday, November 20, 2014

How to detect when a youtube video finishes playing using javascript

How to detect when a youtube video finishes playing using javascript


 
<div id="player"></div>
    <script src="http://www.youtube.com/player_api"></script>
    <script>
        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: '0Bmhjf0rKe8',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }
        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }
        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }
    </script>

Related Post