Tuesday 9 December 2014

Play with CSS - CSS BOX SHADOW

CSS comes with a good box pattern called "Box Shadow" of your tag. For more details on Box shadow tutorials refer here  http://css-tricks.com/snippets/css/css-box-shadow/


We can set the floating of our tags (DIV, P etc) by setting the Box shadow style.


The box-shadow property sets one or more drop-shadows to the tags.

Sometime you need this http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow&preval=50px%2050px%205px%20black

Through this box shadow pattern i did some CSS image styling, please refer my below screenshot


.myclass{
box-shadow: 1em 0 0 0 red,
0 1em 0 0 red,
-1em 0 0 0 red,
0 -1em 0 0 red,
-1em -2em 0 0 red,
1em -2em 0 0 red,
-1em 2em 0 0 red,
1em 2em 0 0 red,
2em 1em 0 0 red,
2em -1em 0 0 red,
-2em 1em 0 0 red,
-2em -1em 0 0 red,
3em 0 0 0 red,
-3em 0 0 0 red,
0 3em 0 0 red,
0 -3em 0 0 red;
background: black;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}

At some point we can avoid using the image and we can reduce the load time of the site. I didt diked any online tutorials, but this is what i got while working practically


1em 0 0 0 red  (Creates a box to the right of your tag (for me it is a div tag)



so what if 2em 0 0 0 red (Creates a box to the right of your tag with space like below (for me it is a div tag)



Friday 7 November 2014

Why my wordpress site is slow and how to avoid it

I have been working in a WordPress project for a while and it is having too many data and comments from users. May be some 4000 posts and 30000 comments, day by day the site became shaky and it took lot of time to get loaded.

But i used the clean WordPress formats and codes, so i don't need to bother about any custom code issues. 

Note: PLEASE DO NOT CUSTOM CODE anything in the WordPress default file or write any unwanted SQL queries. Unwanted files and SQL queries will took time for the site to get loaded.

But there is something that makes the site to get loaded very slow. Actually i am just loading 10 posts in the home page and every other pages of the site is loading only 10 posts per page.

Mine is a WINDOWS / MYSQL server and it is easy for me to check any TEMP and CACHE values. While looked into my windows temp folder it loading with many 100+ PHP-CGI.exe files created for every minute, so i used a good cache plugin to cache the files and reduced the EXE file generation.

Note by default the Cache files will be get deleted on some time period (2 HRS, 4 HRS) and mine is 2 hrs.

But this does not actually reduced my page load problem and some time i got MYSQL server is overloaded something, and again i checked my TEMP folder and it showed it is stored some SESSION values for 1KB, the reason is i am using plugins (SI Captcha, Ninja Forms and YII poll) 

Inside these plugins there are code lines to generate Session values and we know all the session values will be get stored in our server, for every second the TEMP session files are getting generating. For a second i got some 5 files got generated, so i deleted these plugins and i got the site came in normal. So the problem is too many session files and php exe files.

Note: While creating any WordPress project DON'T CREATE TOO MANY SESSION values, as all will get stored in your server. And while using any plugin please check whether this is creating any session values.

My Wordpress site is very big so i did all, if you are not having that much traffic then no problem.

 



Saturday 19 April 2014

Multiple polygons on google map with hover show, hide

Here you can find the multiple ploygons on the google map and we can show and hide the ploygons as per the title mouse over, i didt find much time to shorten this jquery code. Meantime i am not ok with the line 


idx=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
if(idx==i){countries[i].setMap(map);}
else{countries[i].setMap(null);}
}


I cant able to directly assign my idx value like this countries[idx].setMap(map);, if i put like then it is showing as countriex[idx] is not a function, if anyone know the solution please let me know




Put your google map script URL
Put your Jquery ajax URL
Set your div tags with ID values


function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);   
var mapOptions = {     zoom: 2,     center: myLatLng,     mapTypeId: google.maps.MapTypeId.TERRAIN   };  
map = new google.maps.Map(document.getElementById("map_canvas"),       mapOptions);
var countries = new Array();

countries[0] = new google.maps.Polygon({
paths: [
new google.maps.LatLng(59.677361, -2.469846),     
new google.maps.LatLng(59.299717,   -6.314917),     
new google.maps.LatLng(57.877247,   -9.314917),     
new google.maps.LatLng(54.428078,  -11.638861),     
new google.maps.LatLng(51.784554,  -11.702241),    
new google.maps.LatLng(50.185848,  -10.054354),     
new google.maps.LatLng(49.405380,   -7.012100),     
new google.maps.LatLng(49.090675,   -3.272664),     
new google.maps.LatLng(48.775970,   -1.709283),     
new google.maps.LatLng(49.757851,   -2.089565),     
new google.maps.LatLng(50.714554,    1.037195),     
new google.maps.LatLng(51.482437,    2.304801),     
new google.maps.LatLng(53.433609,    3.276632),     
new google.maps.LatLng(55.863132,    3.445646)],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});

countries[1] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(25.774252, -80.190262),     
new google.maps.LatLng(18.466465, -66.118292),     
new google.maps.LatLng(32.321384, -64.757370),     
new google.maps.LatLng(25.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});


countries[2] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(12.774252, -80.190262),     
new google.maps.LatLng(33.466465, -66.118292),     
new google.maps.LatLng(44.321384, -64.757370),     
new google.maps.LatLng(33.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});

