Wednesday, 23 May 2012

Custom Right Click menu on web

Some time clients requirement that when I right click then open delete option and particular div delete

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

.vmenu {

border:1px solid #aaa;

position:absolute;

background:#fff;

display:none;

font-size:0.75em;

}

.vmenu .first_li span {

width:100px;

display:block;

padding:5px 10px;

cursor:pointer

}

.vmenu .inner_li {

display:none;

margin-left:120px;

position:absolute;

border:1px solid #aaa;

border-left:1px solid #ccc;

margin-top:-28px;

background:#fff;

}

.vmenu .sep_li {

border-top: 1px ridge #aaa;

margin:5px 0

}

.vmenu .fill_title {

font-size:11px;

font-weight:bold;

/height:15px;

/overflow:hidden;

word-wrap:break

}

;

</style>

$(document).ready(function(){

$('.toolTip').bind('contextmenu',function(e){

var $cmenu = $(this).next();

$('<div class="overlay"></div>').css({left : '0px', top : '0px',position: 'absolute', width: '100%', height: '100%', zIndex: '100' }).click(function() {

$(this).remove();

$cmenu.hide();

}).bind('contextmenu' , function(){return false;}).appendTo(document.body);

$(this).next().css({ left: e.pageX, top: e.pageY, zIndex: '101' }).show();

return false;

});

$('.vmenu .first_li').live('click',function() {

if( $(this).children().size() == 1 ) {

//alert('Delete Event');

console.log(this.id);

var aa = this.id;

var ttt=$('#tt'+aa).text();

alert(ttt);

$('.vmenu').hide();

$('.overlay').hide();

}

});

/*$('.vmenu .inner_li span').live('click',function() {

alert($(this).text());

$('.vmenu').hide();

$('.overlay').hide();

});*/

$(".first_li , .sec_li, .inner_li span").hover(function () {

$(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'});

if ( $(this).children().size() >0 )

$(this).find('.inner_li').show();

$(this).css({cursor : 'default'});

function () {

$(this).css('background-color' , '#fff' );

$(this).find('.inner_li').hide();

});

////////////////////////////////

</script>

</head>

<body>

<div id="tt12">jafar</div>

</div>

<div class="first_li" id="12"><span>Delete</span></div>

</div>

<br />

<div id="tt13">jafar1</div>

</div>

<div class="first_li" id="13"><span>Delete</span></div>

</div>

<br />

<div>jafar khan</div>

<div id="tt14" style="display:none">other Data</div>

</div>

<div class="first_li" id="14"><span>Delete</span></div>

</div>

</body>

</html>

Monday, 14 May 2012

How can create paging in codeignator?

Pagination Class

CodeIgniter's Pagination class is very easy to use, and it is 100% customizable, either dynamically or via stored preferences.

Here we will tell create paging in codeignator.

Create Model

class modelname extends CI_Model

{

function __construct()

{

parent::__construct();

$this->load->database();

}

function get_all_posts($limit, $offset)

{

//get all entry

$query = $this->db->get('entry', $limit, $offset);;

/****entry is table name *******/

return $query->result();

}

Controller

class controllername extends CI_Controller

{

function index()

{

$data['pagetitle'] = "blog";//page name

$this->load->library('pagination');// call pagination lab…

$config['base_url'] = base_url().'blog/index';

$config['total_rows'] = $this->db->count_all('entry');

$config['per_page'] = 5;

$config['num_links'] = 2;

//$config['use_page_numbers'] = TRUE;

//$config['page_query_string'] = TRUE;

$config['full_tag_open'] = '<p>';

$config['full_tag_close'] = '</p>';

$config['first_link'] = 'Start';

$config['last_link'] = 'End';

$config['next_link'] = ' > ';

$config['prev_link'] = ' < ';

$config['uri_segment'] = 3;

//$config['last_tag_open'] = '<div>';

//$config['last_tag_close'] = '</div>';

//$config['next_tag_open'] = '<div>';

//$config['next_tag_close'] = '</div>';

$config['cur_tag_open'] = '<b>';

$config['cur_tag_close'] = '</b>';

//$config['display_pages'] = FALSE;

$this->pagination->initialize($config);

// $data['query'] = $this-> modelname ->get_all_posts();

$this->load->view('blog/menu');

$data=array('title'=>'Blog Listing');

//this function will retrive all entry in the database

$data['query'] = $this-> modelname ->get_all_posts($config['per_page'],$this->uri->segment(3));

$data['paging'] = $this->pagination->create_links();

$this->load->view('blog/index',$data);

}

view

<tr>

<td>Title</td>

<td width="10%">Action</td>

</tr>

<?php foreach($query as $post) { ?>

<tr>

<td><?php echo $post->entry_id ; ?></td>

<td><?php echo $post->entry_name;?></td>

<td><?php echo $post->entry_body;?></td>

<td> <?php echo anchor('blog/edit/'.$post->entry_id, 'Edit', array('title' => 'Edit'));?>, Delet</td>

</tr>

<?php } ?>

</table>

<?php echo $paging?> //call pagination function

Wednesday, 2 May 2012

How can change div, span etc position randomly ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Welcome to Notizza</title>

<style>

.tip1 {

width:44px;

height:30px;

vertical-align:middle;

text-align:center;

font-weight:bold;

color:#222;

line-height:30px;

padding-right:6px;

background:url(../images/bubble1.png) 0 0 no-repeat;

z-index:100;

margin-top:5px;

}

.toolTip {

position: relative;

}

.toolTip a {

text-decoration: none;

text-align: center;

}

.toolTip .alt {

display: none;

}

.toolTip a:hover ~ .alt {

display: inline;

padding: 6px;

margin: 0px;

margin-top: 5px;

color: #222;

font: 13px Arial, sans-serif;

font-weight: bold;

line-height:;

border-top: 1px solid #dde1e7;

text-align: center;

text-shadow: 1px 1px 0px rgba(255, 255, 255, .3);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;

-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;

box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;

background: #f1f1f1;

background: -moz-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #d2d2d2));

background: -webkit-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);

background: -o-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);

background: -ms-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);

background: linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d2d2d2', GradientType=0 );

font-weight: normal;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

width:225px;

display:block;

}

.tip1 .toolTip a:hover ~ .alt {

color: #000;

text-shadow: 1px 1px 0px rgba(255, 255, 255, .3);

background: #ff9900;

background: -moz-linear-gradient(top, #fdcd86 0%, #ff9900 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdcd86), color-stop(100%, #ff9900));

background: -webkit-linear-gradient(top, #fdcd86 0%, #ff9900 100%);

background: -o-linear-gradient(top, #fdcd86 0%, #ff9900 100%);

background: -ms-linear-gradient(top, #fdcd86 0%, #ff9900 100%);

background: linear-gradient(top, #fdcd86 0%, #ff9900 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdcd86', endColorstr='#ff9900', GradientType=0 );

}

.alt:hover{

display:none;

}

</style>

$(document).ready(function() {

$(".tip1").each(function() {

var numRand = Math.floor(Math.random()*180);

$(this).css({'margin-left': numRand});

});

</script>

</head>

<body>