Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Thursday, 4 July 2013

Dynamic Theme or background change using Colour picker


We can dynamically change the particular div background colour using javascript colour picker 
we have to follow 4 steps to done above task
step 1 :include jscolor picker file in ur file 
step 2 :create a text box and define a class color
step 3 :create javascript function for change the div background colour according to the selection by using js cookie 
step 4 :call the Js-function in text box onblur event 
picker.html

<html>
<head>
 <title>colour picker demo</title>
<script>
function pick()    //------------------------------------------>step 3
{
var elem = document.getElementById("para1").value;
var cook=document.cookie="#"+elem;
var colour=document.getElementById("change");
colour.style.background=cook;
}
</script>
</head>
<body>
<div style="height:100px; width:400px;" id="change"> 
<!--colour change-->
</div>
 <script type="text/javascript" src="jscolor.js"></script> //->step1
 Click here: <input class="color" value="" onblur="pick()" id="para1">//->step2
//---------------------------------------------------- >step 4
</body>
</html>

Video preview:
Download
Posted by at No comments:
Labels:

Monday, 6 May 2013

javascript conform box 


<script type="text/javascript">
function Validate(event) 
{
var thereturn = confirm("Are you sure want to delete the profile?");
if (event) 
{
        if (!thereturn)
{
event.preventDefault();
}
} 
else 
{
return thereturn;
}
}
window.onload = function()
{ 
document.getElementById('delete-form').onsubmit = Validate;
};
</script>
<input type="submit" class="submit redform" value="delete"  onclick="Validate(event)" />
Posted by at No comments:
Labels:

Thursday, 11 April 2013

jQuery-Php for selecting all checkbox by clicking one checkbox 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () 
{
$('#d').click(function()
{
if (this.checked==true)
{
$('input[name="vehicle[]"]').prop('checked', true);
}
if (this.checked==false)
{
$('input[name="vehicle[]"]').prop('checked', false);
}
});
});
</script>
<form action="" method="post">
<input type="checkbox" name="df" value="Bike" id="d">click to select all<br>
<input type="checkbox" name="vehicle[]" value="scooter">scooter<br>
<input type="checkbox" name="vehicle[]" value="suzuki">suzuki<br>
<input type="checkbox" name="vehicle[]" value="yamaha">yamaha<br>
<input type="checkbox" name="vehicle[]" value="honda">honda<br>
<input type="checkbox" name="vehicle[]" value="Car">car
<input type="submit" value="submit" name="sub"/>
</form>
<?php
if(isset($_POST['sub']))
{
$a=$_POST['vehicle'];
print_r($a);
}
?>

Download

Posted by at No comments:
Labels:

Thursday, 28 March 2013

jQuery conflict 


<script>
var jQ144 = jQuery.noConflict(true);
jQ144(document).ready(function($)
{
$('.jqte-test').jqte();
});
</script>
Posted by at No comments:
Labels:

Thursday, 7 March 2013

jQuery for calculating nights in between two dates!


Jquery :

$('#enddate').change(function()  {
<!--alert('Handler for .change() called.'); -->
var night = $("#end-date").val();
var de=$("#start-date").val();
function parseDate(str)
{
var mdy = str.split('/')
return new Date(parseInt(mdy[2], 10), // Year
parseInt(mdy[1], 10) - 1, // Month (starts with 0)
parseInt(mdy[0], 10)); // Day of month
}
function daydiff(night,de)
{
return (de-night)/(1000*60*60*24)
}
//var end=de-night;
$('#nights').val(daydiff(parseDate($('#start-date').val()), parseDate($('#end-date').val())));

var gt=$("#nights").val();
$('#dis').html(gt);
if(isNaN(gt))
{
$("#nights").css({"display":"none"});
$("#dis").css({"display":"none"});
$("#ni").css({"display":"none"});
}
else
{
$("#nights").css({"display":"block"});
$("#dis").css({"display":"block"});
$("#ni").css({"display":"block"});
}

});


$('#start-date').change(function() {
<!--alert('Handler for .change() called.'); -->
var night = $("#end-date").val();
var de=$("#start-date").val();
function parseDate(str)
{
var mdy = str.split('/')
return new Date(parseInt(mdy[2], 10), // Year
parseInt(mdy[1], 10) - 1, // Month (starts with 0)
parseInt(mdy[0], 10)); // Day of month
}
function daydiff(night,de)
{
return (de-night)/(1000*60*60*24)
}
//var end=de-night;
$('#nights').val(daydiff(parseDate($('#start-date').val()), parseDate($('#end-date').val())));

var gt=$("#nights").val();
$('#dis').html(gt);
if(isNaN(gt))
{
$("#nights").css({"display":"none"});
$("#dis").css({"display":"none"});
$("#ni").css({"display":"none"});
}
else
{
$("#nights").css({"display":"block"});
$("#dis").css({"display":"block"});
$("#ni").css({"display":"block"});
}

if(gt==0)
{
alert('start date and end date will be same pls change it!');
$("#start-date").val("");
$("#nights").val("");
$('#dis').html("");
}
if(gt<0)
{
alert("start date is greater than end date pls chage it!");
$("#end-date").val("");
$("#nights").val("");
$('#dis').html("");
}
//var end=de-night;
});

});

