Categoria: webmaster

Pubblicato il

tables and small screens

Tables, mainly if with more than two columns, are badly rendered on small screens (smartphones, tablets and the like). Indeed, not only they are unreadable, but they mess up the whole page, making it unreadable on small screens.

Therefore the best would be avoid as possible tables used as layout or even concept map.

The only tables you should use are for data (as from a database). In these cases you can use this helpful css code:

 <style type="text/css">
 /*<![CDATA[*/
 table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
 }

 table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
 }

 table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
 }

 table th,
 table td {
  padding: .625em;
  text-align: center;
 }

 table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
 }

 @media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
 }

 /*]]>*/
 </style>

In this way you can get you data perfectly readable on small screen., as you can see in this example.

Pubblicato il

How to set the css :.after size

It may happen that an image you chose for a css after content is too big. Therefore you need to resize it.

The following code doesn’t work:

yourelement::after {
  content: url(image.jpg);
  width: 10px;
}

You should use this, instead

yourelement::after{
    background-image: url(image);
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Pubblicato il

How to switch a php variable according to the server address

I managed to switch my websites links (containing a php variable: $root) according to the server address. If they are in localhost the variable begins with: http://localhost , if they are on remote the variable is the remote address.

The php code is quite simple:

if ($_SERVER['SERVER_NAME'] == "localhost")
{$root_yourwebsiteA = "http://localhost/your path/yourwebsiteA/";
 $root_yourwebsiteB = "http://localhost/your path/yourwebsiteB/";
 $root_yourwebsiteC = "http://localhost/your path/yourwebsiteC/";
}
else 
{$root_yourwebsiteA = "http://remote path/yourwebsiteA/";
 $root_yourwebsiteB = "http://remote path/yourwebsiteB/";
 $root_yourwebsiteC = "http://remote path/yourwebsiteC/";
}

Pubblicato il

how to pass a php variable to javascript

You can use a code like the following:

<?php 
  $name= "Hello World";
?> 
<script> 
  var x = "<?php echo "$name"?>";      
  document.write(x);    
</script>

and then insert this code in a php page: but not with a js extension, but with some like inc

Pubblicato il

embed a div from another page

The way with less code is a jquery script. Like the following:

<p id="new"></p>

<script>
$( "#new" ).load( "/your-path/your-file.php #your-div" );
</script>

The only security limit is that you cannot use an absolute path, beginning with https:// .

But you can use a php variable to set your javascript value so that it may be available from any folder (sub-folder) of your website. See here how to pass a php variable to javascript.

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.