Archive for the ‘Jquery’ Category

jQuery floating div on screen

Posted: July 29, 2013 in Jquery
Tags: ,

<html>
<head>
<title>floating div on screen</title>
<meta charset="UTF-8" />

<!-- ============= floating button start ========= -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://dropthebit.com/demos/stickyfloat/stickyfloat.js" type="text/javascript"></script>
<style>
#floatingButton {
background: none repeat scroll 0 0 green;
color: #FFFFFF;
right: 50px;
padding: 15px;
position: absolute;
width: 210px;
}
</style>
<script>
jQuery(document).ready(function($){
jQuery('#floatingButton').stickyfloat({duration: 400,  offsetY :50, easing :'swing'});
});
</script>
<!-- ============= floating button end ========= -->

</head>
<body>
<div style="height:1200px; width:900px; background: #EAEAEA;"> &nbsp;
<div id="floatingButton" style='height:100px; width:100px;'>Button</div>
</div>
</body>

</html>


Advertisements

jqGrid drag and drop

Posted: July 18, 2013 in Jquery, PHP
Tags: ,

1)      Add primary key field in colNames and colModel


colNames:['Id','Sort Order','Question','Created By', 'Status', 'Action'],

{name:'poll_question_id',index:'id',align:'center',hidden:true,sortable:false,editable:false},

Now your column is sortable

2)      Add mouse over effect to sort order column


{name:'order_index', sortable: true, search: false, classes:'data-cell-style mousecursor', width:col_1 ..

<style>.mousecursor{ldelim}cursor:move;{rdelim}</style>

jQuery('.mousecursor').live("mouseover", function() { jQuery(this).attr('title', 'Drag row to update sort order');

3)      Increase default rows loading:

rowNum:200,

4)      Add php file to update sort_order in database


jQuery("#applicationListGrid").jqGrid('sortableRows', {

update: function (ev, ui) {

var str = '';

var ids = jQuery("#applicationListGrid").jqGrid('getDataIDs');

for (var i = 0; i < ids.length; i++)

{

var rowId = ids[i];

if(str!="") str = str + ',';

str = str+rowId;

}

var sort_url = 'update.php?table=mytest&auto_id=question_id';

jQuery.ajax({

type: "POST",

url: sort_url,

data: { all_id: str}

}).done(function( msg ) {
jQuery("#applicationListGrid").setGridParam({sortorder: "asc"}).jqGrid("sortGrid", "order_index", true);
jQuery("#applicationListGrid").trigger("reloadGrid");

});

});

});

JqGrid onSelectRow not working

Posted: June 27, 2013 in Jquery, PHP
Tags:

I was working on partially developed code and trying to use onSelectRow  in jqGrid. Somehow it was not working.

I have removed below line and it works!!

beforeSelectRow:function(){return false;}

jQuery add to cart (Drop to cart)

Posted: September 4, 2012 in Jquery
Tags: ,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").animate({marginRight: "-150px"}, 500 );
out=0;
}
});

$(".myLinks").click(function() {
var imageId = $(this).attr('ref');
var sourceX         = $("#" + imageId).offset().left;
var sourceY         = $("#" + imageId).offset().top;
var destX         = $("#inner").offset().left;
var destY         = $("#inner").offset().top;
var gotoX         = destX - sourceX;
var gotoY         = destY - sourceY;
var lastWidth     = $("#" + imageId).width() / 3;
var lastHeight    = $("#" + imageId).height() / 3;

$("#" + imageId)
.clone()
.insertAfter("#" + imageId)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: lastWidth, height: lastHeight}, 1500, function() {
$("#inner").animate({marginRight: "0px"}, 500 );
$('#inner').append('<p>'+imageId+' Added.</p>');
});
});

});
</script>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vibha Jadwani</title>
</head><body>
<table width="600" border="1">
<tr>
<? for($i=1;$i<=10;$i++){
if(($i%3)==1) echo '<tr>';
?>
<td>
<img id="myImage<?=$i?>" src="images/<?=$i?>.png" />
<br /><a ref="myImage<?=$i?>" href="#">Add To Cart</a>
</td>
<?  if(($i%3)==0) echo '</tr>';
} ?>
</tr>
</table>

