Categoria: webmaster

Pubblicato il

mysql/php output in utf8

To avoid output problems in non-latin characters you should add this line in a msyqli query (i.e. after $db = mysqli_connect($db_host, $db_user, $db_password, $db_name);):

mysqli_set_charset($db, 'utf8');

Pubblicato il

center (v and h) an expanded element

It is not easy to center vertically and horizontally an expanded element in a page.

I found this code working for me:

.expansible {max-width: 10vw; 
    transition: all 1s; 
    transition:transform 0.25s ease;}
.expanded {
    max-width: 20vw;
    transform:scale(2.6);
    position: absolute;
    left: 30%;
    top: 25%;
    outline:0;
}

The image is expended with this js code (put at the end of a file):

document.querySelectorAll('img.expansible').forEach(imageElement => {
  imageElement.addEventListener('click', e => {
    e.preventDefault()
    imageElement.classList.toggle('expanded')
  })
})

and adding the class expansible to the images you want expansible.

Pubblicato il

How to hide an empty element

with css

To hide an element you can use css: element:empty (such as p:empty) {display:none}, or img[src=""] {display:none}.

with mysql code

You can, even with PDO, use this syntax

if ($data[0]['somecolumn'] != '') {echo " " . $data[0]['somecolumn'] . "";}
Pubblicato il

open link inside a ‘details’ element

‘Details’ html tag is a very easy way to collapse/expand a web content: you can see it in the following example. This is the code:

<details>
<summary>expansible title</summary>
<p>all the content you want: text, images, video, in a nutshell: all possible content</p>
</details>

and this is the result:

expansible title

all the content you want: text, images, video, in a nutshell: all possible content

But there is a problem: the collapsed content is not reachable unless you click over his ‘summary’ (in the example above: ‘expansible title’) . Therefore a link from outside the details content toward some element inside that, doesn’t work, because it cannot open it.

To fix this problem you can use a little javascript:

  const openDetailsIfAnchorHidden = evt => {
  const targetDIV = document.querySelector(evt.target.getAttribute("href"));
  if ( !! targetDIV.offsetHeight || targetDIV.getClientRects().length ) return;
  targetDIV.closest("details").open = true;
 }

 [...document.querySelectorAll("[href^='#']")].forEach( 
   el => el.addEventListener("click", openDetailsIfAnchorHidden )
 );

to be put at the bottom of a page (otherwise it doesn’t work).

Pubblicato il

multilingual svg

I noticed that the very good and simple code systemlanguage, such in the following example

<switch>
<text x="400" y="500" systemLanguage="en">
  <tspan dy="-50">Love comes</tspan>
  <tspan x="400" dy="200">through the stomach.</tspan>
</text> 
<text x="400" y="500" systemLanguage="de">
  <tspan dy="-50">Liebe geht</tspan>
  <tspan x="400" dy="200">durch den Magen.</tspan>
</text> 
<text x="400" y="500" systemLanguage="es">
  <tspan dy="-50">El amor entra</tspan>
  <tspan x="400" dy="200">por el estómago.</tspan>
</text> 
<text x="400" y="500" systemLanguage="fr">
  <tspan dy="-50">L'amour passe</tspan>
  <tspan x="400" dy="200">par l'estomac.</tspan>
</text>
</switch>

unfortunately doesn’t work: the browsers don’t recognize it.

Pubblicato il

responsive (css) menu

I have successfully used for several years a pure css menu, without javascript. But the problem now is that it is not enough reponsible with mobile devices. I mean that the maximum that can it be asked is to show (correctly) the main entries (disabling the drop-down from them).

I tried the new release of that css menu : but the main problem of this new, and responsive release (with some aiax script, though) it that by clicking on the hamburger icon all menu levels are shown. And If you have more than 50 entries it is a too long list.

To get a drop-down pure css reponsive menu, because of the limits of our current browsers, it is necessary use input and label tags (in a terrible: non-sematic way). This is the way of this attempt: no bad (no js, only css and that trick), but very hard to import in a previous menu.

Another attempt was following an example of collapsible responsive menu w3cschools: a code very simple and lovable, so to say, but here too: very difficult import in a previous, complex, menu.

Pubblicato il

php show a content in a given period of the year

You can use a very simple php code, f.e. for Christmas and Happy New Year greetings:

<?php 
$dataattuale = date('m-d');
$inizioauguri = date('m-d', strtotime("11/13"));
$finauguri = date('m-d', strtotime("01/10"));  
if (($dataattuale >= $inizioauguri) && ($finauguri <= $finauguri))
{include "$root/natalizio.php";} 
?>

The above code show the content of natalizio.php (in root folder) from November 13th to January 10th.

Another example

$now = date('Y-m-d');
$end = date('2024-07-15');  
if ($now <= $end)
{echo "some text";}
Pubblicato il

open-source cookie-bar solution

I found this very interesting and simple script: cookie-bar, customizable very easily here.

Unfortunately I didn’t manage to save and use that (free) javascript in local. No jquey, no css, a very short code.

The only thing you have to do is personalize the code within you have what you want hide if your visitor refuse your cookies.

The code should be something like the following:

<?php
 if ((isset($_COOKIE['cookiebar'])))
    {
    echo " [whatever you want";
    }
 else
    {
    echo "<div class=\"what-you-want\">to see this content accept our cookie policy.</div>";
    }
?>
Pubblicato il

update remote wordpress from localhost

Migrate DB is a good tool, even in its free version. You can follow these steps:

  • create a database in remote and import there the local wordpress database, changing some data with Migrate DB (tipically you have to convert the local server path https://localhost/your-local-path/wordpress to //your-remote-path/wordpress, and the local absolute path (such as /mnt/your-PC-path/wordpress) to the remote absolute path (such as https://your-remote-path/wordpress);
  • upload the local wordpress folder to your remote website, via FTP;
  • change in the uploaded folder the wp-config.php file, according to the db user, db name and db server of the remote wordpres database;
  • go to the remote wordpress, login (user and password are identical to the your local wordpress ones), and go to Migrate DB -> settings, and there -> generate/reset API key, copy the 32 char key and paste it in the local Migrate DB push box.
  • So your connection should work, syncing the remote database with the local one.

A problem could arise using Wordfence Security: to update with MigrateDB, you could have to disable temporarliy Wordfence.