Ravichandran Jothi: Jquery

Showing posts with label Jquery. Show all posts

Thursday, 5 June 2014

Jquery $.ajax method

-Here is the sample code for $.ajax calling method in php

var id = $('#someinput_id').val();
$.ajax({
url: admin_url,
type: 'POST',
dataType: 'html',
data: {
id: id,
name: 'Ravichandran',
date: "<?php echo date('d-m-Y', strtotime(now())) ?>",

},
success:function( data ){
$('#some_id').html(data);
}
});

Thursday, 21 November 2013

Image zoom in and zoom out using Javascript

- Here is the code for simple image zoom in and zoom out using javascript.

Javascript and HTML Code:
---------------------------------------
<html>
<head>
<script language="javascript">
//set the time delay,imgsize,arrsize.
var delay=20;
var imgsize=5;
var timeon;
var wid;
var hei;
var i=0;
function zoom_out(p,q,which)
{
if(which.width <= p)
which.width += imgsize;
if(which.height <= q)
which.height += imgsize;
if(which.width <= p)
{
var tmp=which.id;
timeon=eval("setTimeout('zoom_out("+p+","+q+","+tmp+")', delay)");
}

}

function zoom_in(r,s,asd)
{

if(asd.width >= r)
asd.width -= imgsize;
if(asd.height >= s)
asd.height -= imgsize;

asd.width=r;
asd.height=s;
wid=asd.width;
hei=asd.height;
}
</script>
</head>
<body>
<table align=center cellspacing=2 cellpadding=2 height=100% width=100%><tr>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture1" src="images/book.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture2" src="images/globe.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture3" src="images/email.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture4" src="images/clock.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
</tr>
<tr><td colspan=7>
</td></tr>
</table>
</body>
</html>

- Don't forget you need 4 images(book,globe,email,clock) in images folder in your local or project.

Thursday, 2 May 2013

Jquery - How to detect a click outside an element in a Page?

- If we want to detect a click outside an particular element (div),

- Below Example the "header menus" displays normally when we click any of place in a page except " form_container".

- If we the areas of " form_container" then the header menu hide. (note initially header menu should be hide).

$('html').click(function() {

//Hide the menus if visible $('#header_menus').display();

});
$('#form_contatiner').click(function(event){

event.stopPropagation();

});

Wednesday, 24 April 2013

Jquery - How to change button type using jquery

- If we need to change input field "type" change,

$('#password').get(0).type ='text';
$('#submit_btn').get(0).type ='button';

Pages