Responsive width Facebook Page Plugin

 Facebook plugin can fit into any div by specifying the width attribute 
exemple (here width is set 200px) 

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="200" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>

The only constraint is the 180px<=width <=500px

In case when we dont have the exact size of a div until the DOM load, an alternative is to differ the script load after DOM load and pass the correct width at that moment

in this few codes i m  trying to fit the fb feed into a 63.26% of  wrapper

   console.log('running fb script');
    var fb_block = document.getElementById('fb-wrapper');    
    if(fb_block !== null){
        var parent_width = $('.home-social-content').width();        
        var fb_width = parent_width * 63.26 / 100;        
        var rounded_fb_width = Math.round(fb_width);        
        if(fb_width < rounded_fb_width){
            rounded_fb_width -= 1;
        }        
        var inject_html = '<div class="fb-page" data-href="https://www.facebook.com/airbus" data-tabs="timeline" data-width="' + rounded_fb_width +'" data-height="732" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/airbus" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/airbus">Airbus</a></blockquote></div>';
        inject_html +='<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v10.0&appId=337498777087670&autoLogAppEvents=1" nonce="qjuBX7Rb"></script>';        
        $('#fb-wrapper').html(inject_html); 
        console.log('done...');  

Prestashop 1.6.x - PHP 5.x to PHP 7.x Uncaught Error: Access to undeclared static property:

When upgrading PHP version for prestashop 1.6.x websites from 5.x to 7.x
some errors may occure (Prestashop guys confirm that max allowed version is 5.5)

Typical error is:

Uncaught Error: Access to undeclared static property: CLASS_NAME::PROPERTY/METHOD_NAME in ....
Example:
Uncaught Error: Access to undeclared static property: Validate::$data in ZZZ/classes/ObjectModel.php:1113
So i made change in 2 calsses (up to now) to make the website working :

in classes/controller/AdminController.php (Line 886 ???)
i've changed:

$return = $this->{'process'.Tools::toCamelCase($this->action)}();

to

$return = call_user_func_array(array($this, 'process'.Tools::toCamelCase($this->action)), array());

in classes/ObjectModel: (Line 1135 ???)

if (isset($data['validate']) && !Validate::$data['validate']($value) && (!empty($value) || $data['required']))

to

if (isset($data['validate']) && !call_user_func('Validate::'.$data['validate'],$value) && (!empty($value) || $data['required']))

Notice:
Even your website will reUp, it will be from time to other somme 500erros, in general they are in the same kind of the last indicated php instruction :
related to the call call_user_func that became mondatory

PHP / MySQL tables optimization

The php code below optimize all tables in MySQL database.

<?php
echo '< html > < body >';
$servername = "*****";
$username = "*****";
$password = "*****";
$database = "****";

// Create connection
$connection = new mysqli($servername, $username, $password, $database);

if ($connection -> connect_errno) {
  echo "Failed to connect to MySQL: " . $connection -> connect_error;
  exit();
}
echo "Connected successfully
";

$sql = "show tables";  

if (!$result = $connection->query($sql)) {
    die ('There was an error running query[' . $connection->error . ']');
}

while ($row = $result->fetch_array()) {
	$table_name = $row[0];
	echo 'Optimizing table: '.$table_name.'......   ';
	$connection->query("OPTIMIZE TABLE '".$tablename."'");
	echo '     ....done
';
  
}
$connection->close();
echo 'Disconnected
';
die("End");
echo '< body > < html >';
?> 

Script execution output on Prestashop 1.6 database will be like:

Connected successfully 

Optimizing table: pequi_access...... ....done 

Optimizing table: pequi_accessory...... ....done 

Optimizing table: pequi_address...... ....done 

Optimizing table: pequi_address_format...... ....done ....... 

Optimizing table: temp_attr...... ....done 

Disconnected

End

session_start(): Failed to read session data joomla

In this post we will resolve problem that occures ofently:
This problem is due essentially to MySQL connection
1- Verify your SQL connection (Servie is up)
2- Connect with your joomla user to database
   mysql -u your_user -p 
   Enter your password
3- You may have this errror
    ERROR 1524 (HY000): Plugin '*F70658E9BDD2910AC33ACDA164605DFC1DA70A68' is not loaded

4- All right: this proble occures when MySQL password encryption is not supported.
    4.1- Login with root
           

 mysql -u root -p Enter your password;
use mysql;
update user set authentication_string=PASSWORD("your_password") where User='joomla_user';
update user set plugin="mysql_native_password" where User='joomla_user';
flush privileges;
quit;

--> Now refresh your website page and it works

Sometimes we need to restart MySQL for unknown bug, then u can run:
1- mysqladmin.exe -u root -p shutdown
   <Enter your root password>
2-  mysqladmin.exe -u root -p start
   <Enter password>
End go to 4th statement above.

Tested on MySQL 5.7.17 Community Server
             Windows 10 [version 10.0.18362.720]
             Php 7.1.3
             Joomla 3.9.16

Html CSS background transition using jQuery

Supposing we have to animate body background-image change, this small code can help:

<script>

 
var bgs = ['background-image-1','background-image-2','background-image-3];/*Must be filled with images urls*/
var nbBgImages = 3; /*Must be changed if we have more or less then 3 images*/

</script>
Note:
background-image-1, background-image-2, background-image-1,....,background-image-N must have this form:
url(image-url)

Let's continue javascript and then we'll add a litte css style:
Assuming we are using jQuery we add this script inline or in separate js file:

 
(function($) {
var currentShowingBg = 1;
setInterval(changeBgImage, 7000);
function changeBgImage(){
$("body").css("background-image", bgs[currentShowingBg]);
++currentShowingBg;
if(currentShowingBg >= nbBgImages) currentShowingBg = 0;
}
})(jQuery);

all right now with js
Let's add transitions :
<style>

 
body{

background-repeat:no-repeat;>
background-position:center;
background-color:black !important;
-webkit-transition-property: background-image;
-webkit-transition-duration: 4.0s;
-webkit-transition-timing-function: ease-out;
}

</style>
Now it works ! you can stop here

Let's optimize !
There s a little shity problem with previous code: in case we have big images, latence time spend in images download will affect transitions.

A little trick is to load all images inside the html code but HIDDEN, then knowing that ready function of jquery launched only when DOM is loaded entierly we'll avoid the problem:
Let's add this html:

 
<div style="display:none">
<img src="image1"/>
<img src="image2"/>
<img src="image3"/>

</div>

all right.
See you in j2ee snippets that's better.