User Defined Menu IN YII -- election project we have used

To Make this first we need to change the layout main file. That is main.php

<?php /* @var $this Controller */

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/fadeslideshow.js');
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/jqueryslidemenu.js'); 
/* These are the Java Script files to be imported */
 ?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />

<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/jqueryslidemenu.css" />  
<!-- This is only CSS we are using for Menu -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/fadeslideshow.js"></script>  <!-- The same script we are defining here -->
   

<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>

<body>

<div class="container" id="page">

<div id="header">
<div id="logo"><img src="images/election.jpg"></img> <?php //echo CHtml::encode(Yii::app()->name); ?></div>
</div>

<div id="mainmenu"></div>

 <div id="myslidemenu" class="jqueryslidemenu"><!-- mainmenu --> 
<!-- This is the main Div to menu the below is the user defined menu -->

<?php $this->widget('zii.widgets.CMenu',array('activeCssClass'=>'current','encodeLabel' => false,
'items'=>array(
array('label'=>'&nbsp;&nbsp;Home&nbsp;&nbsp;','url'=>array('site/index')),
array('label'=>'&nbsp;EVM Second Randomzation&nbsp;', 'url'=>array(''), 'items'=>array(
array('label'=>'Ballot Units', 'url'=>array('evm/bu')),  /* Actions defined in application */
array('label'=>'Control Units',  'url'=>array('evm/cu')),
array('label'=>'Reserved',  'url'=>array('')),
array('label'=>'Freeze',  'url'=>array('')),
)),
array('label'=>'&nbsp;&nbsp;MOs Randomization&nbsp;&nbsp;', 'url'=>array(''), 'items'=>array(
array('label'=>'Initialization', 'url'=>array('mo/moinit')),
array('label'=>'Randomize MOs',  'url'=>array('mo/morand')),
array('label'=>'Show','url'=>array(''),'items'=>array(
array('label'=>'Alloted MOs',  'url'=>array('mo/moallot')),
array('label'=>'Reserved MOs',  'url'=>array('mo/moreserve')),
)),
array('label'=>'Freeze Data',  'url'=>array('mo/freeze')),
)),
array('label'=>'&nbsp;&nbsp;Polling Personnel Rand.&nbsp;&nbsp;', 'url'=>array(''), 'items'=>array(
array('label'=>'Team Formation', 'url'=>array(''),'items'=>array(
array('label'=>'Constituency Wise', 'url'=>array('/personnel/freeze')),
array('label'=>'Total', 'url'=>array('/personnel/freeze')),
array('label'=>'Consolidated', 'url'=>array('/personnel/freeze')),
array('label'=>'Reserved',  'url'=>array('/personnel/freeze')),
)),
array('label'=>'Third Randomization',  'url'=>array(''),'items'=>array(
array('label'=>'Constituency Wise', 'url'=>array('/personnel/constwise')),
array('label'=>'Total Randomization', 'url'=>array('/personnel/tot')),
array('label'=>'Show','url'=>array(''),'items'=>array(
array('label'=>'Constituency Wise',  'url'=>array('personnel/repfilter')),
array('label'=>'Total Rep',  'url'=>array('personnel/totrep')),
)),
array('label'=>'Freeze', 'url'=>array('/personnel/freeze')),
)),
)),

array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>   /* End of User defined menu */

</div>  <!-- End of the css and js defined div -->

<br/><br/>
<?php if(isset($this->breadcrumbs)):?>
<?php $this->widget('zii.widgets.CBreadcrumbs', array(
'links'=>$this->breadcrumbs,
)); ?><!-- breadcrumbs -->
<?php endif?>
        <?php $this->renderPartial('//site/dialog'); ?>
<?php echo $content; ?>

<div class="clear"></div>

<div id="footer">
Copyright &copy; <?php echo date('Y'); ?> by NIC,Hyderabad.<br/>
All Rights Reserved.<br/>

</div><!-- footer -->

</div><!-- page -->

</body>
</html>

please check the highlighted colors and comments explaining the colored text. the JS and CSS files are defined below. The rest are same,

  jqueryslidemenu.css

.jqueryslidemenu{
font: bold 13px Arial,Helvetica,sans-serif;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
/* background: #414141; background of tabs (default state)*/
background: #69A8CD; 
font-weight:bold;
color: white;
padding: 8px 10px;
border: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: lightyellow; /*tab link background during hover state*/
color: #69A8CD;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: bold 12px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Copy the contents to the jqueryslidemenu.css file and paste the file in app_folder/css/ folder.

jqueryslidemenu.js

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'images/down.gif', 23], right:['rightarrowclass', 'images/right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:

jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

Copy the above contents to jqueryslidemenu.js file and save it in app_folder/js/ folder.

and last and final is "fadeslideshow.js"

fadeslideshow.js

/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){
this.setting=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
setting.oninit=setting.oninit || function(){}
setting.onslide=setting.onslide || function(){}
if (setting.displaymode.randomize) //randomly shuffle order of images?
setting.imagearray.sort(function() {return 0.5 - Math.random()})
var preloadimages=[] //preload images
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
for (var i=0; i<setting.imagearray.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=setting.imagearray[i][0]
if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
setting.longestdesc=setting.imagearray[i][3]
}
var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
var slideshow=this
jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
.appendTo(setting.$wrapperdiv)
var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)
var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
fadeSlideShow.routines.adddescpanel($, setting)
if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
setting.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
slideshow.showhidedescpanel('hide')
}
})
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
slideshow.showhidedescpanel('show')
$(this).css({visibility:'hidden'})
})
}
else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
}
}
setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}
setting.oninit.call(slideshow) //trigger oninit() event
$(window).bind('unload', function(){ //clean up and persist
if (slideshow.setting.persist) //remember last shown image's index
fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
jQuery.each(slideshow.setting, function(k){
if (slideshow.setting[k] instanceof Array){
for (var i=0; i<slideshow.setting[k].length; i++){
if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
slideshow.setting[k][i].innerHTML=null
slideshow.setting[k][i]=null
}
}
})
slideshow=slideshow.setting=null
})
})
}

