Jquery


Video player integration with thumb image :

<script type=”text/javascript”>
jwplayer(“gallery”).setup({
//file: “<?php //echo $this->config->item(‘videof_file_path’).$result->video; ?>”,
file : “<?php echo base_url().”upload/video/”.$video_gallery[$i][‘video’];?>”,
width: “212”,
height: “149”,
//image: “<?php //echo $this->config->item(‘videof_file_path’).$result->thumb_image; ?>”
image : “<?php echo base_url().”upload/video/”.$video_gallery[$i][‘thumb_image’];?>”
});
</script>



Referesh the page automatically :

* In addition to a javascript reload, you can send a refresh header:

 header("Refresh: 300;url='http://thepage.com/example'");

Meta refresh will work very simply:

<meta http-equiv="refresh" content="0;URL=index.php" />
<meta http-equiv="refresh" content="300">

The 300 means it will refresh every 300 seconds or 5 minutes. In this way you don’t use JavaScript so there is no way the user can turn it off.

The way to do it in JavaScript is simple:

setTimeout(function() {
    window.location.reload();
}, 5000);

Another way to do that reload is using window.location:

    setTimeout(function(){
        window.location.href = "YOUR_PAGE_URL";
    }, 5000);

--------------------------------------------------------------------------------------- 
240 plugins Jquery :

http://www.sastgroup.com/jquery/240-plugins-jquery

120+ Javascript, Ajax,Jquery Mega Toolbox :

http://www.tripwiremagazine.com/2009/04/javascript-ajax-jquery-mega-toolbox.html

Jquery  validation for textbox | email | Image :

<script type=”text/javascript” src=”<?php echo base_url();?>js/admin/jquery.validate.js”></script>

<div class=”form_left”>Primary E-mail<font color=”#931010″> *</font> </div>
<input type=”text” class=”textbox required email” value=”<?php echo $email; ?>” id=”email” name=”email” />                                    </div>                                                                                                                                                                                                                                                  <div>Primary E-mail<font color=”#931010″> *</font> </div>                                                                                                                                           <input type=”file” name=”up_image” id=”up_image” accept=”jpg|jpeg|png|JPG|JPEG|PNG”>                                                                  </div>

<script>
$(document).ready(function(){
$(“#addtimeline”).validate({
messages: {
username: { required: ‘Username field is required’ },
email: { required: ‘Primary E-mail field is required’ },
staff_user_email: { required: ‘New staff user E-mail field is required’ },
forgot_password_email: { required: ‘Forgot password E-mail field is required’ },
contactus_email: { required: ‘Contact us E-mail field is required’ },
start_date: { required: ‘Registration start date field is required’ },
end_date: { required: ‘Registration end date field is required’ }
}
});
});
</script>

Basic Jquery Concepts :

<html>
<head>
<meta charset=”utf-8″ />
<title>Demo</title>
<script src=”jquery.js”>
</script>
<style type=”text/css”>
#clsBlog1,#clsBlog2,#clsBlog3{margin:50px;width:180px;border:1px solid #cccccc;padding:20px;float:left;}

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}

#panel
{
padding:50px;
display:none;
}

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:red;
}
</style>
</head>
<body>

<script>
$( document ).ready(function() {
$( “#clsPara1” ).click(function( event ) {
alert( “Thanks for visiting!” );
});

$(“#clsPara2”).click(function(){
$(this).hide();
})

$(“#clsPara3”).mouseenter(function(){
alert(‘Mouse Enter Event’);
})

$(“#clsPara4”).mouseleave(function(){
alert(“you can leave now!”);
})

$(“button”).click(function(){
$(“span”).hide();
})

/*$(“shad_btn”).dblclick(function(){
$(this).hide();
})*/

