{"id":2107,"date":"2020-09-10T11:03:47","date_gmt":"2020-09-10T09:03:47","guid":{"rendered":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2107"},"modified":"2020-09-11T05:43:10","modified_gmt":"2020-09-11T03:43:10","slug":"automatically-alternate-a-div-in-a-web-page","status":"publish","type":"post","link":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2107","title":{"rendered":"automatically alternate a div in a web page"},"content":{"rendered":"\n

It is quite easy automatically alternate a (image<\/strong>) banner in a webpage with javascript. But if you want alternate automatically a complex text<\/strong> it is not so easy.<\/p>\n\n\n\n

First of all you have to know that is not<\/strong> possible use php<\/strong>, 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”.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

il javascript<\/h4>\n\n\n\n
\n

var slideIndex = 0;
showSlides();<\/code><\/p>\n\n\n\n

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
}<\/code><\/p>\n<\/div><\/div>\n\n\n\n

l’html<\/h4>\n\n\n\n

Afterward I was able to use, within the html proposed a php code, as in the following<\/p>\n\n\n\n

 $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>  \n <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 \/>  \n <a rel=\\\"external\\\" href=\\\"somelink\/\\\">some other link<\/a><\/p>  \n <div style=\\\"text-align:center\\\"><span class=\\\"dot\\\"><\/span><span class=\\\"dot\\\"><\/span><span class=\\\"dot\\\"><\/span><\/div>  \n<\/code><\/pre>\n\n\n\n
il css<\/h4>\n\n\n\n
And this is the css to add<\/p>\n\n\n\n
.mySlides {display: none; \n  }\n\n\/* Slideshow container *\/\n.slideshow-container { vertical-align: middle; \n}\n\n\/* Caption text *\/\n.text {\n  display: none;\n  color: #f2f2f2;\n  font-size: 15px;\n  padding: 8px 12px;\n  width: 100%;\n  text-align: center;\n}\n\n\/* Number text (1\/3 etc) *\/\n.numbertext {\n  visibility: hidden;\n  color: #f2f2f2;\n  font-size: 12px;\n  padding: 8px 12px;\n  top: 0;\n}\n\n\/* The dots\/bullets\/indicators *\/\n.dot {\n  height: 15px;\n  width: 15px;\n  margin: 0 2px;\n  background-color: #bbb;\n  border-radius: 50%;\n  display: none;\n  transition: background-color 0.6s ease;\n}\n\n.active {\n  background-color: #717171;\n}\n\n\/* Fading animation *\/\n.fade {\n  -webkit-animation-name: fade;\n  -webkit-animation-duration: 1.5s;\n  animation-name: fade;\n  animation-duration: 1.5s;\n}\n\n@-webkit-keyframes fade {\n  from {opacity: .4} \n  to {opacity: 1}\n}\n\n@keyframes fade {\n  from {opacity: .4} \n  to {opacity: 1}\n}\n\n\/* On smaller screens, decrease text size *\/\n@media only screen and (max-width: 300px) {\n  .text {font-size: 11px}\n}<\/pre><\/code>\n\n\n\n
Last problem: how load<\/strong> the javascript. You can put it within the body<\/em>, and this way it works without proiblems, but is a quite ugly solution. The best way is tu put the script within the head<\/em>, 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<\/strong>, could not understand the command. To fix this issue, be sure to use the correct case<\/em> (onLoad, not onload) and try to delete the browser cache<\/em>. This way you should force Chrome to recognize the script.<\/p>\n\n\n\n
It works!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … <\/p>\n
Leggi tutto “automatically alternate a div in a web page”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[566],"tags":[614,616,615,249,617],"class_list":["post-2107","post","type-post","status-publish","format-standard","hentry","category-webmaster","tag-alternate-div","tag-automatic","tag-automatically","tag-chrome","tag-onload"],"_links":{"self":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2107"}],"version-history":[{"count":9,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2107\/revisions"}],"predecessor-version":[{"id":2116,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2107\/revisions\/2116"}],"wp:attachment":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}