fadeSlideShow.prototype={

navigate:function(keyword){
var setting=this.setting
clearTimeout(setting.playtimer)
if (setting.displaymode.type=="auto"){ //in auto mode
setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
setting.displaymode.wraparound=true //set wraparound option to true
}
if (!isNaN(parseInt(keyword))){ //go to specific slide?
this.showslide(parseInt(keyword))
}
else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
this.showslide(keyword.toLowerCase())
}
},

showslide:function(keyword){
var slideshow=this
var setting=slideshow.setting
if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
return
}
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
slideshow.showhidedescpanel('hide', 0) //and hide it immediately
}
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
clearTimeout(setting.playtimer)
try{
setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
}catch(e){
alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
}
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
slideshow.showhidedescpanel('show')
setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
}
setting.currentstep+=1
if (setting.displaymode.type=="auto"){
if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
}
}) //end callback function
setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
setting.fglayer=setting.bglayer
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.curimage=imgindex
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3]) //if this slide contains a description
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status) //if status container defined
setting.$status.html(setting.curimage+1 + "/" + totalimages)
},

showhidedescpanel:function(state, animateduration){
var setting=this.setting
var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
if (setting.descreveal=="always" && state=="hide")
setting.$restorebutton.css({visibility:'visible'}) //show restore button
})
},

paginateinit:function($){
var slideshow=this
var setting=this.setting
if (setting.togglerid){ //if toggler div defined
setting.$togglerdiv=$("#"+setting.togglerid)
setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
var $target=$(this)
slideshow.navigate($target.data('action'))
e.preventDefault()
})
setting.$status=setting.$togglerdiv.find('.status')
}
},

paginatecontrol:function(){
var setting=this.setting
setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
}
}


}

fadeSlideShow.routines={

getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

getFullHTML:function(imagearray){
var preloadhtml=''
for (var i=0; i<imagearray.length; i++)
preloadhtml+=this.getSlideHTML(imagearray[i])
return preloadhtml
},

adddescpanel:function($, setting){
setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
.appendTo(setting.$wrapperdiv)


}
},


getCookie:function(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}

Copy the contents to fadeslideshow.js file and save in app_folder/js/ folder. now define user defined menu

