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

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!