min-height and width with flex

The child element of a flexbox may not obey to the css property min-height. Therefore you should use this code in the parent element: min-height: 100vh.

Otherwise the child element, f.e. the main div of a web page with few content, could end before the end of the page, in an inelegant way.

The width of a child element as well may not work as expected (and as it would do without flex). Therefore you should explicitly state the width of a child element within a flexbox.

Otherwise a web page (with few text, i.g.) could have a width considerably narrower that expected.

automatically alternate a div in a web page

It is quite easy automatically alternate a (image) banner in a webpage with javascript. But if you want alternate automatically a complex text it is not so easy.

First of all you have to know that is not possible use php, because the “duty” of php ends with the “production” of a page, and it is not usable to change something in a page alrealdy “made”.

Therefore, the only way is javascript. I found a js to change automatically images (every x time) and I modified it according to my needs.

il javascript

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// slides[slideIndex-1].style.display = "block";
// slides[slideIndex-1].className = slides[i].className.replace(" visible", "");
slides[slideIndex-1].style.display = "flex";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}

l’html

Afterward I was able to use, within the html proposed a php code, as in the following

 $ads_verticale_dx="<code><p class=\"mySlides fade\"><span class=\"numbertext\">1 / 3</span><img src=\"someimage.jpg\" width=\"100px\" /><br />some <b>text</b> with<br /> <a rel=\"external\" href=\"somelink/\">some link</a></p>  
 <p class=\"mySlides fade\"><span class=\"numbertext\">2 / 3</span><img src=\"someotherimage.jpg\" width=\"100px\" /><br />some other <b>text</b> with a<br />  
 <a rel=\"external\" href=\"somelink/\">some other link</a></p>  
 <div style=\"text-align:center\"><span class=\"dot\"></span><span class=\"dot\"></span><span class=\"dot\"></span></div>  

il css

And this is the css to add

.mySlides {display: none; 
  }

/* Slideshow container */
.slideshow-container { vertical-align: middle; 
}

/* Caption text */
.text {
  display: none;
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  visibility: hidden;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

Last problem: how load the javascript. You can put it within the body, and this way it works without proiblems, but is a quite ugly solution. The best way is tu put the script within the head, or in a linked js file with all the other scripts, and then do (wihin the body tag) the command onLoad=”showSlides();”. But doing so, some browser, such as Chrome, could not understand the command. To fix this issue, be sure to use the correct case (onLoad, not onload) and try to delete the browser cache. This way you should force Chrome to recognize the script.

It works!

center divs horizontally

In my website I have three (main) divs: the actually main one and two small laterals ads divs (at left and at right of the main one). I noticed that the lateral divs weren’t at the middle of the free (lateral) space, in big screens.

1. The solution was use the flexbox, with this code in the parent div:

display:flex; justify-content: space-around; 

2. But a problem was the fact that these divs have a position:fixed propriety, that is incompatible with flex.

Therfore I was suggested to use position:sticky instead of position:fixed, and it worked.

3.A last problem was that after this change, clicking anything in my page there was a sort od “dance” of all the element within the window. This was solved creating a parent div of my three (main) divs, so that not body, but this new div is the parent.

show “alt” attribute after an image

You can use a javascript, like this

<script type="text/javascript">
// img[style]').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

      $("img").each(function(){
          var title = this.alt;
          $(this).after(''+ title +'');
      }); //Adds the dynamic captions.
 });
 //]]>
</script>

include wordpress category (or tag) posts in a website

  • You can install wordpress in a subdirectory of your website, in localhost as well.
  • Afterward you can embed the content (or the link) of your wordpress posts in your php pages using a code like the following:
<?php 
/* the path of your wordpress subfolder with the file, required, "wp-blog-header.php" */
require("$root/wordpress/wp-blog-header.php");
//get_header(); [you can omit this row, if you want embed the wp posts in your page having already header and styles]
?>


<?php
// Get the last 200 posts of a given category: 
//in this case the 565 one (=office).
global $post;
$args = array('posts_per_page' => 200,  'category' => 565 );
$myposts = get_posts( $args );

foreach( $myposts as $post ) :	setup_postdata($post); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
// the following code is to put a link: you could choose to don't add it, or, on the contrary, to put only it
<a href="<?php the_permalink() ?>" rel="bookmark" 
title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a><br />
<?php endforeach; ?>
  • if you want embed in your pages tag posts instead of category posts you can use this code

$args = array('posts_per_page' => 100, 'tag' => 'css' );

Further info here.

How avoid https problems in localhost

Since a solution to force browsers toward a secured connection (with https and not http) is using an .htaccess file in the root folder, you can avoid many problems with https in localhost with this code, which you can put into the .htaccess, before the last row:

RewriteCond %{HTTP_HOST} ^[^.]+\.[^.]{3}$

So your .htacces file should contain these rows

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteCond %{HTTP_HOST} ^[^.]+.[^.]{3}$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

This way you will have, with the same file, in local an http connection, and in remore an https connection.