</script>

<script>
var gty=$("#nights").val();
if(gty!=isNaN)
{
$("#nights").css({"display":"none"});
}
else
{
$("#nights").css({"display":"block"});
}
</script>

<!--script for room management -->
<script type="text/javascript" charset="utf-8">
$(function()
{
$('#rooms').change(function() { //aading rooms
var room=$("#rooms").val();
if(room==2)
{
$("#one").css({"display":"block"});
$("#secondtr").css({"display":"block"});
$("#third").css({"display":"none"});
$("#fourth").css({"display":"none"});
$('#adult1').attr("disabled", false);
$('#adult2').attr("disabled", true);
$('#adult3').attr("disabled", true);
$('#child1').attr("disabled", false);
$('#child2').attr("disabled", true);
$('#child3').attr("disabled", true);
}
if(room==3)
{
$("#one").css({"display":"block"});
$("#secondtr").css({"display":"block"});
$("#third").css({"display":"block"});
$("#fourth").css({"display":"none"});
$('#adult1').attr("disabled", false);
$('#adult2').attr("disabled", false);
$('#adult3').attr("disabled", true);
$('#child1').attr("disabled", false);
$('#child2').attr("disabled", false);
$('#child3').attr("disabled", true);
}
if(room==4)
{
$("#one").css({"display":"block"});
$("#secondtr").css({"display":"block"});
$("#third").css({"display":"block"});
$("#fourth").css({"display":"block"});
$('#adult1').attr("disabled", false);
$('#adult2').attr("disabled", false);
$('#adult3').attr("disabled", false);
$('#child1').attr("disabled", false);
$('#child2').attr("disabled", false);
$('#child3').attr("disabled", false);
}
if(room==1)
{
$("#one").css({"display":"block"});
$("#secondtr").css({"display":"none"});
$("#third").css({"display":"none"});
$("#fourth").css({"display":"none"});
$('#adult1').attr("disabled", true);
$('#adult2').attr("disabled", true);
$('#adult3').attr("disabled", true);
$('#child1').attr("disabled", true);
$('#child2').attr("disabled", true);
$('#child3').attr("disabled", true);
}
});
/*for adding childs and adults maintain */
$('#adult').change(function() {
var adult=$("#adult").val();
if(adult==2)
{
$(".ch").css({"display":"none"});
$(".chill").css({"display":"block"});
$(".chil").css({"display":"block"});
$(".chi").css({"display":"block"});
}
if(adult==3)
{
$(".chi").css({"display":"none"});
$(".ch").css({"display":"none"});
$(".chill").css({"display":"block"});
$(".chil").css({"display":"block"});
}
if(adult==4)
{
$(".ch").css({"display":"none"});
$(".chi").css({"display":"none"});
$(".chil").css({"display":"none"});
$(".chill").css({"display":"block"});
}
if(adult==1)
{
$(".ch").css({"display":"block"});
$(".chi").css({"display":"block"});
$(".chil").css({"display":"block"});
$(".chill").css({"display":"block"});
}
});
$('#child').change(function() {
var child=$("#child").val();
if(child==1)
{
$(".a").css({"display":"none"});
$(".ad").css({"display":"block"});
$(".adu").css({"display":"block"});
$(".adul").css({"display":"block"});
}
if(child==2)
{
$(".a").css({"display":"none"});
$(".ad").css({"display":"none"});
$(".adu").css({"display":"block"});
$(".adul").css({"display":"block"});
}
if(child==3)
{
$(".a").css({"display":"none"});
$(".ad").css({"display":"none"});
$(".adu").css({"display":"none"});
$(".adul").css({"display":"block"});
}
if(child==0)
{
$(".a").css({"display":"block"});
$(".ad").css({"display":"block"});
$(".adu").css({"display":"block"});
$(".adul").css({"display":"block"});
}
});
<!--second -->
$('#adult1').change(function() {
var adult=$("#adult1").val();
if(adult==2)
{
$(".ch2").css({"display":"none"});
$(".chill2").css({"display":"block"});
$(".chil2").css({"display":"block"});
$(".chi2").css({"display":"block"});
}
if(adult==3)
{
$(".chi2").css({"display":"none"});
$(".ch2").css({"display":"none"});
$(".chill2").css({"display":"block"});
$(".chil2").css({"display":"block"});
}
if(adult==4)
{
$(".ch2").css({"display":"none"});
$(".chi2").css({"display":"none"});
$(".chil2").css({"display":"none"});
$(".chill2").css({"display":"block"});
}
if(adult==1)
{
$(".ch2").css({"display":"block"});
$(".chi2").css({"display":"block"});
$(".chil2").css({"display":"block"});
$(".chill2").css({"display":"block"});
}
});
$('#child1').change(function() {
var child=$("#child1").val();
if(child==1)
{
$(".a2").css({"display":"none"});
$(".ad2").css({"display":"block"});
$(".adu2").css({"display":"block"});
$(".adul2").css({"display":"block"});
}
if(child==2)
{
$(".a2").css({"display":"none"});
$(".ad2").css({"display":"none"});
$(".adu2").css({"display":"block"});
$(".adul2").css({"display":"block"});
}
if(child==3)
{
$(".a2").css({"display":"none"});
$(".ad2").css({"display":"none"});
$(".adu2").css({"display":"none"});
$(".adul2").css({"display":"block"});
}
if(child==0)
{
$(".a2").css({"display":"block"});
$(".ad2").css({"display":"block"});
$(".adu2").css({"display":"block"});
$(".adul2").css({"display":"block"});
}
});
<!--third -->
$('#adult2').change(function() {
var adult=$("#adult2").val();
if(adult==2)
{
$(".ch3").css({"display":"none"});
$(".chill3").css({"display":"block"});
$(".chil3").css({"display":"block"});
$(".chi3").css({"display":"block"});
}
if(adult==3)
{
$(".chi3").css({"display":"none"});
$(".ch3").css({"display":"none"});
$(".chill3").css({"display":"block"});
$(".chil3").css({"display":"block"});
}
if(adult==4)
{
$(".ch3").css({"display":"none"});
$(".chi3").css({"display":"none"});
$(".chil3").css({"display":"none"});
$(".chill3").css({"display":"block"});
}
if(adult==1)
{
$(".ch3").css({"display":"block"});
$(".chi3").css({"display":"block"});
$(".chil3").css({"display":"block"});
$(".chill3").css({"display":"block"});
}
});
$('#child2').change(function() {
var child=$("#child2").val();
if(child==1)
{
$(".a3").css({"display":"none"});
$(".ad3").css({"display":"block"});
$(".adu3").css({"display":"block"});
$(".adul3").css({"display":"block"});
}
if(child==2)
{
$(".a3").css({"display":"none"});
$(".ad3").css({"display":"none"});
$(".adu3").css({"display":"block"});
$(".adul3").css({"display":"block"});
}
if(child==3)
{
$(".a3").css({"display":"none"});
$(".ad3").css({"display":"none"});
$(".adu3").css({"display":"none"});
$(".adul3").css({"display":"block"});
}
if(child==0)
{
$(".a3").css({"display":"block"});
$(".ad3").css({"display":"block"});
$(".adu3").css({"display":"block"});
$(".adul3").css({"display":"block"});
}
});
<!--fourth -->
$('#adult3').change(function() {
var adult=$("#adult3").val();
if(adult==2)
{
$(".ch4").css({"display":"none"});
$(".chill4").css({"display":"block"});
$(".chil4").css({"display":"block"});
$(".chi4").css({"display":"block"});
}
if(adult==3)
{
$(".chi4").css({"display":"none"});
$(".ch4").css({"display":"none"});
$(".chill4").css({"display":"block"});
$(".chil4").css({"display":"block"});
}
if(adult==4)
{
$(".ch4").css({"display":"none"});
$(".chi4").css({"display":"none"});
$(".chil4").css({"display":"none"});
$(".chill4").css({"display":"block"});
}
if(adult==1)
{
$(".ch4").css({"display":"block"});
$(".chi4").css({"display":"block"});
$(".chil4").css({"display":"block"});
$(".chill4").css({"display":"block"});
}
});
$('#child3').change(function() {
var child=$("#child3").val();
if(child==1)
{
$(".a4").css({"display":"none"});
$(".ad4").css({"display":"block"});
$(".adu4").css({"display":"block"});
$(".adul4").css({"display":"block"});
}
if(child==2)
{
$(".a4").css({"display":"none"});
$(".ad4").css({"display":"none"});
$(".adu4").css({"display":"block"});
$(".adul4").css({"display":"block"});
}
if(child==3)
{
$(".a4").css({"display":"none"});
$(".ad4").css({"display":"none"});
$(".adu4").css({"display":"none"});
$(".adul4").css({"display":"block"});
}
if(child==0)
{
$(".a4").css({"display":"block"});
$(".ad4").css({"display":"block"});
$(".adu4").css({"display":"block"});
$(".adul4").css({"display":"block"});
}


});		 });