countries[3] = new google.maps.Polygon({   
paths: [   
new google.maps.LatLng(33.774252, -44.190262),     
new google.maps.LatLng(55.466465, -54.118292),     
new google.maps.LatLng(75.321384, -64.757370),     
new google.maps.LatLng(53.774252, -80.190262)],
strokeColor: "#FF0000",   
strokeOpacity: 0.8,   
strokeWeight: 2,   
fillColor: "#FF0000",   
fillOpacity: 0.3
});

jQuery('#submenu_links li a').mousemove(function(){
idx=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
if(idx==i){countries[i].setMap(map);}
else{countries[i].setMap(null);}
}
});

jQuery('#submenu_links li a').mouseout(function(){
var id=jQuery(this).attr('id');
for(var i=0,l=countries.length;i
countries[i].setMap(null);
}
});
 
 }
google.maps.event.addDomListener(window, 'load', initialize);


Thursday 6 March 2014

How to show the Active/ Inactive dropdown status in YII C detail View

Its simple to set the active, inactive in the C detail View dropdown list, just assign the status value as like the below format


 array(             
            'label'=>'Status',
            'type'=>'raw',
            'value'=>($model->status == 1) ? "Active" : "Inactive",
        ),

CActiveDataProvider Yii - Is simple and neat



CActiveDataProvider Yii - Is simple and neat, where we can enter our condition, pagination etc

I actually started coding with custom select query in YII, but while referred to "CActiveDataProvider" with conditions and pagination there is no need for to call the  sql query second time with condition or pagination

Here i will explain what i had previously and how the YII default CActiveDataProvider is working


My custom code in my controller function:
===========================================

public function actionList()

{
$criteria = new CDbCriteria();

$criteria->addCondition('user_id='.Yii::app()->user->id.'');
$count = Blog::model()->count($criteria);
$pages = new CPagination($count);

 
$pages->pageSize = 5;
$pages->applyLimit($criteria);
$models = Blog::model()->findAll($criteria);
$this->render('list', array('models' => $models, 'pages' => $pages));
}


While following the above code, i need to call this $model inside a foreach and need to show the values. 



YII default CActiveDataProvider in my controller function:
===========================================

public function actionList()
{
$criteria=new CDbCriteria;
$criteria->order='id DESC';  
$dataProvider=new CActiveDataProvider('Blog',array('criteria'=>$criteria,'pagination' => array('pageSize'=>Yii::app()->params['PaginationPerPage']),));
$this->render('list',array('dataProvider'=>$dataProvider,));
}

This is what Yii gave in default, its simple. And while following this code we can simply use the default view format from YII like below 


$this->widget('zii.widgets.CListView', array('dataProvider'=>$dataProvider,'itemView'=>'_view',)); 
?>




Tuesday 11 February 2014

How to set the country, state relationship in Yii




My Country table:
================
id
name


My state table:
===============
id
country_id
name



Here i need to refer the country from state using the country_id relationship

So first i need to generate a Relationship in my State Model like below


public function relations()
{

return array(
'country'=>array(self::BELONGS_TO, 'Country', 'country_id'),
);

}

Country here is the country model
country_id is the reference key in state table to refer the country table


Ok so in CGrid view use the below format

'country.name',


===========================================================================

And if we need filtering for countries in state admin?

Just use the compare setup like below

public function search()
{
// @todo Please modify the following code to remove attributes that should not be searched.

$criteria=new CDbCriteria;

$criteria->compare('id',$this->id);
$criteria->compare('name',$this->name);
$criteria->with = array('country');
$criteria->compare('country.id',$this->country_id, true);

return new CActiveDataProvider($this, array(
'criteria'=>$criteria,
));
}


And in your Cgridview area have it like below


array(
'name'=>'country_id',
'header'=>'Country',
'value'=>'$data->country->name',
'filter'=>CHtml::listData(Country::model()->findall(),'id','name' ),
),

Wednesday 5 February 2014

How to set the active and inactive status for 1,0 values in YII CGridView

In Yii normal CGridView will have the below structure


'columns'=>array(
'id',
'title',
'sstatus',

So to set the 0 as Inactive and 1 as Active 

we need to edit the 'status' as

array(
'header'=>'status', //for to set the title for the table column, we can remove this if we need to show the default value
'name'=>'sstatus' // where sstatus is my database column name
'value'=>'($data->sstatus==1)? "Active" : "Inactive"'
),


Once set we can see 0 as inactive and 1 as active. 


But how about filtering? 
The filtering in Yii will work when we input 1 and not as active, so just replace this filter area with dropdown list in the same area where we updated our above code, just add filter array like below



array(
'header'=>'status', //for to set the title for the table column, we can remove this if we need to show the default value
'name'=>'sstatus' // where sstatus is my database column name
'value'=>'($data->sstatus==1)? "Active" : "Inactive"',

'filter'=>CHtml::dropDownList('Slider[sstatus]', 'sstatus',  
                array(
                    ''=>'All',
                    '1'=>'Active',
                    '0'=>'Inactive',
                )
            ),
        ),

),



in the above Slider is my model name and sstatus is my database table column... thats it.......


But i faced some problems like auto select and select all is not working, so we can set the filter directly like the below code


  array(
           'name' => 'sstatus',
           'filter' => array(0 => 'In Active', 1 => 'Active'),
'value' => '($data->sstatus == 1) ? "Active" : "Inactive"',
       ),