<div style="cursor: pointer; position: fixed;right: 0;top: 75px;z-index: 2; border:2px solid black;">
<div style="width: 150px; background-color:#63BEDA; float: right; margin-right:-150px;" id="inner">
Product List:
</div>
<div style="width: 100px; background-color:#279000; float: right; cursor: pointer; color:#FFF; font-size:16px; padding:20px;" id="arrow">Shopping<br />Cart</div>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script language="javascript">
$(document).ready(function() {
  $('#myTable05 td').css('background-color','grey');
  $('#myTable05 td').mouseover(function() {
	  	$('#myTable05 td').css('background-color','grey');  		
		$(this).siblings().css('background-color','white');
		var ind = $(this).index();
		$('#myTable05 td:nth-child('+(ind+1)+')').css('background-color','white');		
	});
});
</script>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="1" id="myTable05" class="fancyTable fht-table fht-table-init" style="width: 843px; margin-top: -28px;">
      <thead>
        <tr>
          <th>&nbsp;<div class="fht-cell" style="width: 40px;"></div></th>
                      <th title="jim carry">jim<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="frank mozariano">frank<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="robert denaro">robert<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                  </tr>
      </thead>
      <tbody>
      
      <tr>
      	<td title="Driver Guide Hire" style="height: 61.5px; width: 165.5px;">DGH</td>
      					<td><span>H:<input type="text" value="11.00" name="dhr[1] ?&gt;" size="3"></span><span>D:<input type="text" value="111.00" name="ddl[1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="22.00" name="dhr[2] ?&gt;" size="3"></span><span>D:<input type="text" value="222.00" name="ddl[2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="33.00" name="dhr[3] ?&gt;" size="3"></span><span>D:<input type="text" value="333.00" name="ddl[3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="44.00" name="dhr[18] ?&gt;" size="3"></span><span>D:<input type="text" value="444.00" name="ddl[18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="5.00" name="dhr[19] ?&gt;" size="3"></span><span>D:<input type="text" value="55.00" name="ddl[19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="dhr[20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="ddl[20];  ?&gt;" size="3"></span></td>
			      </tr>
      		<tr class="odd">
        	<td title="PATRIC(Patric transport inc ...)" style="height: 61.5px; width: 165.5px;">PATRIC</td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="David(David company)" style="height: 61.5px; width: 165.5px;">David</td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr class="odd">
        	<td title="Mark(Markk company)" style="height: 61.5px; width: 165.5px;">Mark</td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr class="odd">
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][20];  ?&gt;" size="3"></span></td>
					</tr>
	      
       </tbody>
    </table>
</body>
</html>

JQuery move div up down

Posted: September 29, 2011 in Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style>
.upSpan{ padding:3px; cursor:pointer;}
.downSpan{ padding:3px; cursor:pointer;}
</style>
<script language="javascript">
$(document).ready(function()
{
	var upStr = '&uarr;';
	var downStr = '&darr; ';
	$('.upDownDiv div').each(function()
	{
		$(this).prepend('<span class="downSpan" title="Move Down">'+downStr+'</span>');
		$(this).prepend('<span class="upSpan" title="Move Up">'+upStr+'</span>');
		 refreshUpDown();
	});
	$('.upSpan').live('click',function() 
	{
		var objCurr = $(this).parent();
		var objPrev = $(this).parent().prev();
		$(objPrev).insertAfter($(objCurr));
		refreshUpDown();
	});
	$('.downSpan').live('click',function() 
	{
		var objCurr = $(this).parent();
		var objPrev = $(this).parent().next();
		$(objPrev).insertBefore($(objCurr));
		refreshUpDown();
	});
	function refreshUpDown()
	{
		$('.upSpan').show();
		$('.downSpan').show();
		$(".upDownDiv div:first .upSpan").hide();
		$(".upDownDiv div:last .downSpan").hide();
	}
});
</script>
</head>

<body>

<div class="upDownDiv">
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Dabang</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Bodygaurd</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Hum apke he kaun</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Ready</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Veer</div>
</div>

</body>
</html>

jQuery get index of current object

Posted: September 14, 2011 in Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<script language="javascript">
$(function() { 
	$(".outerDiv a").click(function(){		
		var currIndex  = $(this).parent().prevAll().length;
		alert(currIndex);	
	});
});
</script>
<body>
<div class="outerDiv"><br />1 : One <a href="#">Click here</a></div>
<div class="outerDiv"><br />2 : Two <a href="#">Click here</a></div>
<div class="outerDiv"><br />3 : Three <a href="#">Click here</a></div>
<div class="outerDiv"><br />4 : Four <a href="#">Click here</a></div>
<div class="outerDiv"><br />5 : Five <a href="#">Click here</a></div>
</body>
</html>