Html:

<divid="container">
<form name="chooseDateForm" id="chooseDateForm" action="" method="post">
<fieldset class="fi">
<legend>Test date picker form</legend>
<label for="start-date" >Start date:</label><p>
<input name="start-date" id="start-date" class="date-pick dp-applied"><a href="#" class="dp-choose-date" title="Choose date" style="display:none;">Choose date</a></p><br><br>
<label for="end-date" >End date:</label><p>
<input name="end-date" id="end-date" class="date-pick dp-applied"><a href="#" class="dp-choose-date" title="Choose date" style="display:none;">Choose date</a></p><br><br>
<input type="hidden" id="nights" name="nights" readonly="true"/>
<label id="dis"></label><label id="ni" style="display:none;">nights</label>
<br><br>


<div id="peop">
<div class="al">
<label>Rooms</label>
<select id="rooms" name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="al">
<table width="125" height="40" border="0" id="ser" >
<!--first room -->
<tr id="one">
<td width="6">&nbsp;</td>
<td width="51" align="right" valign="top">
<label>adults</label>
<select id="adult" name="adult[]">
<option value="1" class="adul" >1</option>
<option value="2" class="adu">2</option>
<option value="3" class="ad">3</option>
<option value="4" class="a">4</option>
</select>
</td>
<td width="2">&nbsp;</td>
<td width="38" align="left" valign="top">
<label>child</label>
<select id="child" name="child[]">
<option value="0" class="chill">0</option>
<option value="1" class="chil">1</option>
<option value="2" class="chi">2</option>
<option value="3" class="ch">3</option>
</select>
</td>
</tr>
<!--second room -->
<tr id="secondtr" style="display:none;">
<td width="6">&nbsp;</td>
<td width="51" align="right" valign="top"> <label>adults</label>
<select id="adult1" name="adult[]" disabled="disable">
<option value="1" class="adul2" >1</option>
<option value="2" class="adu2">2</option>
<option value="3" class="ad2">3</option>
<option value="4" class="a2">4</option>
</select>
</td>
<td width="2">&nbsp;</td>
<td width="38" align="left" valign="top"> <label>child</label>
<select id="child1" name="child[]" disabled="disable">
<option value="0" class="chill2">0</option>
<option value="1" class="chil2">1</option>
<option value="2" class="chi2">2</option>
<option value="3" class="ch2">3</option>
</select>
</td>
</tr>
<!--third room -->
<tr style="display:none;" id="third">
<td width="6">&nbsp;</td>
<td width="51" align="right" valign="top"> <label>adults</label>
<select id="adult2" name="adult[]" disabled="disable">
<option value="1" class="adul3" >1</option>
<option value="2" class="adu3">2</option>
<option value="3" class="ad3">3</option>
<option value="4" class="a3">4</option>
</select>
</td>
<td width="2">&nbsp;</td>
<td width="38" align="left" valign="top"> <label>child</label>
<select id="child2" name="child[]" disabled="disable">
<option value="0" class="chill3">0</option>
<option value="1" class="chil3">1</option>
<option value="2" class="chi3">2</option>
<option value="3" class="ch3">3</option>
</select>
</td>
</tr>
<!--fourth room -->
<tr style="display:none;" id="fourth">
<td width="6">&nbsp;</td>
<td width="51" align="right" valign="top"> <label>adults</label>
<select id="adult3" name="adult[]" disabled="disable">
<option value="1" class="adul4" >1</option>
<option value="2" class="adu4">2</option>
<option value="3" class="ad4">3</option>
<option value="4" class="a4">4</option>
</select>
</td>
<td width="2">&nbsp;</td>
<td width="38" align="left" valign="top"> <label>child</label>
<select id="child3" name="child[]" disabled="disable">
<option value="0" class="chill4">0</option>
<option value="1" class="chil4">1</option>
<option value="2" class="chi4">2</option>
<option value="3" class="ch4">3</option>
</select>
</td>
</tr>


</table>

</div>
</div>
<input type="submit" value="submit" name="sub">
</fieldset>
</form>
</div>
<tt id="results"></tt>
</div>




Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)