Thursday, February 21, 2013

Demo: Projects videos

1) Servic Management System 

version smsv.1 : Sample video first time user interface for right hand and left hand users.

version smsv.1a: Implementing the random password generating everytime user enter correct username in the login user field the password will send to phone number. 
( security : if any unauthorised user enter username user will get  the message )


2)Portable File Management.

version :pfm_p.a.
- Added files listings.
- Added new file creation.

version :pfm_p.b.
- Updated New Folder adding.

version :pfm_p.c.
- Updated Image uploading.




3) Customised Message on Image

 version :my?glr-1.00
Customised Message on Image with style sheet
Drag option handle in all browser.

version :my?glr-1.01
- Updated message rotating.

Reference : www.mypeopolls.com

Posted by at No comments:

Wednesday, February 20, 2013

Active header menu link.

Menu active link with php.

Create menu_link.php and include in all the pages.

$present_page=$_SERVER['PHP_SELF'];
$slice_=explode('/',$present_page);
//getting the max array value key ( start with 0 so need add -1 )
$count_num=(count($slice_)-1);
$act_page=$slice_[$count_num];

$log_in=array('link1'=>'link1.php','link2'=>'link2.php');
<ul>
<?php
foreach($log_in as $keyin=>$linkin)
{
?>
<li><a href="<?php echo $linkin;?>" id="<?php echo $keyin;?>" class="<?php echo ($act_page==$linkin)?'act_menu':''; ?>"><?php echo $keyin;?></a></li>
<?php
}
?>
</ul>

Active page link will be styled with act_menu .
stylesheet : .act_menu {fotn-weigt:bold;color:green;}


Posted by at No comments:

Tuesday, February 19, 2013

Simple Customized select box with jquery

Customized jQuery select box:


Replacing all select box inside the body with customized jquery script.

Jquery script:


 //box parameter for class refernece while calling the function


function mypeopolls_select_box(box)
{

var count=1;
$(".select_content").each(function(event){

//get the select box of parent class .select_content
var get_select_class=$(this).find(box);


//get the select box option details of parent class .select_content
var get_select=$(this).find('.'+box+' option');

get_select_class.after('<div class="new_box"><input type="text" class="get_li_value" id="get_li_'+count+'"/><ul id="append_li_'+count+'" class="list_li"></ul><input type="hidden" name="text_val_'+count+'" id="text_val_'+count+'" /></div>');


var values =$.map(get_select, function(e) {
var option_id=e.value;
var option_value=e.text;

//appending the select box value in to list
$("#append_li_"+count).append("<li id="+option_id+" class='list_vals'>"+option_value+"</li>");

//hiding the select box
get_select_class.hide();

});

count++;

});




$(".get_li_value").each(function(){
var get_avt_id=$(this).next().attr('id');

var frst_li=$("#"+get_avt_id+" li:first");

$(this).val(frst_li.html());

$("#"+get_avt_id).next().val(frst_li.attr('id'))

});




//------------- click event for input text box =--------------------///

$(".get_li_value").click(function(event){

event.preventDefault()

$(".get_li_value").next().slideUp('slow');
$(this).next().slideToggle(100);

});



//------setting the value in input box -------//

$(".list_li li").each(function(){

$(this).click(function(){

var hidvalue=$(this).html();

var parent_ul=$(this).parent().attr('id');

var id_main=$("#"+parent_ul);

id_main.prev().val(hidvalue);

id_main.next().val($(this).attr('id'));

id_main.slideUp(100);

});

});

//------end setting the value in input box -------//


}



HTML:


<html>
<title>customized select boxes</title>
<head>
<script src="http://mypeopolls.com/praveen_mypeopolls_jquery/jquery.js"></script>


<script type="text/javascript">


$(document).ready(function(){
mypeopolls_select_box('.box');
});

</script>


</head>
<body>

<form action="get.php" method="get">

<span class="select_content">
<select class="box">
<option value="name">names</option>
<option value="test">tests</option>
<option value="test1">test1s</option>
</select>
</span>


<span class="select_content">
<select class="box">
<option value="n1">names1</option>
<option value="t1">tests2</option>
<option value="31">test1s3</option>
</select>
</span>

<input type="submit"/>

</form>


</body>
</html>

Style sheet :

<style>
*{
 padding:0px;
 margin:0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}


.select_content .get_li_value{
 padding-right:20px;
 border:1px solid #cccccc;
background-image:url('images/sele.jpg');
 background-position:center right;
 background-repeat:no-repeat;
 cursor:pointer;
 height:27px;
}

.new_box{
 float:left;
 border:0px solid red;
 padding:5px;
 margin:10px;
}

.list_li
{
 border:1px solid gray;
 border-bottom:none;
 width:148px;
 position:absolute;
 margin-top:1px;
 display:none;
 z-index:99;
}

.list_li li{
 list-style:none;
 cursor:pointer;
 border-bottom:1px solid white;
 background-color:#cccccc;
 height:25px;
 line-height:25px;
}

.list_li li:hover{
 background-color:gray;
 color:white;
}
</style>


Results:







Note : Work only with jquery version 1.6.4 ,bug fixing on latest version of jquery and IE stylesheet;

 Other Works:
1)Customised Message on Image
Posted by at No comments:
Subscribe to: Posts (Atom)