Convert Datetime to number -- Removing special symbols from a string in PHP useful for uploading files

$dt=date("y-m-d H:i:s");  This statement gives the current date in PHP

$strdt = preg_replace('/[^0-9]/','',$dt);
The above preg_replace function accepts a regular expression . and gives the characters specified in regular expression in the input string.

For example in above example the date will be stored as "2015-01-23 15:14:34" in the variable $dt. Now the $strdt will have the output as "20150123151434" that is only the numbers are accepted from $dt.

This is useful while uploading the file. The duplicate file name will not be exists for uploaded file.

Why is PHP better than other programming languages

PHP was initially started as C Shells for the web programming and performing other small chores. But today it has evolved as an efficient and effective web programming language that is at the same time is easy to understand and implement. The extent of the popularity of the PHP language can be seen from the fact that most of the websites in today scenario are built on the PHP Frameworks. Even the most popular social networking website Facebook is built on the PHP frameworks. Now, here we are giving you some of the features of this language that has been inspired from the others languages like C, Java or Python. a. A successful product of the open source initiative which means that there is community support along with an extensive set of libraries that can be used to enhance the functionality of the language. b. Easily integrated with several other open source softwares and programs without requiring any extra plugins or libraries. The language provides in built support for Apache modules and MySQL and PostgresSQL database. c. A large and extensive support for the regular expressions that are used heavily for matching patterns and substitutions. You can perform a variety of string related tasks like compression, manipulations, etc. d. Support for the Raw HTTP headers that are frequently used in redirections, authentications and other high level site designs. e. Access logging support provides the real time access monitoring and maintains a quick summary of the pages that are owned and maintained by specific users. f. In built Access Control Mechanism will allows to create rules and regulations for different persons that are using your website or application. Some pages can be password protected while other can be made restricted based on the user accessing it g. Besides this the language has all the features that a modern language should possess. It has all the features of OOPS as well procedural languages

PHP v/s ASP v/s JSP – Quick Comparison:

The first and foremost feature that sets PHP apart from the other two is the community support. Being associated with the Open Source Initiative, PHP has a large user base of developers, testers, documenters and reviewers. ASP is based on the .Net framework that is owned outrighly by Microsoft. JSP is also gaining ground but it has a large way to go. It is also now an open source product. b. When it comes to the speed of the website then ASP is slightly ahead of the two. The main reason due to the existence of a compiler for interpretation of ASP code. JSP also uses precompiled and dynamically generated code. PHP is an interpreted language and uses no third party accelerators to improve on the performance. c. There are a lot of free and premium hostings for PHP. But there are only paid hostings for ASP and JSP. PHP and JSP can be run any kind of servers but the ASP.net requires only Windows based servers only. So php appears to be a better language and there are the highest no. of jobs in the field. But still it depends on person to person what he feels for a langauge.

10 Useful CSS Tips For Beginners

Cascading Style Sheets (CSS) is the style sheet used to define the HTML elements. This can be also applied to any kind of XML document, including plain XML, SVG and XUL. These styles are normally saved in external .css files. These external style sheets can save lot of your time while editing the layouts of all the pages in a website.

Here are some important and useful CSS tips and tricks that can be helpful for developers.

1. Use reset.Css

When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

2. Use Shorthand CSS

Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

Instead of creating CSS like this

1 2 3 4 5 6

.header {         background-color: #fff;       background-image: url(image.gif);       background-repeat: no-repeat;       background-position: top left;       }

It can be short-handed into the following:

1	.header { background: #fff url(image.gif) no-repeat top left    }

3. Understanding Class And ID

These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

4. Forget <Table>, Try <Div>

One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>‘s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

5. CSS Debugging Tools

It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

6. Knowing !Important

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

1	.page {background-color:blue !important;   background-color:red;}

In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

7. CSS @Import Vs <Link>

There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.

8. Typography Measurement: Px Vs Em

Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.

9. Understanding Media Types

There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.

10. Keep CSS Codes Clean

We have some CSS that has snuck into our <head> section. This is a grievous foul because not only does it muddy our markup but it can only apply to this single HTML page. Keeping your CSS files separate means that future pages can link to them and use the same code, so changing the design on multiple pages becomes easy.