<!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>
article
Wednesday, November 26, 2014
How to limit the number of selected checkboxes
How to limit the number of selected checkboxes
Sunday, November 23, 2014
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
http://localhost/codeIgniter3_1_10_pagination/pagenation/pagenum
Download http://bit.ly/2Ey5xIu
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
<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>
Subscribe to:
Posts (Atom)