$(“input”).focus(function(){
$(this).css(“background-color”,”#cccccc”);
//$(this).css(“box-shadow”,”#cccccc 1px 1px 30px”);
});

$(“input”).blur(function(){
$(this).css(“background-color”,”#ffffff”);
});

$(“clsFadein”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(8000);
});

$(“#clsButton”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});

$(“#flip”).click(function(){
$(“#panel”).slideDown(“slow”);
});

$(“#btn1”).click(function(){
alert(“Text: ” + $(“#test”).text());
});

$(“#btn2”).click(function(){
alert(“HTML: ” + $(“#test”).html());
});

$(“#bbb”).click(function(){
$(“#aaa”).val(“Dolly Duck”);
});

$(“#clsMicky”).click(function(){
alert(“Value: ” + $(“#micky”).val());
});

$(“#clsAddclass”).click(function(){
$(“#cls1”).addClass(“important blue”);
});

$(“#Get_extn”).click(function(){
$(“#Exter_Cont”).load(“demo_test.txt”);
});

$(“#clsGet”).click(function(){
$.get(“demo_test.txt”,function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});

$(“#clsPost”).click(function(){
$.post(“demo_test.php”,  //this page content is below
{

name:”kasirajan”,
mail:”srikasi1113@gmail.com”

},
function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});
});
</script>

<div id=”clsBlog1″>
<h3>jQuery Hide/Show Events</h3>

<p id=”clsPara1″>Click Event To Alert</p>
<hr>

<p id=”clsPara2″>Click Event To Hide</p>
<hr>

<p id=”clsPara3″> Mouse Enter Event</p>
<hr>

<p id=”clsPara4″>Mouse Leave Event</p>
<hr>

<p id=”clsPara5″>Mouse down Event</p>
<hr>

<p>Mouse hover event is same as mouse enter event</p>
<hr>

<p style=”border:1px solid #502020;padding:10px;box-shadow:#802020 1px 1px 30px”>
<span>when you click on the button i will be disappear</span>
<button id=”shad_btn”>Click Me</button>
</p>
<hr>

<p>
Name: <input type=”text” name=”fullname”><br>
Email: <input type=”text” name=”email”>
</p>
</div>
<!–First Blog Ends–>
<!–Second Blog Starts–>
<div id=”clsBlog2″>
<p>fadeIn() with different parameters.</p>
<button id=”clsFadein”>Click to fade in boxes</button>
<hr>

<div id=”div1″ style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;display:none;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;display:none;background-color:blue;”></div>
<button id=”clsButton”>Click to fade out boxes</button>
<br><br>
<hr>

<div id=”flip”>Click to slide down panel</div>
<div id=”panel”>Hello world!</div>
<br><br>
<hr>

<p id=”test”>when you click on the below buttons it will show the o/p as text and html like <b>bold</b>.</p>
<button id=”btn1″>Show Text</button>
<button id=”btn2″>Show HTML</button>
<br><br>
<hr>

<p>Input field:
<input type=”text” id=”aaa” value=”Mickey Mouse”>
</p>
<button id=”bbb”>Set Text</button>
</div>

<div id=”clsBlog3″>
<div id=”cls1″>How to add css class in jquery.</div>
<div id=”cls2″>How to add css class in jquery.</div>
<br>
<button id=”clsAddclass”>Add classes to first div element</button>
<br><br>
<hr>

<div id=”Exter_Cont”><h2>Change the content from external link</h2></div>
<button id=”Get_extn”>Get External Content</button>
<br><br>
<hr>

<p>Name: <input type=”text” id=”micky” value=”Mickey Mouse”></p>
<button id=”clsMicky”>Show Value</button>
<br><br>
<hr>

<button id=”clsGet”>Send an HTTP GET request</button>
<br><br>
<hr>

<button id=”clsPost”>Send an HTTP POST request</button>
</div>
</body>
</html>

demo_test.php :

<?php
$sql = mysql_connect(“localhost”,”root”,””);
if(!$sql)
{
echo “Server doesn’t connect”.mysql_error();
}
$con = mysql_select_db(“test”,$sql);
if(!$con)
{
echo “Database doesn’t connect”.mysql_error();
}
$name = $_POST[‘name’];
$mail = $_POST[‘mail’];
$query = mysql_query(“insert into newmember set name='”.$name.”‘,email='”.$mail.”‘”);
?>

—————————————————————————————————————————————————

Tyreplus :

home page language onchange event :

<form name=”frm_lang” id=”frm_lang” method=”post” action=””>

<select name=”ddlCountry” id=”ddlCountry” onChange=”javascript:document.forms[‘frm_lang’].submit();” dir=”<?php echo $GLOBALS[‘DIR’]; ?>”>
<option value=”1″ <?php echo $GLOBALS[‘LANGUAGE_ID’]==’1′?”selected=’selected'”:”; ?>>English</option>
<option value=”2″ <?php echo $GLOBALS[‘LANGUAGE_ID’]==’2′?”selected=’selected'”:”; ?>>Arabic</option>
</select>

home page country onchange event :

<form name=”frm_lang_country” id=”frm_lang_country” method=”post” action=””>
<select id=”ddlCountry” name=”ddlcountryname” onChange=”javascript:document.forms[‘frm_lang_country’].submit();” dir=”<?php echo $GLOBALS[‘DIR’]; ?>”>
<option value=”1″ <?php echo $GLOBALS[‘COUNTRY_ID’]==’1′?”selected=’selected'”:”; ?>>UAE</option>
<option value=”2″ <?php echo $GLOBALS[‘COUNTRY_ID’]==’2′?”selected=’selected'”:”; ?>>Oman</option>
<option value=”3″ <?php echo $GLOBALS[‘COUNTRY_ID’]==’3′?”selected=’selected'”:”; ?>>Qatar</option>
<option value=”4″ <?php echo $GLOBALS[‘COUNTRY_ID’]==’4′?”selected=’selected'”:”; ?>>Kuwait</option>
<option value=”5″ <?php echo $GLOBALS[‘COUNTRY_ID’]==’5′?”selected=’selected'”:”; ?>>Bahrain</option>
</select>

</form>

———————————————————————————————————————————————-

Jquery Post :

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

http://api.jquery.com/jQuery.post/

—————————————–

Jquery Drop down Onchange Event In CI:

——————————————————

View Code :

<script>

function getVehicleMake(Obj, values_s)
{
//alert(Obj + values_s);
$.post(“<?php echo base_url(); ?>admin/tyre/getvehiclemake/”,
{ id: Obj, lang_id: values_s},
function(data){
//alert(data);
//$(“#up”+pid).removeClass(“arrow_top”);
$(‘#vehiclemake’+values_s).html(data);
}
);
}

// Get Vehicle Model On selecting Vehicle Make

function getVehicleModel(Obj, values_s)
{
//alert(“hi”);

//alert(Obj+values_s);
$.post(“<?php echo base_url(); ?>admin/tyre/getvehiclemodel/”,
{ id: Obj, lang_id: values_s},
function(data){
//alert(data);
//$(“#up”+pid).removeClass(“arrow_top”);
$(‘#vehiclemodel’+values_s).html(data);
}
);
}

</script>

<body>

<div>Select Vehicle Type <span>*</span></div>
<div style=”margin-bottom:20px;”>
<?php if($lang_id == 2){   ?>
<select name=”vehicletype<?=$langId[$j-1]?>” id=”vehicletype<?=$langId[$j-1]?>”
onchange=”getVehicleMake(this.value, <?php echo $lang_id; ?>)”>
<option value=””>–Select Vehicle Type–</option>
<?
for($i=0;$i<count($vehicletypeNameA);$i++)
{
?>
<option value=”<?=$vehicletypeNameA[$i][‘vehicletype_id’]?>”
<?php echo set_select(‘vehicletype’.$langId[$j-1], $vehicletypeNameA[$i][‘vehicletype_id’]); ?>><?=$vehicletypeNameA[$i][‘vehicletype_name’]?></option>
<?
}
?>
</select>
<?php } else { ?>
<select name=”vehicletype<?=$langId[$j-1]?>” id=”vehicletype<?=$langId[$j-1]?>” onchange=”getVehicleMake(this.value, <?php echo $lang_id; ?>)”>
<option value=””>–Select Vehicle Type–</option>
<?
for($i=0;$i<count($vehicletypeNameF);$i++)
{
?>
<option value=”<?=$vehicletypeNameF[$i][‘vehicletype_id’]?>” <?php echo set_select(‘vehicletype’.$langId[$j-1], $vehicletypeNameF[$i][‘vehicletype_id’]); ?>><?=$vehicletypeNameF[$i][‘vehicletype_name’]?></option>
<?
}
?>
</select>
<?php } ?>

<!–<span>Name field is required</span>–>
<br>
<?php echo form_error(‘vehicletype’.$langId[$j-1]); ?>
<?php //echo form_error(‘equalvehicletype’); ?>
</div>

———————
<div style=”clear:both”>Select Vehicle Make <span>*</span></div>
<div style=”margin-bottom:20px;”>
<?php if($lang_id == 2){   ?>

<select name=”vehiclemake<?=$langId[$j-1]?>” id=”vehiclemake<?=$langId[$j-1]?>”
onchange=”getVehicleModel(this.value, <?php echo $lang_id; ?>)”>
<option value=””>–Select Vehicle Make–</option>
<?
for($i=0;$i<count($vehiclemakeNameA);$i++)
{
?>
<option value=”<?=$vehiclemakeNameA[$i][‘vehiclemake_id’]?>” <?php echo set_select(‘vehiclemake’.$langId[$j-1], $vehiclemakeNameA[$i][‘vehiclemake_id’]); ?>><?=$vehiclemakeNameA[$i][‘vehiclemake_name’]?></option>
<?
}
?>
</select>

<?php } else { ?>

<select name=”vehiclemake<?=$langId[$j-1]?>” id=”vehiclemake<?=$langId[$j-1]?>” onchange=”getVehicleModel(this.value, <?php echo $lang_id; ?>)”>
<<option value=””>–Select Vehicle Make–</option>
<?
for($i=0;$i<count($vehiclemakeNameF);$i++)
{
?>
<option value=”<?=$vehiclemakeNameF[$i][‘vehiclemake_id’]?>” <?php echo set_select(‘vehiclemake’.$langId[$j-1], $vehiclemakeNameF[$i][‘vehiclemake_id’]); ?>><?=$vehiclemakeNameF[$i][‘vehiclemake_name’]?></option>
<?
}
?>
</select>
<?php } ?>

<!–<span>Name field is required</span>–><br>
<?php echo form_error(‘vehiclemake’.$langId[$j-1]); ?> <br />
<?php //echo form_error(‘equalvehiclemake’); ?>
</div>

—————————

<div>Select Vehicle Model <span>*</span></div>
<div style=”margin-bottom:20px;”>
<?php if($lang_id == 2){   ?>

<select name=”vehiclemodel<?=$langId[$j-1]?>” onchange=”getVehicleYear(this.value, <?php echo $lang_id; ?>)” id=”vehiclemodel<?=$langId[$j-1]?>”>
<option value=””>–Select Vehicle Model–</option>
<?
for($i=0;$i<count($vehiclemodelNameA);$i++)
{
?>
<option value=”<?=$vehiclemodelNameA[$i][‘vehiclemodel_id’]?>”
<?php echo set_select(‘vehiclemodel’.$langId[$j-1], $vehiclemodelNameA[$i][‘vehiclemodel_id’]); ?>><?=$vehiclemodelNameA[$i][‘vehiclemodel_name’]?></option>
<?
}
?>
</select>

<?php } else { ?>

<select name=”vehiclemodel<?=$langId[$j-1]?>” onchange=”getVehicleYear(this.value, <?php echo $lang_id; ?>)” id=”vehiclemodel<?=$langId[$j-1]?>”>
<option value=””>–Select Vehicle Model–</option>
<?
for($i=0;$i<count($vehiclemodelNameF);$i++)
{
?>
<option value=”<?=$vehiclemodelNameF[$i][‘vehiclemodel_id’]?>” <?php echo set_select(‘vehiclemodel’.$langId[$j-1], $vehiclemodelNameF[$i][‘vehiclemodel_id’]); ?>><?=$vehiclemodelNameF[$i][‘vehiclemodel_name’]?></option>
<?
}
?>
</select>
<?php } ?>

<!–<span>Name field is required</span>–><br>
<?php echo form_error(‘vehiclemodel’.$langId[$j-1]); ?> <br />
<?php //echo form_error(‘equalvehiclemodel’); ?>
<input type=”text” name=”year” id=”VehicleYear<?=$langId[$j-1]?>” value=””>
</div>

</body>

———————————————————————————-

Controller Code :

// Get Vehicle Make On selecting Vehicle Type

public function getvehiclemake()
{
$data = $this->tyremodel->getVehicleMakeInfo($_POST[‘id’], $_POST[‘lang_id’]);
$str = ‘<option value=””>–Select Vehicle Make–</option>’;
if(count($data)>0)
{
for($i=0;$i<count($data);$i++)
{
$str .= “<option value='”.$data[$i][‘vehiclemake_id’].”‘>”.$data[$i][‘vehiclemake_name’].”</option>”;
}
}
echo $str;
}

// Get vehicle model on selecting vehicle make

public function getvehiclemodel()
{
$data = $this->tyremodel->getVehicleModelInfo($_POST[‘id’], $_POST[‘lang_id’]);
$str = ‘<option value=””>–Select Vehicle Model–</option>’;
if(count($data)>0)
{
for($i=0;$i<count($data);$i++)
{
$str .= “<option value='”.$data[$i][‘vehiclemodel_id’].”‘>”.$data[$i][‘vehiclemodel_name’].”</option>”;
}
}
echo $str;
}

———————————————————————————————————————————-

Model Code :

// Get Vehicle Make On selecting Vehicle Type

public function getVehicleMakeInfo($vehicletype_id, $lang_id)
{
$sql = “SELECT vehiclemake_id, vehiclemake_name FROM vehicle_make WHERE vehicletype_id='”.$vehicletype_id.”‘
AND lang_id = ‘”.$lang_id.”‘ AND status=’Y'”;
//echo $sql;
$recordSet = $this->db->query($sql);
if($recordSet)
{
if($recordSet->num_rows() > 0)
{
$i=0;
foreach($recordSet->result_array() as $key =>$val)
{
$rs[]=$val;
}
return $rs;
}
}
}

// Get vehicle model on selecting vehicle make

public function getVehicleModelInfo($vehiclemake_id, $lang_id)
{
$sql = “SELECT vehiclemodel_id, vehiclemodel_name FROM vehicle_model WHERE vehiclemake_id='”.$vehiclemake_id.”‘
AND lang_id = ‘”.$lang_id.”‘ AND status=’Y'”;
//echo $sql;
$recordSet = $this->db->query($sql);
if($recordSet)
{
if($recordSet->num_rows() > 0)
{
$i=0;
foreach($recordSet->result_array() as $key =>$val)
{
$rs[]=$val;
}
return $rs;
}
}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s